@hjmds/react 1.12.1 → 1.13.1

package/dist/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  designSystemEnvironmentDefaults,\n  isLargeTextScale,\n  resolveDensityDefault,\n  resolveDesignSystemProviderValue,\n  validateDesignSystemProviderValue,\n  type DesignSystemDensity,\n  type DesignSystemDirection,\n  type DesignSystemProviderValue,\n  type DesignSystemTextScale,\n  type ResolveDesignSystemEnvironmentOptions,\n} from \"@hjmds/design-contracts/components/design-system-provider\";\nimport type { ResolvedTheme, ThemePreference } from \"@hjmds/design-contracts/colors\";\nimport { tooltipBehaviorDefaults } from \"@hjmds/design-contracts/components/tooltip\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\nimport { createHjmThemeStyle } from \"./theme.js\";\n\nconst HjmThemeContext = createContext<DesignSystemProviderValue | null>(null);\n\n/** Per-theme partial palette merged over the HJM defaults; see docs/brand-boundary.md. */\nexport type HjmBrandPalette = NonNullable<ResolveDesignSystemEnvironmentOptions[\"brandPalette\"]>;\n\n/**\n * The nearest ancestor's brand palette. A nested provider (for example one that\n * only changes density) keeps the product brand instead of falling back to the\n * HJM defaults, because the resolved palette alone cannot be split back into\n * defaults and overrides.\n */\nconst HjmBrandPaletteContext = createContext<HjmBrandPalette | undefined>(undefined);\n\nexport type TooltipCoordinator = Readonly<{\n  activeId: string | null;\n  activate(id: string): void;\n  deactivate(id: string): void;\n  shouldSkipDelay(): boolean;\n}>;\n\nconst TooltipCoordinatorContext = createContext<TooltipCoordinator | null>(null);\n\nfunction subscribeMedia(query: string, callback: () => void): () => void {\n  const media = window.matchMedia(query);\n  media.addEventListener(\"change\", callback);\n  return () => media.removeEventListener(\"change\", callback);\n}\n\nfunction useMediaQuery(query: string, observe = true): boolean {\n  return useSyncExternalStore(\n    (callback) => observe ? subscribeMedia(query, callback) : () => undefined,\n    () => observe && window.matchMedia(query).matches,\n    () => false,\n  );\n}\n\ntype HjmProviderEnvironmentProps = Readonly<{\n  value?: never;\n  theme?: ThemePreference;\n  direction?: DesignSystemDirection;\n  textScale?: DesignSystemTextScale;\n  reducedMotion?: boolean;\n  minimumVisualTarget?: boolean;\n  /** Default row/menu/table density below this provider; each component's prop wins. */\n  density?: DesignSystemDensity;\n  /** Deterministic SSR/test override; otherwise prefers-color-scheme is observed. */\n  systemTheme?: ResolvedTheme;\n  /**\n   * The supported brand route (docs/brand-boundary.md). Before 1.5.0 the only way\n   * to brand was a hand-built `value`, which also stopped the provider from\n   * following the OS theme and reduced-motion settings.\n   */\n  brandPalette?: HjmBrandPalette;\n}>;\n\ntype HjmProviderValueProps = Readonly<{\n  /** Complete, validated environment and semantic product palette. */\n  value: DesignSystemProviderValue;\n  theme?: never;\n  direction?: never;\n  textScale?: never;\n  reducedMotion?: never;\n  minimumVisualTarget?: never;\n  density?: never;\n  systemTheme?: never;\n  brandPalette?: never;\n}>;\n\n/**\n * How the provider's own host element participates in layout and painting.\n *\n * `surface` (default) paints the HJM background, text color and UI typography,\n * which is what a page whose root *is* the provider needs. A product whose\n * document root already paints its surface previously had to neutralise the\n * host with an inline `display: contents` style, re-entering product code into\n * the renderer boundary; `contents` is that intent as a supported axis — the\n * element still carries the CSS variables, `dir` and data attributes.\n */\nexport type HjmProviderHost = \"surface\" | \"contents\";\n\nexport type HjmProviderProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"dir\"\n> &\n  Readonly<{\n    children: ReactNode;\n    host?: HjmProviderHost;\n  }> & (HjmProviderEnvironmentProps | HjmProviderValueProps);\n\nexport const HjmProvider = forwardRef<HTMLDivElement, HjmProviderProps>(\n  function HjmProvider(\n    {\n      children,\n      theme,\n      direction,\n      textScale,\n      reducedMotion,\n      minimumVisualTarget,\n      density,\n      systemTheme,\n      brandPalette: suppliedBrandPalette,\n      host = \"surface\",\n      value: suppliedValue,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useContext(HjmThemeContext);\n    const inheritedBrandPalette = useContext(HjmBrandPaletteContext);\n    const brandPalette = suppliedBrandPalette ?? inheritedBrandPalette;\n    const observesSystem = suppliedValue === undefined;\n    const prefersDark = useMediaQuery(\"(prefers-color-scheme: dark)\", observesSystem);\n    const prefersReducedMotion = useMediaQuery(\n      \"(prefers-reduced-motion: reduce)\",\n      observesSystem,\n    );\n    const resolvedSystemTheme = systemTheme ?? (prefersDark ? \"dark\" : \"light\");\n    const input = {\n      ...(theme === undefined ? {} : { theme }),\n      ...(direction === undefined ? {} : { direction }),\n      ...(textScale === undefined ? {} : { textScale }),\n      ...(reducedMotion === undefined ? {} : { reducedMotion }),\n      ...(minimumVisualTarget === undefined ? {} : { minimumVisualTarget }),\n      ...(density === undefined ? {} : { density }),\n    };\n    const value = suppliedValue ?? resolveDesignSystemProviderValue(input, {\n      systemTheme: resolvedSystemTheme,\n      ...(brandPalette === undefined ? {} : { brandPalette }),\n      ...(parent === null ? {} : { parent: parent.environment }),\n      ...(reducedMotion === undefined && parent === null\n        ? { systemReducedMotion: prefersReducedMotion }\n        : {}),\n    });\n    validateDesignSystemProviderValue(value);\n    const environment = value.environment;\n    const [activeTooltipId, setActiveTooltipId] = useState<string | null>(null);\n    const activeTooltipIdRef = useRef<string | null>(null);\n    const lastTooltipTransitionAtRef = useRef(Number.NEGATIVE_INFINITY);\n    activeTooltipIdRef.current = activeTooltipId;\n    const activateTooltip = useCallback((id: string) => {\n      setActiveTooltipId((current) => {\n        if (current === id) return current;\n        if (current !== null) lastTooltipTransitionAtRef.current = Date.now();\n        activeTooltipIdRef.current = id;\n        return id;\n      });\n    }, []);\n    const deactivateTooltip = useCallback((id: string) => {\n      setActiveTooltipId((current) => {\n        if (current !== id) return current;\n        lastTooltipTransitionAtRef.current = Date.now();\n        activeTooltipIdRef.current = null;\n        return null;\n      });\n    }, []);\n    const shouldSkipTooltipDelay = useCallback(\n      () =>\n        activeTooltipIdRef.current !== null ||\n        Date.now() - lastTooltipTransitionAtRef.current <\n          tooltipBehaviorDefaults.skipDelayMs,\n      [],\n    );\n    const tooltipCoordinator: TooltipCoordinator = {\n      activeId: activeTooltipId,\n      activate: activateTooltip,\n      deactivate: deactivateTooltip,\n      shouldSkipDelay: shouldSkipTooltipDelay,\n    };\n\n    // `data-text-scale` is a number, so a stylesheet cannot ask whether it crossed\n    // `largeTextThreshold`. The provider resolves that comparison once and publishes\n    // the answer; letting each renderer read the environment instead would pull this\n    // module into granular entries like ./selection and blow their gzip budgets.\n    // See issue #20.\n    const largeText = isLargeTextScale(environment.textScale) ? \"true\" : undefined;\n\n    return (\n      <HjmThemeContext.Provider value={value}>\n        <HjmBrandPaletteContext.Provider value={suppliedValue === undefined ? brandPalette : undefined}>\n          <TooltipCoordinatorContext.Provider value={tooltipCoordinator}>\n            <div\n              {...rest}\n              ref={ref}\n              className={classNames(\"hjm-root\", className)}\n              data-hjm-provider=\"\"\n              data-host={host}\n              data-motion={environment.reducedMotion ? \"reduced\" : \"full\"}\n              data-theme={environment.theme}\n              data-text-scale={environment.textScale}\n              data-large-text={largeText}\n              dir={environment.direction}\n              style={{ ...createHjmThemeStyle(value), ...style }}\n            >\n              {children}\n            </div>\n          </TooltipCoordinatorContext.Provider>\n        </HjmBrandPaletteContext.Provider>\n      </HjmThemeContext.Provider>\n    );\n  },\n);\n\nexport function useHjmTheme(): DesignSystemProviderValue {\n  const value = useContext(HjmThemeContext);\n  if (value === null) {\n    throw new Error(\"useHjmTheme must be used inside HjmProvider\");\n  }\n  return value;\n}\n\n/** Renderer components use the browser default direction when no provider is present. */\nexport function useOptionalHjmTheme(): DesignSystemProviderValue | null {\n  return useContext(HjmThemeContext);\n}\n\n/**\n * Resolves the provider's density onto one component's own density vocabulary.\n * Outside a provider the component's recipe default stands — a global axis must\n * not make an unwrapped renderer behave differently from a wrapped one at rest.\n */\nexport function useHjmDensityDefault<Comfortable extends string, Compact extends string>(\n  vocabulary: Readonly<{ comfortable: Comfortable; compact: Compact }>,\n): Comfortable | Compact {\n  const theme = useContext(HjmThemeContext);\n  return resolveDensityDefault(\n    theme?.environment.density ?? designSystemEnvironmentDefaults.density,\n    vocabulary,\n  );\n}\n\n/** Internal provider-scoped coordination used by Tooltip renderers. */\nexport function useTooltipCoordinator(): TooltipCoordinator | null {\n  return useContext(TooltipCoordinatorContext);\n}\n"]}
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,+BAA+B,EAC/B,gBAAgB,EAChB,qBAAqB,EACrB,gCAAgC,EAChC,iCAAiC,GAMlC,MAAM,2DAA2D,CAAC;AAEnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,4CAA4C,CAAC;AACrF,OAAO,EACL,aAAa,EACb,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,EACR,oBAAoB,GAGrB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,eAAe,GAAG,aAAa,CAAmC,IAAI,CAAC,CAAC;AAK9E;;;;;GAKG;AACH,MAAM,sBAAsB,GAAG,aAAa,CAA8B,SAAS,CAAC,CAAC;AASrF,MAAM,yBAAyB,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAEjF,SAAS,cAAc,CAAC,KAAa,EAAE,QAAoB;IACzD,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACvC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC7D,CAAC;AAED,SAAS,aAAa,CAAC,KAAa,EAAE,OAAO,GAAG,IAAI;IAClD,OAAO,oBAAoB,CACzB,CAAC,QAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,EACzE,GAAG,EAAE,CAAC,OAAO,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,EACjD,GAAG,EAAE,CAAC,KAAK,CACZ,CAAC;AACJ,CAAC;AAwDD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,EACb,mBAAmB,EACnB,OAAO,EACP,WAAW,EACX,YAAY,EAAE,oBAAoB,EAClC,IAAI,GAAG,SAAS,EAChB,KAAK,EAAE,aAAa,EACpB,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC3C,MAAM,qBAAqB,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,oBAAoB,IAAI,qBAAqB,CAAC;IACnE,MAAM,cAAc,GAAG,aAAa,KAAK,SAAS,CAAC;IACnD,MAAM,WAAW,GAAG,aAAa,CAAC,8BAA8B,EAAE,cAAc,CAAC,CAAC;IAClF,MAAM,oBAAoB,GAAG,aAAa,CACxC,kCAAkC,EAClC,cAAc,CACf,CAAC;IACF,MAAM,mBAAmB,GAAG,WAAW,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG;QACZ,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QACzC,GAAG,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;QACjD,GAAG,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;QACjD,GAAG,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC;QACzD,GAAG,CAAC,mBAAmB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,mBAAmB,EAAE,CAAC;QACrE,GAAG,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC;KAC9C,CAAC;IACF,MAAM,KAAK,GAAG,aAAa,IAAI,gCAAgC,CAAC,KAAK,EAAE;QACrE,WAAW,EAAE,mBAAmB;QAChC,GAAG,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC;QACvD,GAAG,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC;QAC1D,GAAG,CAAC,aAAa,KAAK,SAAS,IAAI,MAAM,KAAK,IAAI;YAChD,CAAC,CAAC,EAAE,mBAAmB,EAAE,oBAAoB,EAAE;YAC/C,CAAC,CAAC,EAAE,CAAC;KACR,CAAC,CAAC;IACH,iCAAiC,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;IACtC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC5E,MAAM,kBAAkB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IACvD,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACpE,kBAAkB,CAAC,OAAO,GAAG,eAAe,CAAC;IAC7C,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QACjD,kBAAkB,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,OAAO,KAAK,EAAE;gBAAE,OAAO,OAAO,CAAC;YACnC,IAAI,OAAO,KAAK,IAAI;gBAAE,0BAA0B,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACtE,kBAAkB,CAAC,OAAO,GAAG,EAAE,CAAC;YAChC,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QACnD,kBAAkB,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,OAAO,KAAK,EAAE;gBAAE,OAAO,OAAO,CAAC;YACnC,0BAA0B,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAChD,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;YAClC,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,sBAAsB,GAAG,WAAW,CACxC,GAAG,EAAE,CACH,kBAAkB,CAAC,OAAO,KAAK,IAAI;QACnC,IAAI,CAAC,GAAG,EAAE,GAAG,0BAA0B,CAAC,OAAO;YAC7C,uBAAuB,CAAC,WAAW,EACvC,EAAE,CACH,CAAC;IACF,MAAM,kBAAkB,GAAuB;QAC7C,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,UAAU,EAAE,iBAAiB;QAC7B,eAAe,EAAE,sBAAsB;KACxC,CAAC;IAEF,+EAA+E;IAC/E,iFAAiF;IACjF,iFAAiF;IACjF,6EAA6E;IAC7E,iBAAiB;IACjB,MAAM,SAAS,GAAG,gBAAgB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/E,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACpC,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,YAC5F,KAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,YAC3D,iBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,uBAC1B,EAAE,eACT,IAAI,iBACF,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,gBAC/C,WAAW,CAAC,KAAK,qBACZ,WAAW,CAAC,SAAS,qBACrB,SAAS,EAC1B,GAAG,EAAE,WAAW,CAAC,SAAS,EAC1B,KAAK,EAAE,EAAE,GAAG,mBAAmB,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,YAEjD,QAAQ,GACL,GAC6B,GACL,GACT,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,UAAU,WAAW;IACzB,MAAM,KAAK,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC1C,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IACjE,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,yFAAyF;AACzF,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,eAAe,CAAC,CAAC;AACrC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAClC,UAAoE;IAEpE,MAAM,KAAK,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC1C,OAAO,qBAAqB,CAC1B,KAAK,EAAE,WAAW,CAAC,OAAO,IAAI,+BAA+B,CAAC,OAAO,EACrE,UAAU,CACX,CAAC;AACJ,CAAC;AAED,uEAAuE;AACvE,MAAM,UAAU,qBAAqB;IACnC,OAAO,UAAU,CAAC,yBAAyB,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["import {\n  designSystemEnvironmentDefaults,\n  isLargeTextScale,\n  resolveDensityDefault,\n  resolveDesignSystemProviderValue,\n  validateDesignSystemProviderValue,\n  type DesignSystemDensity,\n  type DesignSystemDirection,\n  type DesignSystemProviderValue,\n  type DesignSystemTextScale,\n  type ResolveDesignSystemEnvironmentOptions,\n} from \"@hjmds/design-contracts/components/design-system-provider\";\nimport type { ResolvedTheme, ThemePreference } from \"@hjmds/design-contracts/colors\";\nimport { tooltipBehaviorDefaults } from \"@hjmds/design-contracts/components/tooltip\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\nimport { createHjmThemeStyle } from \"./theme.js\";\n\nconst HjmThemeContext = createContext<DesignSystemProviderValue | null>(null);\n\n/** Per-theme partial palette merged over the HJM defaults; see docs/brand-boundary.md. */\nexport type HjmBrandPalette = NonNullable<ResolveDesignSystemEnvironmentOptions[\"brandPalette\"]>;\n\n/**\n * The nearest ancestor's brand palette. A nested provider (for example one that\n * only changes density) keeps the product brand instead of falling back to the\n * HJM defaults, because the resolved palette alone cannot be split back into\n * defaults and overrides.\n */\nconst HjmBrandPaletteContext = createContext<HjmBrandPalette | undefined>(undefined);\n\nexport type TooltipCoordinator = Readonly<{\n  activeId: string | null;\n  activate(id: string): void;\n  deactivate(id: string): void;\n  shouldSkipDelay(): boolean;\n}>;\n\nconst TooltipCoordinatorContext = createContext<TooltipCoordinator | null>(null);\n\nfunction subscribeMedia(query: string, callback: () => void): () => void {\n  const media = window.matchMedia(query);\n  media.addEventListener(\"change\", callback);\n  return () => media.removeEventListener(\"change\", callback);\n}\n\nfunction useMediaQuery(query: string, observe = true): boolean {\n  return useSyncExternalStore(\n    (callback) => observe ? subscribeMedia(query, callback) : () => undefined,\n    () => observe && window.matchMedia(query).matches,\n    () => false,\n  );\n}\n\ntype HjmProviderEnvironmentProps = Readonly<{\n  value?: never;\n  theme?: ThemePreference;\n  direction?: DesignSystemDirection;\n  textScale?: DesignSystemTextScale;\n  reducedMotion?: boolean;\n  minimumVisualTarget?: boolean;\n  /** Default row/menu/table density below this provider; each component's prop wins. */\n  density?: DesignSystemDensity;\n  /** Deterministic SSR/test override; otherwise prefers-color-scheme is observed. */\n  systemTheme?: ResolvedTheme;\n  /**\n   * The supported brand route (docs/brand-boundary.md). Before 1.5.0 the only way\n   * to brand was a hand-built `value`, which also stopped the provider from\n   * following the OS theme and reduced-motion settings.\n   */\n  brandPalette?: HjmBrandPalette;\n}>;\n\ntype HjmProviderValueProps = Readonly<{\n  /** Complete, validated environment and semantic product palette. */\n  value: DesignSystemProviderValue;\n  theme?: never;\n  direction?: never;\n  textScale?: never;\n  reducedMotion?: never;\n  minimumVisualTarget?: never;\n  density?: never;\n  systemTheme?: never;\n  brandPalette?: never;\n}>;\n\n/**\n * How the provider's own host element participates in layout and painting.\n *\n * `surface` (default) paints the HJM background, text color and UI typography,\n * which is what a page whose root *is* the provider needs. A product whose\n * document root already paints its surface previously had to neutralise the\n * host with an inline `display: contents` style, re-entering product code into\n * the renderer boundary; `contents` is that intent as a supported axis — the\n * element still carries the CSS variables, `dir` and data attributes.\n */\nexport type HjmProviderHost = \"surface\" | \"contents\";\n\n// No `layoutStyle`: a theme/context provider, not a placed component; place its children.\nexport type HjmProviderProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"dir\"\n> &\n  Readonly<{\n    children: ReactNode;\n    host?: HjmProviderHost;\n  }> & (HjmProviderEnvironmentProps | HjmProviderValueProps);\n\nexport const HjmProvider = forwardRef<HTMLDivElement, HjmProviderProps>(\n  function HjmProvider(\n    {\n      children,\n      theme,\n      direction,\n      textScale,\n      reducedMotion,\n      minimumVisualTarget,\n      density,\n      systemTheme,\n      brandPalette: suppliedBrandPalette,\n      host = \"surface\",\n      value: suppliedValue,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useContext(HjmThemeContext);\n    const inheritedBrandPalette = useContext(HjmBrandPaletteContext);\n    const brandPalette = suppliedBrandPalette ?? inheritedBrandPalette;\n    const observesSystem = suppliedValue === undefined;\n    const prefersDark = useMediaQuery(\"(prefers-color-scheme: dark)\", observesSystem);\n    const prefersReducedMotion = useMediaQuery(\n      \"(prefers-reduced-motion: reduce)\",\n      observesSystem,\n    );\n    const resolvedSystemTheme = systemTheme ?? (prefersDark ? \"dark\" : \"light\");\n    const input = {\n      ...(theme === undefined ? {} : { theme }),\n      ...(direction === undefined ? {} : { direction }),\n      ...(textScale === undefined ? {} : { textScale }),\n      ...(reducedMotion === undefined ? {} : { reducedMotion }),\n      ...(minimumVisualTarget === undefined ? {} : { minimumVisualTarget }),\n      ...(density === undefined ? {} : { density }),\n    };\n    const value = suppliedValue ?? resolveDesignSystemProviderValue(input, {\n      systemTheme: resolvedSystemTheme,\n      ...(brandPalette === undefined ? {} : { brandPalette }),\n      ...(parent === null ? {} : { parent: parent.environment }),\n      ...(reducedMotion === undefined && parent === null\n        ? { systemReducedMotion: prefersReducedMotion }\n        : {}),\n    });\n    validateDesignSystemProviderValue(value);\n    const environment = value.environment;\n    const [activeTooltipId, setActiveTooltipId] = useState<string | null>(null);\n    const activeTooltipIdRef = useRef<string | null>(null);\n    const lastTooltipTransitionAtRef = useRef(Number.NEGATIVE_INFINITY);\n    activeTooltipIdRef.current = activeTooltipId;\n    const activateTooltip = useCallback((id: string) => {\n      setActiveTooltipId((current) => {\n        if (current === id) return current;\n        if (current !== null) lastTooltipTransitionAtRef.current = Date.now();\n        activeTooltipIdRef.current = id;\n        return id;\n      });\n    }, []);\n    const deactivateTooltip = useCallback((id: string) => {\n      setActiveTooltipId((current) => {\n        if (current !== id) return current;\n        lastTooltipTransitionAtRef.current = Date.now();\n        activeTooltipIdRef.current = null;\n        return null;\n      });\n    }, []);\n    const shouldSkipTooltipDelay = useCallback(\n      () =>\n        activeTooltipIdRef.current !== null ||\n        Date.now() - lastTooltipTransitionAtRef.current <\n          tooltipBehaviorDefaults.skipDelayMs,\n      [],\n    );\n    const tooltipCoordinator: TooltipCoordinator = {\n      activeId: activeTooltipId,\n      activate: activateTooltip,\n      deactivate: deactivateTooltip,\n      shouldSkipDelay: shouldSkipTooltipDelay,\n    };\n\n    // `data-text-scale` is a number, so a stylesheet cannot ask whether it crossed\n    // `largeTextThreshold`. The provider resolves that comparison once and publishes\n    // the answer; letting each renderer read the environment instead would pull this\n    // module into granular entries like ./selection and blow their gzip budgets.\n    // See issue #20.\n    const largeText = isLargeTextScale(environment.textScale) ? \"true\" : undefined;\n\n    return (\n      <HjmThemeContext.Provider value={value}>\n        <HjmBrandPaletteContext.Provider value={suppliedValue === undefined ? brandPalette : undefined}>\n          <TooltipCoordinatorContext.Provider value={tooltipCoordinator}>\n            <div\n              {...rest}\n              ref={ref}\n              className={classNames(\"hjm-root\", className)}\n              data-hjm-provider=\"\"\n              data-host={host}\n              data-motion={environment.reducedMotion ? \"reduced\" : \"full\"}\n              data-theme={environment.theme}\n              data-text-scale={environment.textScale}\n              data-large-text={largeText}\n              dir={environment.direction}\n              style={{ ...createHjmThemeStyle(value), ...style }}\n            >\n              {children}\n            </div>\n          </TooltipCoordinatorContext.Provider>\n        </HjmBrandPaletteContext.Provider>\n      </HjmThemeContext.Provider>\n    );\n  },\n);\n\nexport function useHjmTheme(): DesignSystemProviderValue {\n  const value = useContext(HjmThemeContext);\n  if (value === null) {\n    throw new Error(\"useHjmTheme must be used inside HjmProvider\");\n  }\n  return value;\n}\n\n/** Renderer components use the browser default direction when no provider is present. */\nexport function useOptionalHjmTheme(): DesignSystemProviderValue | null {\n  return useContext(HjmThemeContext);\n}\n\n/**\n * Resolves the provider's density onto one component's own density vocabulary.\n * Outside a provider the component's recipe default stands — a global axis must\n * not make an unwrapped renderer behave differently from a wrapped one at rest.\n */\nexport function useHjmDensityDefault<Comfortable extends string, Compact extends string>(\n  vocabulary: Readonly<{ comfortable: Comfortable; compact: Compact }>,\n): Comfortable | Compact {\n  const theme = useContext(HjmThemeContext);\n  return resolveDensityDefault(\n    theme?.environment.density ?? designSystemEnvironmentDefaults.density,\n    vocabulary,\n  );\n}\n\n/** Internal provider-scoped coordination used by Tooltip renderers. */\nexport function useTooltipCoordinator(): TooltipCoordinator | null {\n  return useContext(TooltipCoordinatorContext);\n}\n"]}

package/dist/qr-code.d.ts

@@ -1,11 +1,14 @@
 import { type ReactNode } from "react";
 import { type QRErrorCorrection } from "@hjmds/design-contracts/components/qr-code";
+import type { HjmCompositionStyleProp } from "./composition-style.js";
 export type QRCodeProps = {
     value: string;
     label: string;
     size?: number;
     level?: QRErrorCorrection;
     fallback: ReactNode;
+    /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */
+    layoutStyle?: HjmCompositionStyleProp;
 };
-export declare function QRCode({ value, label, size, level, fallback }: QRCodeProps): import("react").JSX.Element;
+export declare function QRCode({ value, label, size, level, fallback, layoutStyle }: QRCodeProps): import("react").JSX.Element;
 //# sourceMappingURL=qr-code.d.ts.map

package/dist/qr-code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"qr-code.d.ts","sourceRoot":"","sources":["../src/qr-code.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAwC,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC1H,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC;AAC1H,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAU,EAAE,KAAW,EAAE,QAAQ,EAAE,EAAE,WAAW,+BAStF"}
+{"version":3,"file":"qr-code.d.ts","sourceRoot":"","sources":["../src/qr-code.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAwC,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC1H,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IACtH,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAA;CAAE,CAAC;AAC1C,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAU,EAAE,KAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,WAAW,+BASnG"}

package/dist/qr-code.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import qrcode from "qrcode-generator";
 import { useMemo } from "react";
 import { createQRMatrix, qrPath, qrCodeRecipe } from "@hjmds/design-contracts/components/qr-code";
-export function QRCode({ value, label, size = 192, level = "M", fallback }) {
+export function QRCode({ value, label, size = 192, level = "M", fallback, layoutStyle }) {
     const matrix = useMemo(() => createQRMatrix(value, qrcode, level), [value, level]);
     const modules = matrix.count + matrix.quietZone * 2;
     if (!label.trim() || fallback == null || fallback === false || !Number.isFinite(size) || size < modules * qrCodeRecipe.minModuleSize)
         throw new TypeError("QRCode needs an accessible label, alternative action and at least two pixels per module");
     // Integer-sized modules plus a four-module white quiet zone preserve scan geometry in both themes.
     const actualSize = Math.floor(size / modules) * modules;
-    return _jsxs("div", { "data-hjm-qr-code": true, children: [_jsxs("svg", { role: "img", "aria-label": label, width: actualSize, height: actualSize, viewBox: `0 0 ${modules} ${modules}`, shapeRendering: "crispEdges", children: [_jsx("rect", { width: modules, height: modules, fill: qrCodeRecipe.background }), _jsx("path", { d: qrPath(matrix), fill: qrCodeRecipe.foreground })] }), fallback] });
+    return _jsxs("div", { "data-hjm-qr-code": true, style: layoutStyle, children: [_jsxs("svg", { role: "img", "aria-label": label, width: actualSize, height: actualSize, viewBox: `0 0 ${modules} ${modules}`, shapeRendering: "crispEdges", children: [_jsx("rect", { width: modules, height: modules, fill: qrCodeRecipe.background }), _jsx("path", { d: qrPath(matrix), fill: qrCodeRecipe.foreground })] }), fallback] });
 }
 //# sourceMappingURL=qr-code.js.map

package/dist/qr-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"qr-code.js","sourceRoot":"","sources":["../src/qr-code.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAA0B,MAAM,4CAA4C,CAAC;AAE1H,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,GAAG,GAAG,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAe;IACrF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACnF,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;IACpD,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,GAAG,OAAO,GAAG,YAAY,CAAC,aAAa;QAAE,MAAM,IAAI,SAAS,CAAC,yFAAyF,CAAC,CAAC;IACrP,mGAAmG;IACnG,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,OAAO,CAAC;IACxD,OAAO,oDAAsB,eAAK,IAAI,EAAC,KAAK,gBAAa,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,OAAO,IAAI,OAAO,EAAE,EAAE,cAAc,EAAC,YAAY,aACtK,eAAM,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,CAAC,UAAU,GAAI,EAAA,eAAM,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,UAAU,GAAI,IAC9H,EAAC,QAAQ,IAAO,CAAC;AACzB,CAAC","sourcesContent":["import qrcode from \"qrcode-generator\";\nimport { useMemo, type ReactNode } from \"react\";\nimport { createQRMatrix, qrPath, qrCodeRecipe, type QRErrorCorrection } from \"@hjmds/design-contracts/components/qr-code\";\nexport type QRCodeProps = { value: string; label: string; size?: number; level?: QRErrorCorrection; fallback: ReactNode };\nexport function QRCode({ value, label, size = 192, level = \"M\", fallback }: QRCodeProps) {\n  const matrix = useMemo(() => createQRMatrix(value, qrcode, level), [value, level]);\n  const modules = matrix.count + matrix.quietZone * 2;\n  if (!label.trim() || fallback == null || fallback === false || !Number.isFinite(size) || size < modules * qrCodeRecipe.minModuleSize) throw new TypeError(\"QRCode needs an accessible label, alternative action and at least two pixels per module\");\n  // Integer-sized modules plus a four-module white quiet zone preserve scan geometry in both themes.\n  const actualSize = Math.floor(size / modules) * modules;\n  return <div data-hjm-qr-code><svg role=\"img\" aria-label={label} width={actualSize} height={actualSize} viewBox={`0 0 ${modules} ${modules}`} shapeRendering=\"crispEdges\">\n    <rect width={modules} height={modules} fill={qrCodeRecipe.background} /><path d={qrPath(matrix)} fill={qrCodeRecipe.foreground} />\n  </svg>{fallback}</div>;\n}\n"]}
+{"version":3,"file":"qr-code.js","sourceRoot":"","sources":["../src/qr-code.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAA0B,MAAM,4CAA4C,CAAC;AAK1H,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,GAAG,GAAG,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAE,WAAW,EAAe;IAClG,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACnF,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;IACpD,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,GAAG,OAAO,GAAG,YAAY,CAAC,aAAa;QAAE,MAAM,IAAI,SAAS,CAAC,yFAAyF,CAAC,CAAC;IACrP,mGAAmG;IACnG,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,OAAO,CAAC;IACxD,OAAO,yCAAsB,KAAK,EAAE,WAAW,aAAE,eAAK,IAAI,EAAC,KAAK,gBAAa,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,OAAO,IAAI,OAAO,EAAE,EAAE,cAAc,EAAC,YAAY,aAC1L,eAAM,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,CAAC,UAAU,GAAI,EAAA,eAAM,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,UAAU,GAAI,IAC9H,EAAC,QAAQ,IAAO,CAAC;AACzB,CAAC","sourcesContent":["import qrcode from \"qrcode-generator\";\nimport { useMemo, type ReactNode } from \"react\";\nimport { createQRMatrix, qrPath, qrCodeRecipe, type QRErrorCorrection } from \"@hjmds/design-contracts/components/qr-code\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nexport type QRCodeProps = { value: string; label: string; size?: number; level?: QRErrorCorrection; fallback: ReactNode;\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n  layoutStyle?: HjmCompositionStyleProp };\nexport function QRCode({ value, label, size = 192, level = \"M\", fallback, layoutStyle }: QRCodeProps) {\n  const matrix = useMemo(() => createQRMatrix(value, qrcode, level), [value, level]);\n  const modules = matrix.count + matrix.quietZone * 2;\n  if (!label.trim() || fallback == null || fallback === false || !Number.isFinite(size) || size < modules * qrCodeRecipe.minModuleSize) throw new TypeError(\"QRCode needs an accessible label, alternative action and at least two pixels per module\");\n  // Integer-sized modules plus a four-module white quiet zone preserve scan geometry in both themes.\n  const actualSize = Math.floor(size / modules) * modules;\n  return <div data-hjm-qr-code style={layoutStyle}><svg role=\"img\" aria-label={label} width={actualSize} height={actualSize} viewBox={`0 0 ${modules} ${modules}`} shapeRendering=\"crispEdges\">\n    <rect width={modules} height={modules} fill={qrCodeRecipe.background} /><path d={qrPath(matrix)} fill={qrCodeRecipe.foreground} />\n  </svg>{fallback}</div>;\n}\n"]}

package/dist/reaction-picker.d.ts

@@ -1,11 +1,15 @@
-import { type ReactionOption } from "@hjmds/design-contracts/reactions";
+import { type ReactionMoreOptions, type ReactionOption } from "@hjmds/design-contracts/reactions";
+import type { HjmCompositionStyleProp } from "./composition-style.js";
 export type ReactionPickerProps = Readonly<{
     label: string;
     options: readonly ReactionOption[];
     value: string | null;
     onValueChange: (value: string | null) => void;
     disabled?: boolean;
+    layout?: "wrap" | "strip";
+    layoutStyle?: HjmCompositionStyleProp;
+    more?: ReactionMoreOptions;
 }>;
 /** Controlled single reaction; counts and persistence belong to the product. */
-export declare function ReactionPicker({ label, options, value, onValueChange, disabled }: ReactionPickerProps): import("react").JSX.Element;
+export declare function ReactionPicker({ label, options, value, onValueChange, disabled, layout, more, layoutStyle }: ReactionPickerProps): import("react").JSX.Element;
 //# sourceMappingURL=reaction-picker.d.ts.map

package/dist/reaction-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reaction-picker.d.ts","sourceRoot":"","sources":["../src/reaction-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEzG,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAC3L,gFAAgF;AAChF,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAgB,EAAE,EAAE,mBAAmB,+BAG7G"}
+{"version":3,"file":"reaction-picker.d.ts","sourceRoot":"","sources":["../src/reaction-picker.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2D,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAE3J,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAAC,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAAE,CAAC,CAAC;AACzR,gFAAgF;AAChF,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAgB,EAAE,MAAe,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,mBAAmB,+BAkBjJ"}

package/dist/reaction-picker.js

@@ -1,9 +1,25 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { nextReaction, validateReactions } from "@hjmds/design-contracts/reactions";
+import { useLayoutEffect, useRef, useState } from "react";
+import { nextReaction, validateReactions, resolveReactionOptions } from "@hjmds/design-contracts/reactions";
 import { Button } from "./actions.js";
 /** Controlled single reaction; counts and persistence belong to the product. */
-export function ReactionPicker({ label, options, value, onValueChange, disabled = false }) {
-    validateReactions(options, value);
-    return _jsx("div", { role: "group", "aria-label": label, style: { display: "flex", flexWrap: "wrap", gap: "var(--hjm-space-xs)" }, children: options.map(option => _jsx(Button, { tone: "ghost", shape: "pill", selected: value === option.id, disabled: disabled || option.disabled, "aria-label": option.label, onClick: () => onValueChange(nextReaction(options, value, option.id)), children: _jsxs("span", { "aria-hidden": "true", children: [option.emoji, option.count === undefined ? null : ` ${option.count}`] }) }, option.id)) });
+export function ReactionPicker({ label, options, value, onValueChange, disabled = false, layout = "wrap", more, layoutStyle }) {
+    const [expanded, setExpanded] = useState(false);
+    const root = useRef(null);
+    const toggle = useRef(null);
+    const refocus = useRef(false);
+    const all = resolveReactionOptions(options, more);
+    validateReactions(all, value);
+    const showingAll = expanded && !!more;
+    const visible = showingAll ? all : options;
+    const choose = (id) => { if (!disabled) {
+        refocus.current = !!root.current?.contains(document.activeElement);
+        onValueChange(nextReaction(all, value, id));
+        setExpanded(false);
+    } };
+    // A catalog-only button unmounts on collapse: refocus the toggle, not <body>. Inert hosts restore their own trigger.
+    useLayoutEffect(() => { const node = root.current; if (refocus.current && !showingAll && node && !node.closest("[inert]") && !node.contains(document.activeElement))
+        toggle.current?.focus(); refocus.current = false; });
+    return _jsxs("div", { ref: root, role: "group", "aria-label": label, className: "hjm-reaction-picker", "data-layout": layout, "data-expanded": showingAll || undefined, style: layoutStyle, children: [_jsx("div", { className: "hjm-reaction-picker__options", children: visible.map(option => _jsx(Button, { tone: "ghost", shape: "pill", selected: value === option.id, disabled: disabled || option.disabled, "aria-label": option.label, onClick: () => choose(option.id), children: _jsxs("span", { "aria-hidden": "true", className: "hjm-reaction-picker__glyph", children: [option.emoji, option.count === undefined ? null : ` ${option.count}`] }) }, option.id)) }), _jsx("div", { children: more ? _jsx(Button, { ref: toggle, tone: "ghost", shape: "pill", "aria-label": more.label, "aria-expanded": showingAll, disabled: disabled, onClick: () => setExpanded(current => !current), children: _jsx("span", { "aria-hidden": "true", className: "hjm-reaction-picker__glyph", children: showingAll ? "−" : "+" }) }) : null })] });
 }
 //# sourceMappingURL=reaction-picker.js.map

package/dist/reaction-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"reaction-picker.js","sourceRoot":"","sources":["../src/reaction-picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAuB,MAAM,mCAAmC,CAAC;AACzG,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,gFAAgF;AAChF,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,GAAG,KAAK,EAAuB;IAC5G,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAClC,OAAO,cAAK,IAAI,EAAC,OAAO,gBAAa,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,qBAAqB,EAAE,YAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,KAAC,MAAM,IAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,KAAK,KAAK,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,gBAAc,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,YAAE,+BAAkB,MAAM,aAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,KAAK,EAAE,IAAQ,IAAlT,MAAM,CAAC,EAAE,CAAkT,CAAC,GAAO,CAAC;AAChe,CAAC","sourcesContent":["import { nextReaction, validateReactions, type ReactionOption } from \"@hjmds/design-contracts/reactions\";\nimport { Button } from \"./actions.js\";\nexport type ReactionPickerProps = Readonly<{ label: string; options: readonly ReactionOption[]; value: string | null; onValueChange: (value: string | null) => void; disabled?: boolean }>;\n/** Controlled single reaction; counts and persistence belong to the product. */\nexport function ReactionPicker({ label, options, value, onValueChange, disabled = false }: ReactionPickerProps) {\n  validateReactions(options, value);\n  return <div role=\"group\" aria-label={label} style={{ display: \"flex\", flexWrap: \"wrap\", gap: \"var(--hjm-space-xs)\" }}>{options.map(option => <Button key={option.id} tone=\"ghost\" shape=\"pill\" selected={value === option.id} disabled={disabled || option.disabled} aria-label={option.label} onClick={() => onValueChange(nextReaction(options, value, option.id))}><span aria-hidden=\"true\">{option.emoji}{option.count === undefined ? null : ` ${option.count}`}</span></Button>)}</div>;\n}\n"]}
+{"version":3,"file":"reaction-picker.js","sourceRoot":"","sources":["../src/reaction-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport { nextReaction, validateReactions, resolveReactionOptions, type ReactionMoreOptions, type ReactionOption } from \"@hjmds/design-contracts/reactions\";\nimport { Button } from \"./actions.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nexport type ReactionPickerProps = Readonly<{ label: string; options: readonly ReactionOption[]; value: string | null; onValueChange: (value: string | null) => void; disabled?: boolean; layout?: \"wrap\" | \"strip\"; layoutStyle?: HjmCompositionStyleProp; more?: ReactionMoreOptions }>;\n/** Controlled single reaction; counts and persistence belong to the product. */\nexport function ReactionPicker({ label, options, value, onValueChange, disabled = false, layout = \"wrap\", more, layoutStyle }: ReactionPickerProps) {\n  const [expanded, setExpanded] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const toggle = useRef<HTMLButtonElement>(null);\n  const refocus = useRef(false);\n  const all = resolveReactionOptions(options, more);\n  validateReactions(all, value);\n  const showingAll = expanded && !!more;\n  const visible = showingAll ? all : options;\n  const choose = (id: string) => { if (!disabled) { refocus.current = !!root.current?.contains(document.activeElement); onValueChange(nextReaction(all, value, id)); setExpanded(false); } };\n  // A catalog-only button unmounts on collapse: refocus the toggle, not <body>. Inert hosts restore their own trigger.\n  useLayoutEffect(() => { const node = root.current; if (refocus.current && !showingAll && node && !node.closest(\"[inert]\") && !node.contains(document.activeElement)) toggle.current?.focus(); refocus.current = false; });\n  return <div ref={root} role=\"group\" aria-label={label} className=\"hjm-reaction-picker\" data-layout={layout} data-expanded={showingAll || undefined} style={layoutStyle}>\n    <div className=\"hjm-reaction-picker__options\">\n      {visible.map(option => <Button key={option.id} tone=\"ghost\" shape=\"pill\" selected={value === option.id} disabled={disabled || option.disabled} aria-label={option.label} onClick={() => choose(option.id)}><span aria-hidden=\"true\" className=\"hjm-reaction-picker__glyph\">{option.emoji}{option.count === undefined ? null : ` ${option.count}`}</span></Button>)}\n    </div>\n    <div>{more ? <Button ref={toggle} tone=\"ghost\" shape=\"pill\" aria-label={more.label} aria-expanded={showingAll} disabled={disabled} onClick={() => setExpanded(current => !current)}><span aria-hidden=\"true\" className=\"hjm-reaction-picker__glyph\">{showingAll ? \"−\" : \"+\"}</span></Button> : null}</div>\n  </div>;\n}\n"]}

package/dist/saved-items.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { type ListDetailScreenProps } from "./screen-flows.js";
+import { type SavedItem, type SavedCollection, type SavedItemsLabels } from "@hjmds/design-contracts/screen-patterns";
+export type { SavedItem, SavedCollection, SavedItemsLabels } from "@hjmds/design-contracts/screen-patterns";
+export type SavedItemsScreenProps<T extends SavedItem> = Omit<ListDetailScreenProps, "list" | "detail" | "back" | "refresh" | "loadMore"> & {
+    items: readonly T[];
+    collections: readonly SavedCollection[];
+    /** Omitted shows collections; null selects all saved items. */
+    collectionId?: string | null;
+    selectedItemId?: string | null;
+    labels: SavedItemsLabels;
+    onOpenCollection(id: string | null): void;
+    onOpenItem(id: string): void;
+    /**
+     * One level up, from either the item detail or a collection grid. The shell does not know the
+     * host's history, so the host pops a single level: clear `selectedItemId` when an item is open,
+     * otherwise clear `collectionId` (back to the collection home).
+     */
+    onBack(): void;
+    onCreateCollection(): void;
+    renderThumbnail(item: T): ReactNode;
+    renderDetail(item: T): ReactNode;
+};
+/**
+ * Collection membership and persistence belong to the app; the shell preserves the grid on detail visits.
+ *
+ * Header slots per level: on the collection home the shell owns `actions` (the create-collection
+ * button) and the product's `leading`; inside a collection it owns `leading` (back) and keeps the
+ * product's `actions`. A product `actions` passed for the home is therefore not rendered there —
+ * Native ships the same rule, so changing it is a cross-platform API decision, not a Web fix.
+ */
+export declare function SavedItemsScreen<T extends SavedItem>({ items, collections, collectionId, selectedItemId, labels, onOpenCollection, onOpenItem, onBack, onCreateCollection, renderThumbnail, renderDetail, ...screen }: SavedItemsScreenProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=saved-items.d.ts.map

package/dist/saved-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"saved-items.d.ts","sourceRoot":"","sources":["../src/saved-items.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAIjF,OAAO,EAAqB,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AACzI,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC5G,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IAC1I,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,WAAW,EAAE,SAAS,eAAe,EAAE,CAAC;IACxC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;;OAIG;IACH,MAAM,IAAI,IAAI,CAAC;IACf,kBAAkB,IAAI,IAAI,CAAC;IAC3B,eAAe,CAAC,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC;IACpC,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,SAAS,EAAE,EAAC,KAAK,EAAC,WAAW,EAAC,YAAY,EAAC,cAAc,EAAC,MAAM,EAAC,gBAAgB,EAAC,UAAU,EAAC,MAAM,EAAC,kBAAkB,EAAC,eAAe,EAAC,YAAY,EAAC,GAAG,MAAM,EAAC,EAAC,qBAAqB,CAAC,CAAC,CAAC,+BAgBjO"}

package/dist/saved-items.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ListDetailScreen } from "./screen-flows.js";
+import { Stack, Text, Grid } from "./layout.js";
+import { Button } from "./actions.js";
+import { resolveSavedItems } from "@hjmds/design-contracts/screen-patterns";
+/**
+ * Collection membership and persistence belong to the app; the shell preserves the grid on detail visits.
+ *
+ * Header slots per level: on the collection home the shell owns `actions` (the create-collection
+ * button) and the product's `leading`; inside a collection it owns `leading` (back) and keeps the
+ * product's `actions`. A product `actions` passed for the home is therefore not rendered there —
+ * Native ships the same rule, so changing it is a cross-platform API decision, not a Web fix.
+ */
+export function SavedItemsScreen({ items, collections, collectionId, selectedItemId, labels, onOpenCollection, onOpenItem, onBack, onCreateCollection, renderThumbnail, renderDetail, ...screen }) {
+    const { home, collection, visible, selected } = resolveSavedItems(items, collections, collectionId, selectedItemId);
+    const groups = [{ id: null, title: labels.allItems, itemIds: items.map(item => item.id) }, ...collections];
+    return _jsx(ListDetailScreen, { ...screen, title: home ? screen.title : collection?.title ?? labels.allItems, leading: home ? screen.leading : _jsx(Button, { tone: "ghost", onClick: onBack, children: labels.back }), actions: home ? _jsx(Button, { tone: "ghost", onClick: onCreateCollection, children: labels.createCollection }) : screen.actions, back: { label: labels.back, onAction: onBack }, ...(selected ? { detail: { title: selected.title, content: renderDetail(selected) } } : {}), list: _jsx(Stack, { gap: "md", children: home ? _jsxs(_Fragment, { children: [_jsx(Text, { variant: "caption", tone: "muted", children: labels.privateNotice }), _jsx(Grid, { columns: { compact: 2 }, gap: { compact: "md" }, minColumnWidth: { compact: 80 }, children: groups.map(group => _jsxs("button", { type: "button", className: "hjm-saved-collection", onClick: () => onOpenCollection(group.id), "aria-label": group.title, children: [_jsx("span", { className: "hjm-saved-collection__cover", "aria-hidden": "true", children: Array.from({ length: 4 }, (_, index) => { const item = items.filter(item => group.itemIds.includes(item.id))[index]; return _jsx("span", { children: item ? renderThumbnail(item) : null }, index); }) }), _jsx(Text, { emphasis: "strong", children: group.title })] }, group.id === null ? "all" : `collection:${group.id}`)) })] }) : visible.length ? _jsx(Grid, { columns: { compact: 3 }, gap: { compact: "xxs" }, minColumnWidth: { compact: 44 }, children: visible.map(item => _jsx("button", { type: "button", className: "hjm-saved-post", "aria-label": item.title, onClick: () => onOpenItem(item.id), children: renderThumbnail(item) }, item.id)) }) : _jsx(Text, { role: "status", children: labels.empty }) }) });
+}
+//# sourceMappingURL=saved-items.js.map

package/dist/saved-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saved-items.js","sourceRoot":"","sources":["../src/saved-items.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from \"react\";\nimport { ListDetailScreen, type ListDetailScreenProps } from \"./screen-flows.js\";\nimport { Stack, Text, Grid } from \"./layout.js\";\nimport { Button } from \"./actions.js\";\n\nimport { resolveSavedItems, type SavedItem, type SavedCollection, type SavedItemsLabels } from \"@hjmds/design-contracts/screen-patterns\";\nexport type { SavedItem, SavedCollection, SavedItemsLabels } from \"@hjmds/design-contracts/screen-patterns\";\nexport type SavedItemsScreenProps<T extends SavedItem> = Omit<ListDetailScreenProps, \"list\" | \"detail\" | \"back\" | \"refresh\" | \"loadMore\"> & {\n  items: readonly T[];\n  collections: readonly SavedCollection[];\n  /** Omitted shows collections; null selects all saved items. */\n  collectionId?: string | null;\n  selectedItemId?: string | null;\n  labels: SavedItemsLabels;\n  onOpenCollection(id: string | null): void;\n  onOpenItem(id: string): void;\n  /**\n   * One level up, from either the item detail or a collection grid. The shell does not know the\n   * host's history, so the host pops a single level: clear `selectedItemId` when an item is open,\n   * otherwise clear `collectionId` (back to the collection home).\n   */\n  onBack(): void;\n  onCreateCollection(): void;\n  renderThumbnail(item: T): ReactNode;\n  renderDetail(item: T): ReactNode;\n};\n\n/**\n * Collection membership and persistence belong to the app; the shell preserves the grid on detail visits.\n *\n * Header slots per level: on the collection home the shell owns `actions` (the create-collection\n * button) and the product's `leading`; inside a collection it owns `leading` (back) and keeps the\n * product's `actions`. A product `actions` passed for the home is therefore not rendered there —\n * Native ships the same rule, so changing it is a cross-platform API decision, not a Web fix.\n */\nexport function SavedItemsScreen<T extends SavedItem>({items,collections,collectionId,selectedItemId,labels,onOpenCollection,onOpenItem,onBack,onCreateCollection,renderThumbnail,renderDetail,...screen}:SavedItemsScreenProps<T>) {\n  const {home,collection,visible,selected}=resolveSavedItems(items,collections,collectionId,selectedItemId);\n  const groups=[{id:null,title:labels.allItems,itemIds:items.map(item=>item.id)},...collections];\n  return <ListDetailScreen {...screen} title={home?screen.title:collection?.title??labels.allItems}\n    leading={home?screen.leading:<Button tone=\"ghost\" onClick={onBack}>{labels.back}</Button>}\n    actions={home?<Button tone=\"ghost\" onClick={onCreateCollection}>{labels.createCollection}</Button>:screen.actions}\n    back={{label:labels.back,onAction:onBack}}\n    {...(selected?{detail:{title:selected.title,content:renderDetail(selected)}}:{})}\n    list={<Stack gap=\"md\">\n      {home?<><Text variant=\"caption\" tone=\"muted\">{labels.privateNotice}</Text><Grid columns={{compact:2}} gap={{compact:\"md\"}} minColumnWidth={{compact:80}}>\n        {groups.map(group=><button key={group.id===null?\"all\":`collection:${group.id}`} type=\"button\" className=\"hjm-saved-collection\" onClick={()=>onOpenCollection(group.id)} aria-label={group.title}>\n          <span className=\"hjm-saved-collection__cover\" aria-hidden=\"true\">{Array.from({length:4},(_,index)=>{const item=items.filter(item=>group.itemIds.includes(item.id))[index];return <span key={index}>{item?renderThumbnail(item):null}</span>})}</span>\n          <Text emphasis=\"strong\">{group.title}</Text>\n        </button>)}\n      </Grid></>:visible.length?<Grid columns={{compact:3}} gap={{compact:\"xxs\"}} minColumnWidth={{compact:44}}>{visible.map(item=><button key={item.id} type=\"button\" className=\"hjm-saved-post\" aria-label={item.title} onClick={()=>onOpenItem(item.id)}>{renderThumbnail(item)}</button>)}</Grid>:<Text role=\"status\">{labels.empty}</Text>}\n    </Stack>}/>\n}\n"]}

package/dist/screen-flows.d.ts

@@ -0,0 +1,326 @@
+import { type ReactNode } from "react";
+import { type ScreenLayoutProps } from "./screens.js";
+import { type SheetProps } from "./overlays.js";
+import { type UploadItemDescriptor, type UploadItemLabels } from "@hjmds/design-contracts/components/upload-item";
+import { type AlertDialogRequest } from "@hjmds/design-contracts/components/alert-dialog";
+import { type PermissionScreenStatus, type PhotoSource, type PhotoSourceLabels } from "@hjmds/design-contracts/screen-patterns";
+import { type ContainerGutter } from "@hjmds/design-contracts/components/container";
+/** Copy, pending state and mutations are controlled by the consuming product. */
+export type ScreenFlowAction = Readonly<{
+    label: string;
+    onAction(): void;
+    disabled?: boolean;
+    pending?: boolean;
+}>;
+type Base = Omit<ScreenLayoutProps, "children" | "footer">;
+export type ListDetailScreenProps = Base & {
+    list: ReactNode;
+    detail?: {
+        title: string;
+        content: ReactNode;
+    };
+    back: ScreenFlowAction;
+    refresh?: ScreenFlowAction;
+    loadMore?: ScreenFlowAction;
+};
+/** Keep the list mounted so input and scroll survive a detail visit. Routers may instead restore host scroll state. */
+export declare function ListDetailScreen({ list, detail, back, refresh, loadMore, layoutStyle, ...screen }: ListDetailScreenProps): import("react").JSX.Element;
+export type EditorScreenProps = Base & {
+    children: ReactNode;
+    submitPlacement?: "header" | "footer";
+    dirty: boolean;
+    submit: ScreenFlowAction;
+    cancel: ScreenFlowAction;
+    discard: Omit<Extract<AlertDialogRequest, {
+        mode: "confirm";
+    }>, "onConfirm" | "fallbackErrorMessage"> & {
+        fallbackErrorMessage: string;
+    };
+    draftStatus?: ReactNode;
+};
+export declare function EditorScreen({ children, dirty, submitPlacement, submit, cancel, discard, draftStatus, ...screen }: EditorScreenProps): import("react").JSX.Element;
+export type ProfileScreenProps = Base & {
+    summary: ReactNode;
+    edit: ScreenFlowAction;
+    children?: ReactNode;
+    accountActions?: ReactNode;
+};
+export declare function ProfileScreen({ summary, edit, children, accountActions, ...screen }: ProfileScreenProps): import("react").JSX.Element;
+export type ModerationScreenProps = Base & {
+    reasonPicker?: ReactNode;
+    reasons: readonly {
+        value: string;
+        label: string;
+    }[];
+    reason: string | null;
+    onReasonChange(value: string): void;
+    reasonLabel: string;
+    children?: ReactNode;
+    submit: ScreenFlowAction;
+    block?: {
+        action: ScreenFlowAction;
+        confirmation: Extract<AlertDialogRequest, {
+            mode: "confirm";
+        }>;
+    };
+};
+export declare function ModerationScreen({ reasonPicker, reasons, reason, onReasonChange, reasonLabel, children, submit, block, ...screen }: ModerationScreenProps): import("react").JSX.Element;
+/** Source choice only: permission, capture, decoding and draft persistence belong to the host. */
+export type PhotoSourceSheetProps = Readonly<{
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    onSelect(source: PhotoSource): void;
+    labels: PhotoSourceLabels;
+    disabled?: boolean;
+    cameraAvailable?: boolean;
+}>;
+export declare function PhotoSourceSheet({ open, onOpenChange, onSelect, labels, disabled, cameraAvailable }: PhotoSourceSheetProps): import("react").JSX.Element;
+export type MediaSelectionItem = {
+    descriptor: UploadItemDescriptor;
+    preview?: ReactNode;
+};
+export type MediaSelectionScreenProps = Base & {
+    library?: ReactNode;
+    selectionSummary?: ReactNode;
+    items: readonly MediaSelectionItem[];
+    add: ScreenFlowAction;
+    done: ScreenFlowAction;
+    labels: UploadItemLabels;
+    actionLabels: {
+        remove: string;
+        moveUp: string;
+        moveDown: string;
+    };
+    removeLabel(item: MediaSelectionItem): string;
+    moveUpLabel(item: MediaSelectionItem): string;
+    moveDownLabel(item: MediaSelectionItem): string;
+    onRemove(id: string): void;
+    onMove(id: string, direction: -1 | 1): void;
+    onRetry(id: string): void;
+    onCancel(id: string): void;
+};
+/** A photo is the primary content; upload status stays below it instead of replacing the thumbnail. */
+export declare function MediaSelectionScreen({ library, selectionSummary, items, add, done, labels, actionLabels, removeLabel, moveUpLabel, moveDownLabel, onRemove, onMove, onRetry, onCancel, ...screen }: MediaSelectionScreenProps): import("react").JSX.Element;
+/** Recent searches before typing. Rows commit; the trailing button removes one. */
+export type SearchRecentQueries = Readonly<{
+    items: readonly string[];
+    title: string;
+    clearAllLabel: string;
+    onClearAll(): void;
+    removeLabel(query: string): string;
+    onRemove(query: string): void;
+    /** Decorative leading glyph (for example a history icon). */
+    icon?: ReactNode;
+    /** Glyph inside the remove button; defaults to "×". */
+    removeIcon?: ReactNode;
+    /** Rows shown; default `searchScreenRecipe.recentVisible` (5). */
+    maxVisible?: number;
+}>;
+/** Product-chosen queries shown before typing and after a query-caused zero result. */
+export type SearchSuggestedQueries = Readonly<{
+    title: string;
+    items: readonly string[];
+}>;
+/** A typed-ahead completion. `match` bolds the matched range (weight, not color, so it survives dark mode). */
+export type SearchSuggestion = Readonly<{
+    query: string;
+    match?: Readonly<{
+        start: number;
+        end: number;
+    }>;
+}>;
+export type SearchSuggestions = Readonly<{
+    items: readonly SearchSuggestion[];
+    /** First row that commits the typed text as is, e.g. "Search ‘q’". */
+    commitLabel(query: string): string;
+    /** Polite announcement of the suggestion count. */
+    countLabel(count: number): string;
+    icon?: ReactNode;
+    /** Rows shown under the commit row; default `searchScreenRecipe.suggestionVisible` (6). */
+    maxVisible?: number;
+}>;
+export type SearchSortOption = Readonly<{
+    id: string;
+    label: string;
+}>;
+export type SearchSort = Readonly<{
+    /** Accessible name of the sort menu. */
+    label: string;
+    /** Visible trigger text, usually the current option ("Sort: Newest"). */
+    triggerLabel: string;
+    value: string;
+    options: readonly SearchSortOption[];
+    onChange(id: string): void;
+    /** Trailing glyph of the trigger (for example a chevron). */
+    icon?: ReactNode;
+}>;
+export type SearchResultSummary = Readonly<{
+    /** Result total for the committed query; `null` while it loads (skeleton rows replace `children`). */
+    count: number | null;
+    countLabel(count: number): string;
+    /** Announced while loading. */
+    loadingLabel: string;
+    sort?: SearchSort;
+    /** Above the count, e.g. a retained-results error Notice with retry. */
+    notice?: ReactNode;
+    /** Zero-result copy. Filters as the cause add "clear all"; the query as the cause adds suggested queries. */
+    empty?: Readonly<{
+        title: string;
+        description?: string;
+    }>;
+}>;
+export type SearchAppliedFilter = Readonly<{
+    key: string;
+    label: string;
+}>;
+export type SearchAppliedFilters = Readonly<{
+    items: readonly SearchAppliedFilter[];
+    removeLabel(label: string): string;
+    onRemove(key: string): void;
+    clearAllLabel: string;
+    onClearAll(): void;
+    removeIcon?: ReactNode;
+}>;
+export type SearchFilterSheetLabels = Readonly<{
+    close: string;
+    reset: string;
+    /** Primary action text for a live draft count, e.g. "Show 12 results"; `null` while counting. */
+    apply(count: number | null): string;
+}>;
+/**
+ * Draft/applied filter sheet. HJM copies `value` into a draft when the sheet opens, discards the draft
+ * on any dismissal, and calls `onApply(draft)` only from the primary action.
+ */
+export type SearchFilterSheet<F> = Readonly<{
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    /** Sheet title; products that open one section from a facet chip pass that section's name. */
+    title: string;
+    /** Applied filters. */
+    value: F;
+    onApply(next: F): void;
+    /** Live count for a draft. Return `null` while an async count is pending; `0` disables apply. */
+    count(draft: F): number | null;
+    /** Draft after "reset" (the open section, or everything). */
+    reset(draft: F): F;
+    /** Disables "reset" when the draft already equals its reset value. */
+    isDefault(draft: F): boolean;
+    renderContent(draft: F, setDraft: (next: F) => void): ReactNode;
+    labels: SearchFilterSheetLabels;
+    /** Default `large`; section sheets usually pass `auto`. */
+    size?: SheetProps["size"];
+    /** First item of the filter rail that opens the sheet, named with the applied count. */
+    trigger?: Readonly<{
+        label(appliedCount: number): string;
+        accessibilityLabel(appliedCount: number): string;
+        icon?: ReactNode;
+    }>;
+}>;
+type SearchInputSlot = {
+    queryField: ReactNode;
+    queryClearLabel?: string;
+} | {
+    queryField?: never;
+    queryClearLabel: string;
+};
+/** `committedQuery` turns on two-step search; every commit (Enter, suggestion, recent, suggested query) then goes through `onSubmit`. */
+/** One name for the default field's progress on both platforms (Web SearchField `loading`, Native `busy`+`busyLabel`). */
+type SearchProgressSlot = {
+    searching?: never;
+    searchingLabel?: never;
+} | {
+    searching: boolean;
+    searchingLabel: string;
+};
+type SearchCommitSlot = {
+    committedQuery?: never;
+    onSubmit?: (query: string) => void;
+} | {
+    committedQuery: string;
+    onSubmit: (query: string) => void;
+};
+export type SearchScreenProps<F = unknown> = Base & SearchInputSlot & SearchCommitSlot & SearchProgressSlot & {
+    query: string;
+    queryLabel: string;
+    onQueryChange(value: string): void;
+    onSearch(query: string, context: {
+        signal: AbortSignal;
+    }): void;
+    debounceMs?: number;
+    filters?: ReactNode;
+    recentSearches?: ReactNode;
+    children: ReactNode;
+    /** `scroll` keeps `filters` on one horizontally scrolling line that bleeds to the screen edges. */
+    filtersOverflow?: "wrap" | "scroll";
+    /** Gutter the host (Container `gutter`, Sheet = `regular`) already applies around this screen; the scroll rail bleeds over it too. */
+    hostGutter?: ContainerGutter;
+    /** `hidden` drops the visible label (the field keeps `queryLabel` as its accessible name and placeholder). */
+    queryLabelVisibility?: "visible" | "hidden";
+    recentQueries?: SearchRecentQueries;
+    suggestedQueries?: SearchSuggestedQueries;
+    suggestions?: SearchSuggestions;
+    resultSummary?: SearchResultSummary;
+    appliedFilters?: SearchAppliedFilters;
+    filterSheet?: SearchFilterSheet<F>;
+};
+/** Abort is supplied to the host request; the host must ignore aborted responses before committing results. */
+export declare function SearchScreen<F = unknown>({ query, queryLabel, queryField, queryClearLabel, onQueryChange, onSearch, debounceMs, filters, recentSearches, children, onSubmit, committedQuery, filtersOverflow, hostGutter, queryLabelVisibility, searching, searchingLabel, recentQueries, suggestedQueries, suggestions, resultSummary, appliedFilters, filterSheet, ...screen }: SearchScreenProps<F>): import("react").JSX.Element;
+export type PermissionScreenProps = Base & {
+    status: PermissionScreenStatus;
+    illustration?: ReactNode;
+    explanation: ReactNode;
+    request: ScreenFlowAction;
+    settings: ScreenFlowAction;
+    continueAction: ScreenFlowAction;
+    skip?: ScreenFlowAction;
+};
+export declare function PermissionScreen({ status, illustration, explanation, request, settings, continueAction, skip, ...screen }: PermissionScreenProps): import("react").JSX.Element;
+export type OnboardingStep = {
+    id: string;
+    title: string;
+    description: string;
+    content: ReactNode;
+};
+export type OnboardingScreenProps = {
+    steps: readonly OnboardingStep[];
+    index: number;
+    onIndexChange(index: number): void;
+    nextLabel: string;
+    backLabel: string;
+    complete: ScreenFlowAction;
+    skip?: ScreenFlowAction;
+    progressLabel(index: number, total: number): string;
+    layoutStyle?: ScreenLayoutProps["layoutStyle"];
+};
+export declare function OnboardingScreen({ steps, index, onIndexChange, nextLabel, backLabel, complete, skip, progressLabel, layoutStyle }: OnboardingScreenProps): import("react").JSX.Element;
+export type CommentThreadItem = Readonly<{
+    id: string;
+    parentId: string | null;
+    author: string;
+    body: ReactNode;
+    bodyText?: string;
+    timeLabel: string;
+    likeCountLabel: string;
+    avatar?: ReactNode;
+    likeIcon: ReactNode;
+    likeLabel: string;
+    likeAction?: ReactNode;
+    actions?: ReactNode;
+    canReply?: boolean;
+    replyDisabled?: boolean;
+}>;
+export type CommentThreadScreenProps = Base & {
+    items: readonly CommentThreadItem[];
+    expandedIds: readonly string[];
+    onExpandedChange(id: string): void;
+    onLike(id: string): void;
+    onReply(id: string): void;
+    replyLabel: string;
+    repliesLabel(count: number, expanded: boolean): string;
+    composer?: ReactNode;
+    threadFooter?: ReactNode;
+};
+/** Controlled thread: server ordering, permission checks and receipt-based draft clearing belong to the product. */
+export declare function CommentThreadScreen({ items, expandedIds, onExpandedChange, onLike, onReply, replyLabel, repliesLabel, composer, threadFooter, ...screen }: CommentThreadScreenProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=screen-flows.d.ts.map