From 635d0c00f988b41007ce219f4260a10414a7b438 Mon Sep 17 00:00:00 2001 From: Dominik Brych Date: Tue, 9 Jun 2026 11:41:33 +0200 Subject: [PATCH 1/3] feat: add component structure, styling, and reusable component override instructions; enhance agent productivity documentation --- .../component-structure.instructions.md | 27 +++ .../component-styling.instructions.md | 26 +++ ...usable-component-overrides.instructions.md | 33 +++ .github/prompts/scaffold-component.prompt.md | 13 ++ .../skills/scaffold-component-skill/SKILL.md | 197 ++++++++++++++++++ AGENTS.md | 78 +++++++ 6 files changed, 374 insertions(+) create mode 100644 .github/instructions/component-structure.instructions.md create mode 100644 .github/instructions/component-styling.instructions.md create mode 100644 .github/instructions/reusable-component-overrides.instructions.md create mode 100644 .github/prompts/scaffold-component.prompt.md create mode 100644 .github/skills/scaffold-component-skill/SKILL.md create mode 100644 AGENTS.md diff --git a/.github/instructions/component-structure.instructions.md b/.github/instructions/component-structure.instructions.md new file mode 100644 index 00000000..f06daf74 --- /dev/null +++ b/.github/instructions/component-structure.instructions.md @@ -0,0 +1,27 @@ +--- +description: "Use when creating or moving components in src/components. Enforce component folder naming, required index.ts barrel export, and component file naming conventions." +applyTo: "src/components/**/*.{ts,tsx}" +--- +# Component Structure Rules + +Apply these as hard rules when creating a new component. + +- Every component must have its own folder. +- New component folder names must match the component name in kebab-case (for example: `LookupMany` -> `lookup-many`). +- The main component implementation file must be named after the component in PascalCase (for example: `LookupMany.tsx`). +- Component props interface must be named `IProps`. +- The props interface must be defined in the main component file (`.tsx`), not in a separate `interfaces.ts` file, unless explicitly requested. + +- Component function parameter must always be named `props` +- Each component folder must include an `index.ts` file. +- `index.ts` must export the component from the component implementation file. + +Required export pattern: + +```ts +export * from './ComponentName'; +``` + +Legacy note: + +- Existing folders that use older naming can remain unchanged unless the task explicitly includes renaming/refactoring. diff --git a/.github/instructions/component-styling.instructions.md b/.github/instructions/component-styling.instructions.md new file mode 100644 index 00000000..4f0ec301 --- /dev/null +++ b/.github/instructions/component-styling.instructions.md @@ -0,0 +1,26 @@ +--- +description: "Use when creating or editing React controls/components in src/components. Enforce keeping styling in a separate styles.ts file using mergeStyleSets and an exported getStyles function." +applyTo: "src/components/**/*.{ts,tsx}" +--- +# Component Styling Rules + +Apply these as hard rules for component work in this repository. + +- Keep component styling in a separate `styles.ts` file colocated with the component. +- Do not define style objects inline in component `.tsx` files unless there is a temporary debugging reason. +- In `styles.ts`, build styles with `mergeStyleSets` from `@fluentui/react`. +- Export a styles factory function named `getStyles`. +- The function must end with `Styles` and include the component name. +- For newly scaffolded components, style factory output must be exactly a `root` slot with an empty object (`{ root: {} }`) unless explicitly requested otherwise. +- In component `.tsx` files, call style factory functions inside `useMemo` (for example: `const styles = useMemo(() => getStyles(...), [...deps])`). + +Examples: + +- `getLookupStyles` +- `getGridCellRendererStyles` +- `getDateTimeStyles` + +When editing an older component that does not follow these rules: + +- Prefer migrating styles into `styles.ts` as part of the change when scope allows. +- If full migration is out of scope, keep any new styling in `styles.ts` and avoid adding new inline style debt. diff --git a/.github/instructions/reusable-component-overrides.instructions.md b/.github/instructions/reusable-component-overrides.instructions.md new file mode 100644 index 00000000..4770b2e7 --- /dev/null +++ b/.github/instructions/reusable-component-overrides.instructions.md @@ -0,0 +1,33 @@ +--- +description: "Use when creating new reusable components in src/components. Enforce a LookupMany-like composition pattern where consumers can replace internal UI parts through typed onRender callbacks and component defaults." +applyTo: "src/components/**/*.{ts,tsx}" +--- +# Reusable Component Override Rules + +Apply these as hard rules when creating a new reusable component. + +- For overridable components, `IProps` must include `components?: PartialComponents>`. +- `IProps` should be defined in the main component file (`.tsx`). +- `IComponents` should be defined in `components/components.tsx`. +- Do not scaffold a separate `interfaces.ts` file unless explicitly requested. +- `IComponents` must be scaffolded as an empty interface by default. +- Do not scaffold any `onRender...` callback names unless explicitly requested. +- Store default component mappings in a dedicated `components` subfolder. +- Put default component mappings in `components/components.tsx`. +- Add `components/index.ts` that exports everything from `components/components.tsx`. +- In scaffolds, `components/components.tsx` must export an empty object placeholder (for example `export const Components: IComponents = {};`). +- In component implementation, create a merged components object in the component body only when overridable UI is requested: `{ ...Components, ...props.components }`. +- Do not scaffold render callback usage unless explicitly requested. + +LookupMany pattern to follow: + +- Contracts in [src/components/TaskGrid/components/grid/lookup-many/components/components.tsx](src/components/TaskGrid/components/grid/lookup-many/components/components.tsx) +- Prop and merge usage in [src/components/TaskGrid/components/grid/lookup-many/LookupMany.tsx](src/components/TaskGrid/components/grid/lookup-many/LookupMany.tsx) + +Recommended baseline for each reusable component: + +- `IProps` with optional `components` override slot. +- `IComponents` empty scaffold contract (expand only when requested). +- `components/components.tsx` with an empty `Components` scaffold export. +- `components/index.ts` exporting from `components.tsx`. +- Main component with merged components object available in the component body. diff --git a/.github/prompts/scaffold-component.prompt.md b/.github/prompts/scaffold-component.prompt.md new file mode 100644 index 00000000..54357f60 --- /dev/null +++ b/.github/prompts/scaffold-component.prompt.md @@ -0,0 +1,13 @@ +--- +description: "Wrapper prompt for component scaffolding. Use the scaffold-component-skill for the canonical workflow." +argument-hint: "name= overridableUi=" +agent: "agent" +--- +Use [scaffold component skill](../skills/scaffold-component-skill/SKILL.md) as the source of truth for scaffolding behavior. + +Pass through the same arguments: + +- `name=` (required) +- `overridableUi=` (required) + +If an argument is missing, ask for it and then apply the workflow from the skill. diff --git a/.github/skills/scaffold-component-skill/SKILL.md b/.github/skills/scaffold-component-skill/SKILL.md new file mode 100644 index 00000000..260faed6 --- /dev/null +++ b/.github/skills/scaffold-component-skill/SKILL.md @@ -0,0 +1,197 @@ +--- +name: scaffold-component-skill +description: 'Scaffold a React component folder with repository conventions. Use when creating a new component with optional overridable UI contract and strict empty-default templates.' +argument-hint: 'name= overridableUi=' +--- + +# Scaffold Component Skill + +Scaffold a new component in a new subfolder inside the current folder using repository conventions. + +## Input Format + +- `name=` (required, PascalCase) +- `overridableUi=` (required) + +If one or both values are missing, ask a concise clarification question before generating files. + +## Embedded Conventions + +Apply these conventions directly when scaffolding. + +### Structure Conventions + +- Every component must have its own folder. +- New component folder names must match the component name in kebab-case (for example: `LookupMany` -> `lookup-many`). +- The main component implementation file must be named after the component in PascalCase (for example: `LookupMany.tsx`). +- Component props interface must be named `IProps`. +- The props interface must be defined in the main component file (`.tsx`), not in a separate `interfaces.ts` file, unless explicitly requested. +- Component function parameter must always be named `props`. +- Each component folder must include an `index.ts` file. +- `index.ts` must export the component from the component implementation file: + +```ts +export * from './ComponentName'; +``` + +Legacy note: + +- Existing folders that use older naming can remain unchanged unless the task explicitly includes renaming/refactoring. + +### Styling Conventions + +- Keep component styling in a separate `styles.ts` file colocated with the component. +- Do not define style objects inline in component `.tsx` files unless there is a temporary debugging reason. +- In `styles.ts`, build styles with `mergeStyleSets` from `@fluentui/react`. +- Export a styles factory function named `getStyles`. +- The function must end with `Styles` and include the component name. +- For newly scaffolded components, style factory output must be exactly `{ root: {} }` unless explicitly requested otherwise. +- In component `.tsx` files, call style factory functions inside `useMemo`. + +### Overridable UI Conventions + +- Apply only when `overridableUi=yes`. +- `IProps` must include `components?: PartialComponents>`. +- `IComponents` must be scaffolded as an empty interface by default. +- `IComponents` should be defined in `components/components.tsx`. +- Do not scaffold a separate `interfaces.ts` file unless explicitly requested. +- Do not scaffold any `onRender...` callback names unless explicitly requested. +- Store default component mappings in a dedicated `components` subfolder. +- Put default component mappings in `components/components.tsx`. +- Add `components/index.ts` that exports everything from `components/components.tsx`. +- In scaffolds, `components/components.tsx` must export an empty object placeholder: + +```ts +export const Components: IComponents = {}; +``` + +- In component implementation, create a merged components object in the component body only when overridable UI is requested: + +```ts +const components = { ...Components, ...props.components }; +``` + +- Do not scaffold render callback usage unless explicitly requested. + +## Implementation Requirements + +- Create a new component folder inside the current folder. +- Name the new folder in kebab-case derived from `name`. +- Create files using the canonical templates below. +- Keep strong typing and avoid introducing `any` unless unavoidable. +- Do not scaffold fake/example business props or behavior. + +## Canonical Templates + +Use these templates as source of truth for generated code. + +### Template A: `overridableUi=no` + +Folder structure: + +```text +/ + .tsx + styles.ts + index.ts +``` + +`.tsx` + +```ts +import React, { useMemo } from 'react'; +import { useTheme } from '@fluentui/react'; +import { getStyles } from './styles'; + +export interface IProps {} + +export const = (props: IProps) => { + const theme = useTheme(); + const styles = useMemo(() => getStyles(theme), [theme]); + + return
; +}; +``` + +`styles.ts` + +```ts +import { ITheme, mergeStyleSets } from '@fluentui/react'; + +export const getStyles = (theme: ITheme) => { + return mergeStyleSets({ + root: {}, + }); +}; +``` + +`index.ts` + +```ts +export * from './'; +``` + +Use the same `index.ts` export pattern for all scaffolded component folders. + +## Conditional Requirements + +When `overridableUi=yes`: + +- Add `components` subfolder and use Template B. +- Do not scaffold `onRender...` callback names or render payload objects unless explicitly requested. + +### Template B: `overridableUi=yes` + +Folder structure: + +```text +/ + .tsx + styles.ts + index.ts + components/ + components.tsx + index.ts +``` + +`.tsx` + +```ts +import React, { useMemo } from 'react'; +import { useTheme } from '@fluentui/react'; +import { Components, IComponents } from './components'; +import { getStyles } from './styles'; + +export interface IProps { + components?: PartialComponents>; +} + +export const = (props: IProps) => { + const theme = useTheme(); + const styles = useMemo(() => getStyles(theme), [theme]); + const components = { ...Components, ...props.components }; + + return
; +}; +``` + +`components/components.tsx` + +```ts +export interface IComponents {} + +export const Components: IComponents = {}; +``` + +`components/index.ts` + +```ts +export * from './components'; +``` + +## Output Format + +1. Brief summary of generated structure. +2. List of created/updated files. +3. Any assumptions made. +4. Validation steps performed (for example: `npm run build`). diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 00000000..3204383f --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,78 @@ +# AGENTS.md + +This file helps AI coding agents become productive quickly in this repository. + +## Scope + +- Repository: @talxis/base-controls +- Tech stack: TypeScript + React component library for Power Apps Component Framework (PCF) +- Bundling: Rollup (ESM output, declaration bundling) + +## First Steps + +- Install dependencies: npm install +- Build library: npm run build +- Storybook local docs: npm run documentation +- Storybook static build: npm run build-documentation +- Yalc publish flow used by maintainers: npm run yalc + +Important: +- No test script is defined in package.json. +- No lint script is defined in package.json. +- Prefer validating changes with npm run build and targeted type checks. + +## Canonical Documentation + +- Main package overview: [README.md](README.md) +- Usage patterns and extensibility: [docs/usage.md](docs/usage.md) +- Local linking and troubleshooting: [docs/developing.md](docs/developing.md) +- Release process and versioning: [docs/releasing.md](docs/releasing.md) + +Link to these docs instead of duplicating their content. + +## Architecture Map + +- Public exports are aggregated from: [src/index.ts](src/index.ts) +- Controls live in: [src/components](src/components) +- Shared hooks live in: [src/hooks](src/hooks) +- Shared interfaces live in: [src/interfaces](src/interfaces) +- Shared utilities live in: [src/utils](src/utils) + +Common control structure (example-heavy controls): +- Component entry: ControlName.tsx +- Contracts: interfaces.ts +- Styles: styles.ts +- Translations: translations.ts +- Logic extraction: useModel.ts or hooks/ +- Barrel exports: index.ts + +When adding or moving modules, keep barrel exports consistent so public imports from the package root continue to work. + +## Build and Packaging Notes + +- Rollup discovers entries via src/**/index.ts and preserves module structure in dist. +- Type declarations are bundled from dist/index.d.ts. +- Many runtime dependencies are marked external in [rollup.config.js](rollup.config.js); avoid inlining these into the bundle. +- TypeScript emits declarations to dist with strict mode enabled; keep changes type-safe. + +## Coding Conventions for This Repo + +- Prefer strong typing; avoid introducing any unless unavoidable. +- Use kebab-case for all newly created folder names (for example: `lookup-many`, `grid-cell-renderer`). +- Legacy folders that do not follow kebab-case can remain unchanged unless the task explicitly includes renaming/refactoring them. +- Follow existing per-control pattern: UI in component files, behavior in custom hooks/models, styling in styles.ts. +- Keep translations in dedicated translations.ts files where the control already uses that pattern. +- Avoid mutating PCF context objects directly. Use object spread to override nested behavior safely. +- Preserve existing public API shape in interfaces unless explicitly changing API behavior. + +## Practical Pitfalls + +- If linked local builds show React hooks runtime errors, use the React linking guidance in [docs/developing.md](docs/developing.md). +- If build output changes unexpectedly, verify barrel exports and Rollup multi-entry discovery paths first. +- Do not commit local-consumer-specific config changes from linked Portal/PCF repos. + +## Change Validation Checklist + +- Run npm run build +- Confirm exports are reachable from [src/index.ts](src/index.ts) and relevant nested index.ts files +- Check affected controls for translation/style/interface consistency with neighboring controls From ab2a40b56a91c186a24b078822af5a4b4ba7d9a0 Mon Sep 17 00:00:00 2001 From: Dominik Brych Date: Tue, 9 Jun 2026 11:48:09 +0200 Subject: [PATCH 2/3] chore: remove outdated component structure, styling, and reusable component override instructions --- .../component-structure.instructions.md | 27 --------------- .../component-styling.instructions.md | 26 --------------- ...usable-component-overrides.instructions.md | 33 ------------------- .github/prompts/scaffold-component.prompt.md | 13 -------- 4 files changed, 99 deletions(-) delete mode 100644 .github/instructions/component-structure.instructions.md delete mode 100644 .github/instructions/component-styling.instructions.md delete mode 100644 .github/instructions/reusable-component-overrides.instructions.md delete mode 100644 .github/prompts/scaffold-component.prompt.md diff --git a/.github/instructions/component-structure.instructions.md b/.github/instructions/component-structure.instructions.md deleted file mode 100644 index f06daf74..00000000 --- a/.github/instructions/component-structure.instructions.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -description: "Use when creating or moving components in src/components. Enforce component folder naming, required index.ts barrel export, and component file naming conventions." -applyTo: "src/components/**/*.{ts,tsx}" ---- -# Component Structure Rules - -Apply these as hard rules when creating a new component. - -- Every component must have its own folder. -- New component folder names must match the component name in kebab-case (for example: `LookupMany` -> `lookup-many`). -- The main component implementation file must be named after the component in PascalCase (for example: `LookupMany.tsx`). -- Component props interface must be named `IProps`. -- The props interface must be defined in the main component file (`.tsx`), not in a separate `interfaces.ts` file, unless explicitly requested. - -- Component function parameter must always be named `props` -- Each component folder must include an `index.ts` file. -- `index.ts` must export the component from the component implementation file. - -Required export pattern: - -```ts -export * from './ComponentName'; -``` - -Legacy note: - -- Existing folders that use older naming can remain unchanged unless the task explicitly includes renaming/refactoring. diff --git a/.github/instructions/component-styling.instructions.md b/.github/instructions/component-styling.instructions.md deleted file mode 100644 index 4f0ec301..00000000 --- a/.github/instructions/component-styling.instructions.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -description: "Use when creating or editing React controls/components in src/components. Enforce keeping styling in a separate styles.ts file using mergeStyleSets and an exported getStyles function." -applyTo: "src/components/**/*.{ts,tsx}" ---- -# Component Styling Rules - -Apply these as hard rules for component work in this repository. - -- Keep component styling in a separate `styles.ts` file colocated with the component. -- Do not define style objects inline in component `.tsx` files unless there is a temporary debugging reason. -- In `styles.ts`, build styles with `mergeStyleSets` from `@fluentui/react`. -- Export a styles factory function named `getStyles`. -- The function must end with `Styles` and include the component name. -- For newly scaffolded components, style factory output must be exactly a `root` slot with an empty object (`{ root: {} }`) unless explicitly requested otherwise. -- In component `.tsx` files, call style factory functions inside `useMemo` (for example: `const styles = useMemo(() => getStyles(...), [...deps])`). - -Examples: - -- `getLookupStyles` -- `getGridCellRendererStyles` -- `getDateTimeStyles` - -When editing an older component that does not follow these rules: - -- Prefer migrating styles into `styles.ts` as part of the change when scope allows. -- If full migration is out of scope, keep any new styling in `styles.ts` and avoid adding new inline style debt. diff --git a/.github/instructions/reusable-component-overrides.instructions.md b/.github/instructions/reusable-component-overrides.instructions.md deleted file mode 100644 index 4770b2e7..00000000 --- a/.github/instructions/reusable-component-overrides.instructions.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -description: "Use when creating new reusable components in src/components. Enforce a LookupMany-like composition pattern where consumers can replace internal UI parts through typed onRender callbacks and component defaults." -applyTo: "src/components/**/*.{ts,tsx}" ---- -# Reusable Component Override Rules - -Apply these as hard rules when creating a new reusable component. - -- For overridable components, `IProps` must include `components?: PartialComponents>`. -- `IProps` should be defined in the main component file (`.tsx`). -- `IComponents` should be defined in `components/components.tsx`. -- Do not scaffold a separate `interfaces.ts` file unless explicitly requested. -- `IComponents` must be scaffolded as an empty interface by default. -- Do not scaffold any `onRender...` callback names unless explicitly requested. -- Store default component mappings in a dedicated `components` subfolder. -- Put default component mappings in `components/components.tsx`. -- Add `components/index.ts` that exports everything from `components/components.tsx`. -- In scaffolds, `components/components.tsx` must export an empty object placeholder (for example `export const Components: IComponents = {};`). -- In component implementation, create a merged components object in the component body only when overridable UI is requested: `{ ...Components, ...props.components }`. -- Do not scaffold render callback usage unless explicitly requested. - -LookupMany pattern to follow: - -- Contracts in [src/components/TaskGrid/components/grid/lookup-many/components/components.tsx](src/components/TaskGrid/components/grid/lookup-many/components/components.tsx) -- Prop and merge usage in [src/components/TaskGrid/components/grid/lookup-many/LookupMany.tsx](src/components/TaskGrid/components/grid/lookup-many/LookupMany.tsx) - -Recommended baseline for each reusable component: - -- `IProps` with optional `components` override slot. -- `IComponents` empty scaffold contract (expand only when requested). -- `components/components.tsx` with an empty `Components` scaffold export. -- `components/index.ts` exporting from `components.tsx`. -- Main component with merged components object available in the component body. diff --git a/.github/prompts/scaffold-component.prompt.md b/.github/prompts/scaffold-component.prompt.md deleted file mode 100644 index 54357f60..00000000 --- a/.github/prompts/scaffold-component.prompt.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -description: "Wrapper prompt for component scaffolding. Use the scaffold-component-skill for the canonical workflow." -argument-hint: "name= overridableUi=" -agent: "agent" ---- -Use [scaffold component skill](../skills/scaffold-component-skill/SKILL.md) as the source of truth for scaffolding behavior. - -Pass through the same arguments: - -- `name=` (required) -- `overridableUi=` (required) - -If an argument is missing, ask for it and then apply the workflow from the skill. From 1353787347d68852fda88c99a313187f0f44bcb3 Mon Sep 17 00:00:00 2001 From: Dominik Brych Date: Tue, 9 Jun 2026 11:51:58 +0200 Subject: [PATCH 3/3] chore: remove AGENTS.md file to streamline documentation --- AGENTS.md | 78 ------------------------------------------------------- 1 file changed, 78 deletions(-) delete mode 100644 AGENTS.md diff --git a/AGENTS.md b/AGENTS.md deleted file mode 100644 index 3204383f..00000000 --- a/AGENTS.md +++ /dev/null @@ -1,78 +0,0 @@ -# AGENTS.md - -This file helps AI coding agents become productive quickly in this repository. - -## Scope - -- Repository: @talxis/base-controls -- Tech stack: TypeScript + React component library for Power Apps Component Framework (PCF) -- Bundling: Rollup (ESM output, declaration bundling) - -## First Steps - -- Install dependencies: npm install -- Build library: npm run build -- Storybook local docs: npm run documentation -- Storybook static build: npm run build-documentation -- Yalc publish flow used by maintainers: npm run yalc - -Important: -- No test script is defined in package.json. -- No lint script is defined in package.json. -- Prefer validating changes with npm run build and targeted type checks. - -## Canonical Documentation - -- Main package overview: [README.md](README.md) -- Usage patterns and extensibility: [docs/usage.md](docs/usage.md) -- Local linking and troubleshooting: [docs/developing.md](docs/developing.md) -- Release process and versioning: [docs/releasing.md](docs/releasing.md) - -Link to these docs instead of duplicating their content. - -## Architecture Map - -- Public exports are aggregated from: [src/index.ts](src/index.ts) -- Controls live in: [src/components](src/components) -- Shared hooks live in: [src/hooks](src/hooks) -- Shared interfaces live in: [src/interfaces](src/interfaces) -- Shared utilities live in: [src/utils](src/utils) - -Common control structure (example-heavy controls): -- Component entry: ControlName.tsx -- Contracts: interfaces.ts -- Styles: styles.ts -- Translations: translations.ts -- Logic extraction: useModel.ts or hooks/ -- Barrel exports: index.ts - -When adding or moving modules, keep barrel exports consistent so public imports from the package root continue to work. - -## Build and Packaging Notes - -- Rollup discovers entries via src/**/index.ts and preserves module structure in dist. -- Type declarations are bundled from dist/index.d.ts. -- Many runtime dependencies are marked external in [rollup.config.js](rollup.config.js); avoid inlining these into the bundle. -- TypeScript emits declarations to dist with strict mode enabled; keep changes type-safe. - -## Coding Conventions for This Repo - -- Prefer strong typing; avoid introducing any unless unavoidable. -- Use kebab-case for all newly created folder names (for example: `lookup-many`, `grid-cell-renderer`). -- Legacy folders that do not follow kebab-case can remain unchanged unless the task explicitly includes renaming/refactoring them. -- Follow existing per-control pattern: UI in component files, behavior in custom hooks/models, styling in styles.ts. -- Keep translations in dedicated translations.ts files where the control already uses that pattern. -- Avoid mutating PCF context objects directly. Use object spread to override nested behavior safely. -- Preserve existing public API shape in interfaces unless explicitly changing API behavior. - -## Practical Pitfalls - -- If linked local builds show React hooks runtime errors, use the React linking guidance in [docs/developing.md](docs/developing.md). -- If build output changes unexpectedly, verify barrel exports and Rollup multi-entry discovery paths first. -- Do not commit local-consumer-specific config changes from linked Portal/PCF repos. - -## Change Validation Checklist - -- Run npm run build -- Confirm exports are reachable from [src/index.ts](src/index.ts) and relevant nested index.ts files -- Check affected controls for translation/style/interface consistency with neighboring controls