# tsconfig include playground Dry-Run Report

Date: 2026-04-30

## Scope

- Temporary change tested: `include` from `["src/**/*"]` to `["src/**/*", "playground/**/*"]`.
- Source-code fixes performed: none.
- `tsconfig.json` restored after dry-run: yes.
- Full dry-run output saved at: `/tmp/vue-tsc-dryrun-output.txt`.

## Summary

- Command: `pnpm exec vue-tsc --noEmit`
- Exit code: `2`
- Total TypeScript diagnostics: 21
- Files with diagnostics: 8
- Suggested Round 2 shape: one focused implementation prompt.
- Round 2 estimate: 1.5-2.5 hours.
- Split recommendation: no. Error count is <= 30 and categories are narrow.

## File Distribution

| File | Diagnostics | Main issue |
| --- | ---: | --- |
| `playground/docs/pages/RadioPage.vue` | 7 | Event handler passes plain strings where helper expects `Ref<...>`. |
| `playground/docs/pages/CheckboxPage.vue` | 5 | Docs/demo status includes `some`, but component handler/helper only accepts `on/off`. |
| `playground/docs/pages/designAssetData.ts` | 4 | `?raw` imports for CSS/JSON lack TypeScript module declarations. |
| `playground/CanonicalShowcase.vue` | 1 | Select feature is typed as generic `string`, then passed to a narrower union. |
| `playground/docs/DocsShell.vue` | 1 | Async page loader typed as `Promise<unknown>`, too broad for `defineAsyncComponent`. |
| `playground/docs/pages/BadgePage.vue` | 1 | Template `v-for` color inferred as `string`, not Badge `Color` union. |
| `playground/docs/pages/SelectPage.vue` | 1 | Readonly tuple/array passed to mutable `Item[]` prop. |
| `playground/docs/pages/TablePage.vue` | 1 | Readonly columns passed to mutable `TableColumn[]` prop. |

## Error Type Classification

| Category | Count | Examples | Suggested fix class |
| --- | ---: | --- | --- |
| Implicit `any` | 0 | none | none |
| Strict null check failures | 0 | none | none |
| Module resolution / ambient declarations | 4 | `designAssetData.ts` cannot resolve `*.css?raw` / `*.json?raw`. | Add local ambient declarations for `*?raw` modules, likely in a repo-level `.d.ts` included by `tsconfig`. |
| Vue refs / computed / event inference | 8 | `DocsShell.vue` async loader returns `Promise<unknown>`; `RadioPage.vue` passes string values to a helper typed for `Ref<...>`. | Tighten helper/loader types. Prefer explicit page-component loader type and ref-aware helper signatures. |
| Component prop/domain mismatch | 7 | `CheckboxPage.vue` passes `Status` including `some` into handlers typed as `on/off`; `BadgePage.vue` template color inferred as `string`. | Align demo literal unions with component prop unions; cast or type arrays as component-compatible unions where appropriate. |
| Readonly vs mutable prop arrays | 2 | `SelectPage.vue` readonly dropdown examples to `Item[]`; `TablePage.vue` readonly columns to `TableColumn[]`. | Either make component prop types accept readonly arrays, or clone/spread at call sites. Prefer readonly-compatible prop types if runtime does not mutate. |
| Other | 0 | none | none |

## Full Dry-Run Output

```text
playground/CanonicalShowcase.vue(146,31): error TS2345: Argument of type 'string' is not assignable to parameter of type '"time" | "date" | "default"'.
playground/docs/DocsShell.vue(67,5): error TS2322: Type 'PageLoader' is not assignable to type 'AsyncComponentLoader<Component<any, any, any, ComputedOptions, MethodOptions, {}, any>>'.
  Type 'Promise<unknown>' is not assignable to type 'Promise<AsyncComponentResolveResult<Component<any, any, any, ComputedOptions, MethodOptions, {}, any>>>'.
    Type 'unknown' is not assignable to type 'AsyncComponentResolveResult<Component<any, any, any, ComputedOptions, MethodOptions, {}, any>>'.
playground/docs/pages/BadgePage.vue(187,38): error TS2322: Type 'string' is not assignable to type 'Color | undefined'.
playground/docs/pages/CheckboxPage.vue(156,64): error TS2345: Argument of type 'Status' is not assignable to parameter of type '"on" | "off"'.
  Type '"some"' is not assignable to type '"on" | "off"'.
playground/docs/pages/CheckboxPage.vue(164,63): error TS2345: Argument of type 'Status' is not assignable to parameter of type '"on" | "off"'.
  Type '"some"' is not assignable to type '"on" | "off"'.
playground/docs/pages/CheckboxPage.vue(172,66): error TS2345: Argument of type 'Status' is not assignable to parameter of type '"on" | "off"'.
  Type '"some"' is not assignable to type '"on" | "off"'.
playground/docs/pages/CheckboxPage.vue(206,18): error TS2322: Type '(status: "on" | "off") => void' is not assignable to type '(value: Status) => any'.
  Types of parameters 'status' and 'value' are incompatible.
    Type 'Status' is not assignable to type '"on" | "off"'.
      Type '"some"' is not assignable to type '"on" | "off"'.
playground/docs/pages/CheckboxPage.vue(217,66): error TS2345: Argument of type 'Status' is not assignable to parameter of type '"on" | "off"'.
  Type '"some"' is not assignable to type '"on" | "off"'.
playground/docs/pages/designAssetData.ts(1,26): error TS2307: Cannot find module '../../../src/tokens/variables.css?raw' or its corresponding type declarations.
playground/docs/pages/designAssetData.ts(2,30): error TS2307: Cannot find module '../../../figma-data/normalized/variables.json?raw' or its corresponding type declarations.
playground/docs/pages/designAssetData.ts(3,39): error TS2307: Cannot find module '../../../figma-data/normalized/design-system-candidates.json?raw' or its corresponding type declarations.
playground/docs/pages/designAssetData.ts(4,35): error TS2307: Cannot find module '../../../figma-data/published/icons/index.json?raw' or its corresponding type declarations.
playground/docs/pages/RadioPage.vue(144,41): error TS2345: Argument of type 'string' is not assignable to parameter of type 'Ref<"producer", "producer">'.
  Type 'string' is not assignable to type 'Ref<"producer", "producer">'.
playground/docs/pages/RadioPage.vue(152,41): error TS2345: Argument of type 'string' is not assignable to parameter of type 'Ref<"director", "director">'.
  Type 'string' is not assignable to type 'Ref<"director", "director">'.
playground/docs/pages/RadioPage.vue(160,41): error TS2345: Argument of type 'string' is not assignable to parameter of type 'Ref<"guest", "guest">'.
  Type 'string' is not assignable to type 'Ref<"guest", "guest">'.
playground/docs/pages/RadioPage.vue(200,43): error TS2345: Argument of type 'string' is not assignable to parameter of type 'Ref<"owner", "owner">'.
  Type 'string' is not assignable to type 'Ref<"owner", "owner">'.
playground/docs/pages/RadioPage.vue(230,43): error TS2345: Argument of type 'string' is not assignable to parameter of type 'Ref<"push", "push">'.
  Type 'string' is not assignable to type 'Ref<"push", "push">'.
playground/docs/pages/RadioPage.vue(238,43): error TS2345: Argument of type 'string' is not assignable to parameter of type 'Ref<"record", "record">'.
  Type 'string' is not assignable to type 'Ref<"record", "record">'.
playground/docs/pages/RadioPage.vue(246,43): error TS2345: Argument of type 'string' is not assignable to parameter of type 'Ref<"clip", "clip">'.
  Type 'string' is not assignable to type 'Ref<"clip", "clip">'.
playground/docs/pages/SelectPage.vue(429,18): error TS2322: Type 'readonly [{ readonly label: "Search"; readonly value: "search"; readonly active: true; }, { readonly label: "Monitor"; readonly value: "monitor"; }, { readonly label: "Assets"; readonly value: "assets"; }] | readonly [...] | readonly [...] | readonly [...]' is not assignable to type 'Item[] | undefined'.
  The type 'readonly [{ readonly label: "Search"; readonly value: "search"; readonly active: true; }, { readonly label: "Monitor"; readonly value: "monitor"; }, { readonly label: "Assets"; readonly value: "assets"; }]' is 'readonly' and cannot be assigned to the mutable type 'Item[]'.
playground/docs/pages/TablePage.vue(148,47): error TS4104: The type 'readonly [{ readonly key: "name"; readonly title: "Name"; }, { readonly key: "role"; readonly title: "Role"; }, { readonly key: "status"; readonly title: "Status"; }]' is 'readonly' and cannot be assigned to the mutable type 'TableColumn[]'.
```

## Suggested Round 2 Fix Plan

1. Add ambient module declarations for Vite raw imports.
   - Likely covers all 4 `designAssetData.ts` module-resolution diagnostics.
   - Candidate shape:
     ```ts
     declare module '*?raw' {
       const content: string
       export default content
     }
     ```
   - Must ensure the declaration file is included when `playground/**/*` is included.

2. Fix narrow literal/value helper typing.
   - `CanonicalShowcase.vue`: narrow `variant.feature` before passing to `getOptionsForFeature`, or type the variant object with the existing `SelectVariant['feature']`.
   - `BadgePage.vue`: type the template color list as the Badge color union instead of letting Vue infer plain `string`.
   - `CheckboxPage.vue`: decide whether `some` is a valid runtime status for handler paths. If yes, widen helper/component handler types deliberately; if not, filter demo handler calls to `on/off`.

3. Fix Vue helper signatures.
   - `DocsShell.vue`: replace `PageLoader = () => Promise<unknown>` with a compatible async component loader type.
   - `RadioPage.vue`: current helper type appears to expect a `Ref<literal>`, but call sites pass literal option values. Either change helper signature to accept `(currentRef, optionValue, event)` or update call sites to pass the actual ref.

4. Decide readonly-array policy.
   - If `DropDownListSelect` and `Table` do not mutate `items` / `columns`, prefer changing prop types to accept readonly arrays.
   - If component mutation exists, clone at call sites with spread arrays.

## `@ts-expect-error` Recommendation

No `@ts-expect-error` is recommended for this batch. The diagnostics are concrete typing mismatches or missing ambient declarations, and all appear fixable without temporary suppression.

## Round 2 Estimate

- Estimated implementation: 1.5-2.5 hours.
- Suggested split: no; one implementation prompt should be enough.
- Risk: low-to-medium. The only judgment call is whether readonly arrays should be accepted at component prop boundaries or cloned in docs pages.