Generate the next wave of components, add component optimizations

.changeset/bright-otters-build.md

@@ -0,0 +1,5 @@
+---
+"@fluentui-react-native/components": minor
+---
+
+Export the generated agentic components and their composition helpers, and fix their build errors.

.changeset/clever-tools-share.md

@@ -0,0 +1,13 @@
+---
+"@fluentui-react-native/components": minor
+"@fluentui-react-native/design": minor
+"@fluentui-react-native/framework-base": minor
+"@fluentui-react-native/composition": patch
+"@fluentui-react-native/use-slots": patch
+"@fluentui-react-native/use-styling": patch
+"@fluentui-react-native/use-tokens": patch
+"@uifabricshared/foundation-settings": patch
+"@uifabricshared/themed-settings": patch
+---
+
+Add shared component primitives, styling utilities, state hooks, accessibility diagnostics, and owned native-root prop types.

.changeset/nice-parts-wink.md

@@ -0,0 +1,14 @@
+---
+"@uifabricshared/foundation-settings": patch
+"@uifabricshared/themed-settings": patch
+"@fluentui-react-native/composition": patch
+"@fluentui-react-native/use-styling": patch
+"@fluentui-react-native/use-tokens": patch
+"@fluentui-react-native/dependency-profiles": patch
+"@fluentui-react-native/use-slots": patch
+"@fluentui-react-native/components": patch
+"@fluentui-react-native/design": patch
+"@fluentui-react-native/framework-base": patch
+---
+
+Consolidation of shared utilities, dependency profile updates, and more generated components

.github/skills/agentic-component-authoring/SKILL.md

@@ -16,26 +16,32 @@ authoring rule in one always-loaded instruction file.
   [higher-order component instructions](../../../packages/agentic-components/src/components/AGENTS.md).
 - Primitive components live in `src/primitives`. Read the
   [primitive instructions](../../../packages/agentic-components/src/primitives/AGENTS.md).
+- If the change spans multiple components, repeated helpers, or shared dependency boundaries, read the
+  [package-wide optimization guidance](../agentic-component-optimization/SKILL.md) and
+  [`packages/agentic-components/src/AGENTS.md`](../../../packages/agentic-components/src/AGENTS.md). Do not run a
+  whole-package audit for a tiny single-component edit.
 - Work on the Storybook application, native projects, bundling, or CocoaPods belongs to the
   [agentic Storybook development skill](../agentic-storybook-development/SKILL.md), not this component workflow.
 
 ## Load focused references
 
-| Work                                                                                | Reference                                                        |
-| ----------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| Public props, slots, state types, native prop exposure, or exports                  | [Types and slots](references/types-and-slots.md)                 |
-| Defaults, derived state, interaction hooks, accessibility, or slot construction     | [State and accessibility](references/state-and-accessibility.md) |
-| Tokens, style factories, theme caching, state precedence, or slot style application | [Styles and tokens](references/styles-and-tokens.md)             |
-| Pure slot rendering, component assembly, or display names                           | [Rendering and assembly](references/rendering.md)                |
-| Runtime tests, type tests, snapshots, Storybook stories, or validation              | [Tests and stories](references/tests-and-stories.md)             |
+| Work                                                                                | Reference                                                          |
+| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| Public props, slots, state types, native prop exposure, or exports                  | [Types and slots](references/types-and-slots.md)                   |
+| Defaults, derived state, interaction hooks, accessibility, or slot construction     | [State and accessibility](references/state-and-accessibility.md)   |
+| Tokens, style factories, theme caching, state precedence, or slot style application | [Styles and tokens](references/styles-and-tokens.md)               |
+| Pure slot rendering, component assembly, or display names                           | [Rendering and assembly](references/rendering.md)                  |
+| Runtime tests, type tests, snapshots, Storybook stories, or validation              | [Tests and stories](references/tests-and-stories.md)               |
+| Cross-component duplication, shared helper extraction, or dependency hygiene        | [Package optimization](../agentic-component-optimization/SKILL.md) |
 
 A new higher-order component normally needs every reference. A focused fix should load only the affected reference and
 its immediate neighbors. Keep the component's colocated `SPEC.md` and companion files authoritative for its contract.
 
 ## Workflow
 
 1. Read the repository and package instructions, the component `SPEC.md`, and every companion file referenced by the
-   spec.
+   spec. Use the package-wide optimization guidance only when the change clearly involves repeated patterns or shared
+   dependency boundaries.
 2. Inspect the closest canonical implementation. Use
    [`components/button`](../../../packages/agentic-components/src/components/button) for a styled higher-order component
    and [`primitives/icon`](../../../packages/agentic-components/src/primitives/icon) for a direct primitive.

.github/skills/agentic-component-authoring/references/rendering.md

@@ -50,7 +50,7 @@ let consumers bypass slot order.
 ```ts
 export const Component = (props: ComponentProps) => {
   const state = useComponent_unstable(props);
-  useApplyStyles_unstable(state);
+  useComponentStyles_unstable(state);
   return renderComponent_unstable(state);
 };
 ```
@@ -59,8 +59,10 @@ Set `displayName` for diagnostics and Storybook metadata. Keep unstable stage fu
 future composition work can identify them. Do not wrap the component in memoization or another boundary without measured
 need and repository precedent.
 
-After assembly, update the package public surface according to the
-[types and slots export rules](types-and-slots.md#exports).
+After assembly, export `use<Component>_unstable`, `use<Component>Styles_unstable`, and
+`render<Component>_unstable` from the package root together with `<Component>State`, according to the
+[types and slots export rules](types-and-slots.md#exports). These stages are intentionally unstable but public so other
+components can reuse and extend the pipeline without importing internal paths.
 
 ## Review checklist
 
@@ -69,4 +71,4 @@ After assembly, update the package public surface according to the
 - Optional and replacement slots fall back intentionally.
 - State-only structure does not leak into public props.
 - The assembly file is a readable state -> styles -> render pipeline.
-- `displayName` is present and the public surface follows the types and slots export rules.
+- `displayName` is present and all three composition stages are exported under component-qualified unstable names.

.github/skills/agentic-component-authoring/references/state-and-accessibility.md

@@ -81,6 +81,9 @@ Return:
 Keep property ordering intentional so later spreads cannot silently replace component-owned values. If two state sources
 can share a key, assign the final owned value explicitly after spreading.
 
+Export the hook from the package root as `use<Component>_unstable`, together with its resolved `<Component>State` type,
+so another component can extend the state stage without importing package internals.
+
 ## Platform behavior
 
 Keep platform-specific native imports out of shared files when React Native forks expose incompatible types. Put fork

.github/skills/agentic-component-authoring/references/styles-and-tokens.md

@@ -1,9 +1,9 @@
 # Styles and tokens
 
-Use this reference for `<component>.styles.ts`, `useApplyStyles.ts`, token mapping, theme caching, state precedence, and
+Use this reference for `<component>.styles.ts`, `use<Component>Styles.ts`, token mapping, theme caching, state precedence, and
 slot prop application. The canonical examples are
 [`button.styles.ts`](../../../../packages/agentic-components/src/components/button/button.styles.ts) and
-[`useApplyStyles.ts`](../../../../packages/agentic-components/src/components/button/useApplyStyles.ts).
+[`useButtonStyles.ts`](../../../../packages/agentic-components/src/components/button/useButtonStyles.ts).
 
 ## Resolve values from the correct token source
 
@@ -97,7 +97,8 @@ token before assigning it to `ViewStyle['gap']`.
 
 ## Apply slot props in one stage
 
-`useApplyStyles.ts` should select styles and call `attachSlotProps`; it should not create factories.
+`use<Component>Styles.ts` should export `use<Component>Styles_unstable`, select styles, and call `attachSlotProps`; it
+should not create factories. Export that hook directly from the package root under the same name.
 
 Compose root styles in this order:
 

.github/skills/agentic-component-authoring/references/types-and-slots.md

@@ -70,9 +70,17 @@ sources. Verify the primitive remains assignable to `SlotProp<typeof Primitive>`
 
 ## Exports
 
-Export components and public types explicitly from
-[`src/index.ts`](../../../../packages/agentic-components/src/index.ts). Never use wildcard exports. Do not export private
-state-only slots, internal style definitions, or render helpers.
+Export each component and its composition pipeline explicitly from
+[`src/index.ts`](../../../../packages/agentic-components/src/index.ts):
+
+- the component and its public props, slots, variants, and resolved state type
+- the state hook as `use<Component>_unstable`
+- the style-application hook as `use<Component>Styles_unstable`
+- the render helper as `render<Component>_unstable`
+
+Name the source file `use<Component>Styles.ts` and the implementation `use<Component>Styles_unstable` so the local and
+public composition APIs match without aliases. Never use wildcard exports. Do not export private state-only slots or
+internal style definitions.
 
 ## Review checklist
 
@@ -82,4 +90,4 @@ state-only slots, internal style definitions, or render helpers.
 - Omitted and false values retain distinct semantics where required.
 - Root native props cannot bypass owned children or style ordering.
 - Resolved state contains every defaulted and derived value needed downstream.
-- Public exports are explicit and tree-shakeable.
+- Public component, state, style-application, render, and resolved-state exports are explicit and tree-shakeable.

.github/skills/agentic-component-optimization/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: agentic-component-optimization
+description: Analyze and optimize packages/agentic-components as a whole when repeated patterns, dependency direction, or extraction boundaries cross components.
+license: MIT
+---
+
+# Agentic component optimization
+
+Use this skill when a change is about the package as a system, not a single component fix. It helps decide whether repeated code
+belongs in `src/common`, `@fluentui-react-native/framework-base`, or `@fluentui-react-native/design/styling`, and whether a
+primitive or helper should exist at all.
+
+## Read first
+
+1. Read `packages/agentic-components/AGENTS.md` and `packages/agentic-components/src/AGENTS.md`.
+2. Read the relevant component or primitive `AGENTS.md` file and the colocated `SPEC.md` files for the affected area.
+3. Inspect the canonical implementations:
+   - `packages/agentic-components/src/components/button`
+   - `packages/agentic-components/src/primitives/icon`
+
+## Audit checklist
+
+### 1. Dependency direction
+
+- Production source may depend only on React / React Native native components, `@fluentui-react-native/design`, and
+  `@fluentui-react-native/framework-base`.
+- Generalizable non-styling hooks belong in `framework-base/src/hooks`.
+- Styling helpers belong in `agentic-design/src/styling`.
+- Component-library-specific non-public types, constants, and helpers belong in `packages/agentic-components/src/common`.
+
+### 2. Repetition and ownership
+
+Look for repeated:
+
+- types and discriminated unions
+- constants and default tables
+- state routines and prop normalization
+- slot wiring or subtree assembly
+- primitive behaviors or structural contracts
+
+Prefer extraction only when the repeated shape is stable and shared across multiple components.
+
+### 3. Validate extraction payoff
+
+Before extracting, confirm that the change:
+
+- reduces repeated logic without widening public APIs
+- preserves component-qualified exports and call sites
+- improves dependency direction instead of hiding it
+- keeps the resulting abstraction smaller than the duplication it replaces
+
+### 4. Do-not-extract criteria
+
+Do not extract when the code is:
+
+- one-off component behavior
+- a styling decision that belongs in the owning component
+- a public prop contract or display-specific variant
+- a thin wrapper around a single native element
+- easier to read in place than through another helper
+
+## Output
+
+Return a short recommendation with:
+
+- what to keep local
+- what to move to shared package/common code
+- whether the extraction is worth doing now
+- any public API or dependency risks
+
+If the work is just a tiny component edit, stop at the component instructions and do not run a whole-package audit.

packages/agentic-components/jest.config.cjs

@@ -1 +1,6 @@
-module.exports = require('@fluentui-react-native/scripts/jest-config');
+const config = require('@fluentui-react-native/scripts/jest-config');
+
+module.exports = {
+  ...config,
+  testTimeout: 10000,
+};

packages/agentic-components/package.json

@@ -46,13 +46,15 @@
     "react": "19.1.4",
     "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
+    "react-native-svg": "^15.12.1",
     "test-renderer": "catalog:0.81"
   },
   "peerDependencies": {
     "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
     "react": "18.2.0 || 19.0.0 || 19.1.4",
     "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6",
     "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-svg": ">=15.0.0 <15.13.0 || >=15.4.0 <15.13.0 || ^15.11.2 || ^15.12.1",
     "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
   },
   "peerDependenciesMeta": {
@@ -74,7 +76,8 @@
     "alignDeps": {
       "capabilities": [
         "core",
-        "core-macos"
+        "core-macos",
+        "svg"
       ]
     },
     "extends": "@fluentui-react-native/scripts/kit-config"

packages/agentic-components/specs/breadcrumb/blockers.md

@@ -0,0 +1,28 @@
+# Breadcrumb blockers
+
+## Classification
+
+- **Component shape:** higher-order / molecular
+- **Pure React Native feasibility:** partial
+
+## Analysis
+
+I reviewed:
+
+- `specs/breadcrumb/SPEC.md`
+- `specs/breadcrumb/usage.md`
+- `specs/breadcrumb/interaction.md`
+- `specs/breadcrumb/accessibility.md`
+- `specs/breadcrumb/tokens.yaml`
+- canonical `src/components/button/*`
+- canonical `src/primitives/icon/*`
+
+## Blockers
+
+1. The spec depends on `Popover`, `Menu`, and `Tooltip` behaviors/components.
+2. This package currently only contains `Button` and `Icon`; there is no breadcrumb source tree to extend, and no in-package implementation for the overflow/tooltip surfaces.
+3. The package manifest does not currently provide a dependency path to the experimental popover/tooltip packages, and this task scope forbids changing other components.
+
+## Result
+
+I could not fully implement Breadcrumb to the authored spec without out-of-scope dependency/package changes. Leaving the spec files unchanged as requested.

packages/agentic-components/specs/drawer/blockers.md

@@ -0,0 +1,29 @@
+# Drawer blockers
+
+## Classification
+
+- **Component kind:** HOC, not primitive.
+- **Pure React Native fit:** **does not fully satisfy the contract**.
+
+## Blocking issues
+
+1. **Focus trap over arbitrary drawer body content**
+   - The spec requires Modal/Alert drawers to trap focus, and the drawer body accepts arbitrary children.
+   - Pure RN does not provide a built-in focus-trap/FocusZone primitive that can enumerate and cycle through unknown descendants across Windows/macOS.
+   - Source: `specs/drawer/interaction.md`, `specs/drawer/accessibility.md`.
+
+2. **Return-focus-to-trigger is not self-contained**
+   - The contract requires focus to return to the element that opened the drawer.
+   - The drawer spec does not define a trigger ref / return-focus target prop, and the trigger lives outside the component boundary.
+   - Pure RN cannot reliably infer or restore focus to an arbitrary opener without additional platform or parent-owned focus plumbing.
+   - Source: `specs/drawer/interaction.md`, `specs/drawer/accessibility.md`.
+
+3. **Modal/Alert semantics depend on platform focus behavior**
+   - `aria-modal`, `dialog`, and `alertdialog` are available, but they do not by themselves enforce the modal keyboard contract.
+   - The spec also requires Escape handling, scrim dismissal rules, and seamless overlay/inline reflow while preserving focus state.
+   - That combination needs either native/platform focus management or an explicit higher-level focus controller contract.
+   - Source: `specs/drawer/interaction.md`, `specs/drawer/usage.md`, `specs/drawer/accessibility.md`.
+
+## Conclusion
+
+Drawer should remain specified here until the implementation contract adds a supported focus-management path or uses platform-native focus trapping. Moving it to `src/` would overstate what pure RN can guarantee today.