@hjmds/react 1.41.2 → 1.42.0

package/dist/date-range.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range.js","sourceRoot":"","sources":["../src/date-range.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  emptyDateRange,\n  isCompleteDateRange,\n  resolveDateRangeCellState,\n  resolveDateRangeSelection,\n  validateDateRange,\n  type DateRangeValue,\n} from \"@hjmds/design-contracts/components/date-range\";\nimport type {\n  CalendarDescriptor,\n  ComposeCalendarAccessibleName,\n} from \"@hjmds/design-contracts/components/calendar\";\nimport { useState, type ReactNode } from \"react\";\nimport { Calendar, type CalendarMonthAction } from \"./calendar.js\";\nimport { classNames, useControllableState } from \"./internal.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\nexport type DateRangePickerProps<Content = unknown> = Readonly<{\n  /** The same grid Calendar renders; the product still owns month data. */\n  descriptor: Omit<CalendarDescriptor<Content>, \"selectedDate\" | \"defaultSelectedDate\" | \"onSelectionChange\">;\n  composeAccessibleName: ComposeCalendarAccessibleName<Content>;\n  value?: DateRangeValue;\n  defaultValue?: DateRangeValue;\n  onValueChange?: (value: DateRangeValue) => void;\n  previousMonth?: CalendarMonthAction;\n  nextMonth?: CalendarMonthAction;\n  /** Localized suffixes appended to a day's name when it is a range edge. */\n  rangeLabels: Readonly<{ start: string; end: string; between: string }>;\n  renderCellContent?: (date: string) => ReactNode;\n  className?: string;\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport function DateRangePicker<Content = unknown>({\n  descriptor,\n  composeAccessibleName,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  previousMonth,\n  nextMonth,\n  rangeLabels,\n  renderCellContent,\n  className,\n  layoutStyle,\n}: DateRangePickerProps<Content>) {\n  const [value, setValue] = useControllableState<DateRangeValue>({\n    ...(controlledValue === undefined ? {} : { value: controlledValue }),\n    defaultValue: defaultValue ?? emptyDateRange,\n    ...(onValueChange === undefined ? {} : { onChange: onValueChange }),\n  });\n  validateDateRange(value);\n  // The hovered date previews the not-yet-committed end through the same cell\n  // state function the committed range uses.\n  const [hovered, setHovered] = useState<string | null>(null);\n\n  return (\n    <div\n      style={layoutStyle}\n      className={classNames(\"hjm-date-range\", className)}\n      data-selecting={value.start !== null && value.end === null ? \"\" : undefined}\n      data-complete={isCompleteDateRange(value) || undefined}\n      onMouseLeave={() => setHovered(null)}\n    >\n      <Calendar<Content>\n        descriptor={{\n          ...descriptor,\n          // Calendar keeps single selection: the range's own edges are painted\n          // through cell content and data attributes, not by lying to it.\n          selectedDate: value.end ?? value.start,\n          onSelectionChange: (date) => { if (date !== null) setValue(resolveDateRangeSelection(value, date)); },\n        } as CalendarDescriptor<Content>}\n        composeAccessibleName={(info) => {\n          const state = resolveDateRangeCellState(value, info.date, hovered);\n          const base = composeAccessibleName(info);\n          return state === \"none\" ? base : `${base}, ${rangeLabels[state]}`;\n        }}\n        {...(previousMonth === undefined ? {} : { previousMonth })}\n        {...(nextMonth === undefined ? {} : { nextMonth })}\n        renderCellContent={(cell) => (\n          <span\n            className=\"hjm-date-range__cell\"\n            data-range={resolveDateRangeCellState(value, cell.date, hovered)}\n            onMouseEnter={() => setHovered(cell.date)}\n          >\n            {renderCellContent?.(cell.date) ?? null}\n          </span>\n        )}\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"date-range.js","sourceRoot":"","sources":["../src/date-range.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,iBAAiB,GAElB,MAAM,+CAA+C,CAAC;AAKvD,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAA4B,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAoBjE,MAAM,UAAU,eAAe,CAAoB,EACjD,UAAU,EACV,qBAAqB,EACrB,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,WAAW,GACmB;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAiB;QAC7D,GAAG,CAAC,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC;QACpE,YAAY,EAAE,YAAY,IAAI,cAAc;QAC5C,GAAG,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;KACpE,CAAC,CAAC;IACH,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzB,4EAA4E;IAC5E,2CAA2C;IAC3C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5D,OAAO,CACL,cACE,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,oBAClC,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,mBAC5D,mBAAmB,CAAC,KAAK,CAAC,IAAI,SAAS,EACtD,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,YAEpC,KAAC,QAAQ,IACP,UAAU,EAAE;gBACV,GAAG,UAAU;gBACb,qEAAqE;gBACrE,gEAAgE;gBAChE,YAAY,EAAE,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,KAAK;gBACtC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,GAAG,IAAI,IAAI,KAAK,IAAI;oBAAE,QAAQ,CAAC,yBAAyB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;aACvE,EAChC,qBAAqB,EAAE,CAAC,IAAI,EAAE,EAAE;gBAC9B,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;gBACnE,MAAM,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;gBACzC,OAAO,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;YACpE,CAAC,KACG,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC,KACtD,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAClD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,eACE,SAAS,EAAC,sBAAsB,gBACpB,yBAAyB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,EAChE,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAExC,iBAAiB,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,GAClC,CACR,GACD,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["\"use client\";\n\nimport {\n  emptyDateRange,\n  isCompleteDateRange,\n  resolveDateRangeCellState,\n  resolveDateRangeSelection,\n  validateDateRange,\n  type DateRangeValue,\n} from \"@hjmds/design-contracts/components/date-range\";\nimport type {\n  CalendarDescriptor,\n  ComposeCalendarAccessibleName,\n} from \"@hjmds/design-contracts/components/calendar\";\nimport { useState, type ReactNode } from \"react\";\nimport { Calendar, type CalendarMonthAction } from \"./calendar.js\";\nimport { classNames, useControllableState } from \"./internal.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\nexport type DateRangePickerProps<Content = unknown> = Readonly<{\n  /** The same grid Calendar renders; the product still owns month data. */\n  descriptor: Omit<CalendarDescriptor<Content>, \"selectedDate\" | \"defaultSelectedDate\" | \"onSelectionChange\">;\n  composeAccessibleName: ComposeCalendarAccessibleName<Content>;\n  value?: DateRangeValue;\n  defaultValue?: DateRangeValue;\n  onValueChange?: (value: DateRangeValue) => void;\n  previousMonth?: CalendarMonthAction;\n  nextMonth?: CalendarMonthAction;\n  /** Localized suffixes appended to a day's name when it is a range edge. */\n  rangeLabels: Readonly<{ start: string; end: string; between: string }>;\n  renderCellContent?: (date: string) => ReactNode;\n  className?: string;\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport function DateRangePicker<Content = unknown>({\n  descriptor,\n  composeAccessibleName,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  previousMonth,\n  nextMonth,\n  rangeLabels,\n  renderCellContent,\n  className,\n  layoutStyle,\n}: DateRangePickerProps<Content>) {\n  const [value, setValue] = useControllableState<DateRangeValue>({\n    ...(controlledValue === undefined ? {} : { value: controlledValue }),\n    defaultValue: defaultValue ?? emptyDateRange,\n    ...(onValueChange === undefined ? {} : { onChange: onValueChange }),\n  });\n  validateDateRange(value);\n  // The hovered date previews the not-yet-committed end through the same cell\n  // state function the committed range uses.\n  const [hovered, setHovered] = useState<string | null>(null);\n\n  return (\n    <div\n      style={layoutStyle}\n      className={classNames(\"hjm-date-range\", className)}\n      data-selecting={value.start !== null && value.end === null ? \"\" : undefined}\n      data-complete={isCompleteDateRange(value) || undefined}\n      onMouseLeave={() => setHovered(null)}\n    >\n      <Calendar<Content>\n        descriptor={{\n          ...descriptor,\n          // Calendar keeps single selection: the range's own edges are painted\n          // through cell content and data attributes, not by lying to it.\n          selectedDate: value.end ?? value.start,\n          onSelectionChange: (date) => { if (date !== null) setValue(resolveDateRangeSelection(value, date)); },\n        } as CalendarDescriptor<Content>}\n        composeAccessibleName={(info) => {\n          const state = resolveDateRangeCellState(value, info.date, hovered);\n          const base = composeAccessibleName(info);\n          return state === \"none\" ? base : `${base}, ${rangeLabels[state]}`;\n        }}\n        {...(previousMonth === undefined ? {} : { previousMonth })}\n        {...(nextMonth === undefined ? {} : { nextMonth })}\n        renderCellContent={(cell) => (\n          <span\n            className=\"hjm-date-range__cell\"\n            data-range={resolveDateRangeCellState(value, cell.date, hovered)}\n            onMouseEnter={() => setHovered(cell.date)}\n          >\n            {renderCellContent?.(cell.date) ?? null}\n          </span>\n        )}\n      />\n    </div>\n  );\n}\n"]}

package/dist/design-profile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-profile.d.ts","sourceRoot":"","sources":["../src/design-profile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAOpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC;IAC/E,KAAK,EAAE,SAAS,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,EAAE,CAAC;IAChE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC;IAC5D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;CACnE,CAAC,CAAC;AAEH;;sFAEsF;AACtF,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,GAAG,MAAM,EAAE,EAAE,mBAAmB,+BA8BhL"}
+{"version":3,"file":"design-profile.d.ts","sourceRoot":"","sources":["../src/design-profile.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAOpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC;IAC/E,KAAK,EAAE,SAAS,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,EAAE,CAAC;IAChE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC;IAC5D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;CACnE,CAAC,CAAC;AAEH;;sFAEsF;AACtF,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,GAAG,MAAM,EAAE,EAAE,mBAAmB,+BA8BhL"}

package/dist/design-profile.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { ScreenLayout } from "./screens.js";

package/dist/design-profile.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-profile.js","sourceRoot":"","sources":["../src/design-profile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { ScreenLayout, type ScreenLayoutProps } from \"./screens.js\";\nimport { Collapsible } from \"./collapsible.js\";\nimport { EffectSurface } from \"./effect-surface.js\";\nimport { Grid, Stack, Surface } from \"./layout.js\";\nimport { useHjmTheme } from \"./provider.js\";\nimport { resolveDesignProfileCollection, resolveDesignProfileCollectionItem, overviewContentLayout } from \"@hjmds/design-contracts/design-profile-layout\";\nimport { Divider } from \"./advanced-display.js\";\nimport type { HjmDesignProfile } from \"@hjmds/design-contracts/design-profile\";\n\nexport type OverviewScreenProps = Omit<ScreenLayoutProps, \"children\"> & Readonly<{\n  items: readonly Readonly<{ id: string; children: ReactNode }>[];\n  toolbar?: ReactNode;\n  toolbarLabel: string;\n  collection?: HjmDesignProfile[\"compositions\"][\"collection\"];\n  toolbarPresentation?: HjmDesignProfile[\"compositions\"][\"toolbar\"];\n}>;\n\n/** Optional collection screen; ScreenLayout still owns loading/error/scrolling.\n * Unlike settings/inbox it owns a profile-selected collection and persistent tools.\n * It never owns product mutations or chooses a different component for each theme. */\nexport function OverviewScreen({ items, toolbar, toolbarLabel, collection: suppliedCollection, toolbarPresentation: suppliedToolbarPresentation, ...screen }: OverviewScreenProps) {\n  const { designProfile } = useHjmTheme();\n  const collection = suppliedCollection ?? designProfile?.compositions.collection ?? \"rows\";\n  const toolbarPresentation = suppliedToolbarPresentation ?? designProfile?.compositions.toolbar ?? \"inline\";\n  const [toolsOpen, setToolsOpen] = useState(true);\n  if (!toolbarLabel.trim()) throw new TypeError(\"Overview tools need a localized label\");\n  const ids = new Set(items.map(item => item.id));\n  if (ids.size !== items.length || items.some(item => !item.id.trim())) throw new TypeError(\"Overview items need unique stable ids\");\n  // Retain the same effect/grid/surface subtree when the profile changes: optional\n  // decoration can disappear without remounting fields, focus or local state.\n  const itemLayout = resolveDesignProfileCollectionItem(collection);\n  const canvas = designProfile?.material.canvas ?? { layers: [\"mesh\"] as const, intensity: 0, active: false };\n  return <EffectSurface descriptor={canvas} radius=\"none\" layoutStyle={{ width: \"100%\" }}>\n    <ScreenLayout {...screen}>\n      {/* Tools and collection share one bounded column, so card edges line up with the field above them. The screen\n          body is a block box on Web (scroll=\"screen\"), where alignSelf has no effect, so auto inline margins center it. */}\n      <Stack gap=\"xl\" layoutStyle={{ ...overviewContentLayout, marginInline: \"auto\" }}>\n        {toolbar ? <Collapsible trigger={toolbarLabel} open={toolsOpen} onOpenChange={setToolsOpen} presentation={toolbarPresentation === \"inline\" ? \"inline\" : \"disclosure\"} keepMounted>{toolbar}</Collapsible> : null}\n        <Grid {...resolveDesignProfileCollection(collection)}>\n          {/* The card Surface owns the rounded frame; the material layer sits in its padded content box, so a rounded\n              effect clipped the first glyph of edge-aligned text (clay/glass, 2026-10-17 after EffectSurface radius default lg).\n              The rule slot stays in place (null when unused) so switching collections never remounts item content. */}\n          {items.map((item, index) => <Surface key={item.id} padding={itemLayout.padding} tone={itemLayout.tone} bordered={itemLayout.bordered} radius=\"lg\">\n            {itemLayout.ruled && index > 0 ? <Divider decorative layoutStyle={{ marginBottom: itemLayout.ruleGap }} /> : null}\n            <EffectSurface radius=\"none\" descriptor={designProfile?.material.card ?? { layers: [\"mesh\"], intensity: 0, active: false }} className=\"hjm-profile-card-effect\">{item.children}</EffectSurface>\n          </Surface>)}\n        </Grid>\n      </Stack>\n    </ScreenLayout>\n  </EffectSurface>;\n}\n"]}
+{"version":3,"file":"design-profile.js","sourceRoot":"","sources":["../src/design-profile.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { ScreenLayout, type ScreenLayoutProps } from \"./screens.js\";\nimport { Collapsible } from \"./collapsible.js\";\nimport { EffectSurface } from \"./effect-surface.js\";\nimport { Grid, Stack, Surface } from \"./layout.js\";\nimport { useHjmTheme } from \"./provider.js\";\nimport { resolveDesignProfileCollection, resolveDesignProfileCollectionItem, overviewContentLayout } from \"@hjmds/design-contracts/design-profile-layout\";\nimport { Divider } from \"./advanced-display.js\";\nimport type { HjmDesignProfile } from \"@hjmds/design-contracts/design-profile\";\n\nexport type OverviewScreenProps = Omit<ScreenLayoutProps, \"children\"> & Readonly<{\n  items: readonly Readonly<{ id: string; children: ReactNode }>[];\n  toolbar?: ReactNode;\n  toolbarLabel: string;\n  collection?: HjmDesignProfile[\"compositions\"][\"collection\"];\n  toolbarPresentation?: HjmDesignProfile[\"compositions\"][\"toolbar\"];\n}>;\n\n/** Optional collection screen; ScreenLayout still owns loading/error/scrolling.\n * Unlike settings/inbox it owns a profile-selected collection and persistent tools.\n * It never owns product mutations or chooses a different component for each theme. */\nexport function OverviewScreen({ items, toolbar, toolbarLabel, collection: suppliedCollection, toolbarPresentation: suppliedToolbarPresentation, ...screen }: OverviewScreenProps) {\n  const { designProfile } = useHjmTheme();\n  const collection = suppliedCollection ?? designProfile?.compositions.collection ?? \"rows\";\n  const toolbarPresentation = suppliedToolbarPresentation ?? designProfile?.compositions.toolbar ?? \"inline\";\n  const [toolsOpen, setToolsOpen] = useState(true);\n  if (!toolbarLabel.trim()) throw new TypeError(\"Overview tools need a localized label\");\n  const ids = new Set(items.map(item => item.id));\n  if (ids.size !== items.length || items.some(item => !item.id.trim())) throw new TypeError(\"Overview items need unique stable ids\");\n  // Retain the same effect/grid/surface subtree when the profile changes: optional\n  // decoration can disappear without remounting fields, focus or local state.\n  const itemLayout = resolveDesignProfileCollectionItem(collection);\n  const canvas = designProfile?.material.canvas ?? { layers: [\"mesh\"] as const, intensity: 0, active: false };\n  return <EffectSurface descriptor={canvas} radius=\"none\" layoutStyle={{ width: \"100%\" }}>\n    <ScreenLayout {...screen}>\n      {/* Tools and collection share one bounded column, so card edges line up with the field above them. The screen\n          body is a block box on Web (scroll=\"screen\"), where alignSelf has no effect, so auto inline margins center it. */}\n      <Stack gap=\"xl\" layoutStyle={{ ...overviewContentLayout, marginInline: \"auto\" }}>\n        {toolbar ? <Collapsible trigger={toolbarLabel} open={toolsOpen} onOpenChange={setToolsOpen} presentation={toolbarPresentation === \"inline\" ? \"inline\" : \"disclosure\"} keepMounted>{toolbar}</Collapsible> : null}\n        <Grid {...resolveDesignProfileCollection(collection)}>\n          {/* The card Surface owns the rounded frame; the material layer sits in its padded content box, so a rounded\n              effect clipped the first glyph of edge-aligned text (clay/glass, 2026-10-17 after EffectSurface radius default lg).\n              The rule slot stays in place (null when unused) so switching collections never remounts item content. */}\n          {items.map((item, index) => <Surface key={item.id} padding={itemLayout.padding} tone={itemLayout.tone} bordered={itemLayout.bordered} radius=\"lg\">\n            {itemLayout.ruled && index > 0 ? <Divider decorative layoutStyle={{ marginBottom: itemLayout.ruleGap }} /> : null}\n            <EffectSurface radius=\"none\" descriptor={designProfile?.material.card ?? { layers: [\"mesh\"], intensity: 0, active: false }} className=\"hjm-profile-card-effect\">{item.children}</EffectSurface>\n          </Surface>)}\n        </Grid>\n      </Stack>\n    </ScreenLayout>\n  </EffectSurface>;\n}\n"]}

package/dist/display.d.ts

@@ -1,4 +1,4 @@
-import { listRowRecipe, type BadgeAdornmentContext, type BadgeSize, type BadgeTone, type BadgeVariant as ContractBadgeVariant, type ListRowDensity, type ListRowLeadingShape } from "@hjmds/design-contracts/recipes";
+import { listRowRecipe, type BadgeAdornmentContext, type BadgeSize, type BadgeTone, type BadgeVariant as ContractBadgeVariant, type BadgeCategoryColor, type ListRowDensity, type ListRowLeadingShape, type ListRowTrailingAccessory } from "@hjmds/design-contracts/recipes";
 import { type TagTone } from "@hjmds/design-contracts/components/tag";
 import { type CardHeadingLevel } from "@hjmds/design-contracts/components/card";
 import { type SurfacePadding, type SurfaceRadius, type SurfaceTone } from "@hjmds/design-contracts/recipes/base";
@@ -9,6 +9,11 @@ export type { TagTone } from "@hjmds/design-contracts/components/tag";
 export type BadgeVariant = ContractBadgeVariant;
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & Readonly<{
     tone?: BadgeTone;
+    /**
+     * Product classification color per theme (series, grade…) in place of `tone`. HJM keeps the frame and picks the
+     * label ink; a color whose label cannot reach AA 4.5 throws instead of rendering unreadable.
+     */
+    categoryColor?: BadgeCategoryColor;
     size?: BadgeSize;
     variant?: BadgeVariant;
     leading?: ReactNode | ((context: BadgeAdornmentContext) => ReactNode);
@@ -18,6 +23,11 @@ export type BadgeProps = HTMLAttributes<HTMLSpanElement> & Readonly<{
 }>;
 export declare const Badge: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & Readonly<{
     tone?: BadgeTone;
+    /**
+     * Product classification color per theme (series, grade…) in place of `tone`. HJM keeps the frame and picks the
+     * label ink; a color whose label cannot reach AA 4.5 throws instead of rendering unreadable.
+     */
+    categoryColor?: BadgeCategoryColor;
     size?: BadgeSize;
     variant?: BadgeVariant;
     leading?: ReactNode | ((context: BadgeAdornmentContext) => ReactNode);
@@ -143,6 +153,11 @@ export type ListRowProps = Omit<HTMLAttributes<HTMLElement>, "title" | "onClick"
     description?: ReactNode;
     leading?: ReactNode;
     trailing?: ReactNode;
+    /**
+     * `disclosure`: the row opens another screen. HJM draws the decorative chevron after `trailing`, inside the row
+     * command (before any `trailingAction`), mirrored in RTL; size and color come from `listRowRecipe.accessories`.
+     */
+    trailingAccessory?: ListRowTrailingAccessory;
     /** Independent command outside the row's navigation target. */
     trailingAction?: ReactNode;
     /** Supply a framework Link without replacing the shared row layout. */
@@ -172,6 +187,11 @@ export declare const ListRow: import("react").ForwardRefExoticComponent<Omit<HTM
     description?: ReactNode;
     leading?: ReactNode;
     trailing?: ReactNode;
+    /**
+     * `disclosure`: the row opens another screen. HJM draws the decorative chevron after `trailing`, inside the row
+     * command (before any `trailingAction`), mirrored in RTL; size and color come from `listRowRecipe.accessories`.
+     */
+    trailingAccessory?: ListRowTrailingAccessory;
     /** Independent command outside the row's navigation target. */
     trailingAction?: ReactNode;
     /** Supply a framework Link without replacing the shared row layout. */

package/dist/display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../src/display.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../src/display.tsx"],"names":[],"mappings":"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"}

package/dist/display.js

@@ -1,15 +1,37 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { badgeRecipe, listRowRecipe, } from "@hjmds/design-contracts/recipes";
+import { badgeRecipe, listRowRecipe, resolveBadgeCategoryColor, validateListRowTrailingAccessory, } from "@hjmds/design-contracts/recipes";
+import { THEMES } from "@hjmds/design-contracts/colors";
+import { glyph } from "@hjmds/design-contracts/foundations";
 import { resolveTagDescriptor, } from "@hjmds/design-contracts/components/tag";
 import { cardRecipe, } from "@hjmds/design-contracts/components/card";
 import { surfaceGeometry, } from "@hjmds/design-contracts/recipes/base";
 import { createElement, forwardRef, } from "react";
 import { classNames } from "./internal.js";
-import { useHjmDensityDefault } from "./provider.js";
+import { useHjmDensityDefault, useOptionalHjmTheme } from "./provider.js";
 import { Surface, Text } from "./layout.js";
-export const Badge = forwardRef(function Badge({ tone = badgeRecipe.defaults.tone, size = badgeRecipe.defaults.size, variant = badgeRecipe.defaults.variant, leading, trailing, className, children, layoutStyle, style, ...props }, ref) {
-    const iconContext = { color: "currentColor", size: badgeRecipe.sizes[size].iconSize };
-    return (_jsxs("span", { ...props, style: { ...style, ...layoutStyle }, ref: ref, className: classNames("hjm-badge", className), "data-tone": tone, "data-size": size, "data-variant": variant, children: [leading === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "hjm-badge__icon", children: typeof leading === "function" ? leading(iconContext) : leading })), _jsx("span", { className: "hjm-badge__label", children: children }), trailing === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "hjm-badge__icon", children: typeof trailing === "function" ? trailing(iconContext) : trailing }))] }));
+import { Icon } from "./supplemental-display.js";
+export const Badge = forwardRef(function Badge({ tone: toneProp, categoryColor, size = badgeRecipe.defaults.size, variant = badgeRecipe.defaults.variant, leading, trailing, className, children, layoutStyle, style, ...props }, ref) {
+    if (categoryColor !== undefined && toneProp !== undefined)
+        throw new TypeError("Badge takes either tone or categoryColor, not both");
+    const tone = toneProp ?? badgeRecipe.defaults.tone;
+    // Outside a provider the stylesheet paints the light palette, so the category resolves against it too.
+    const theme = useOptionalHjmTheme();
+    const category = categoryColor === undefined ? null : resolveBadgeCategoryColor(categoryColor, {
+        theme: theme?.environment.theme ?? "light",
+        variant,
+        palette: theme?.palette.theme ?? THEMES.light,
+    });
+    const iconContext = { color: "currentColor", size: badgeRecipe.sizes[size].iconSize, strokeWidth: badgeRecipe.iconStrokeWidth };
+    return (_jsxs("span", { ...props, style: {
+            ...style,
+            ...(category ? {
+                "--hjm-badge-category-content": category.content,
+                "--hjm-badge-category-background": category.background ?? "transparent",
+                "--hjm-badge-category-border": category.border ?? "transparent",
+            } : {}),
+            ...layoutStyle,
+        }, ref: ref, className: classNames("hjm-badge", className), "data-tone": category ? "category" : tone, "data-size": size, "data-variant": variant, children: [leading === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "hjm-badge__icon", children: typeof leading === "function" ? leading(iconContext) : leading })), _jsx("span", { className: "hjm-badge__label", children: children }), trailing === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "hjm-badge__icon", children: typeof trailing === "function" ? trailing(iconContext) : trailing }))] }));
 });
 export const Tag = forwardRef(function Tag({ children, tone, className, layoutStyle, style, ...props }, ref) {
     const descriptor = resolveTagDescriptor({
@@ -59,7 +81,7 @@ selected, onActivate, href, renderLink, disabled = false, tone = cardRecipe.defa
 export function QuoteCard({ children, attribution, renderMark, ...props }) {
     return _jsx(Card, { ...props, leading: _jsx("span", { className: "hjm-quote-card__mark", "aria-hidden": "true", children: renderMark?.({ color: "currentColor", size: cardRecipe.quotation.markSize }) ?? "“" }), children: _jsxs("blockquote", { className: "hjm-quote-card__body", children: [children, attribution === undefined ? null : _jsx("footer", { children: _jsx(Text, { variant: "caption", tone: "muted", children: attribution }) })] }) });
 }
-export const ListRow = forwardRef(function ListRow({ title, description, leading, trailing, trailingAction, renderLink, density: densityProp, tone = listRowRecipe.defaults.tone, leadingShape = "square", selected, disabled = false, loading = false, loadingLabel, href, onClick, className, layoutStyle, style, ...props }, ref) {
+export const ListRow = forwardRef(function ListRow({ title, description, leading, trailing, trailingAccessory = listRowRecipe.defaults.trailingAccessory, trailingAction, renderLink, density: densityProp, tone = listRowRecipe.defaults.tone, leadingShape = "square", selected, disabled = false, loading = false, loadingLabel, href, onClick, className, layoutStyle, style, ...props }, ref) {
     // The hook runs unconditionally — `??` would short-circuit it and break the
     // rules of hooks on the very first row that passes `density`.
     const densityDefault = useHjmDensityDefault({
@@ -67,9 +89,11 @@ export const ListRow = forwardRef(function ListRow({ title, description, leading
         compact: "compact",
     });
     const density = densityProp ?? densityDefault;
+    validateListRowTrailingAccessory(trailingAccessory);
+    const accessory = trailingAccessory === "none" ? null : listRowRecipe.accessories[trailingAccessory];
     if (loading) {
         // A loading row is never interactive: there is nothing to activate yet.
-        return (_jsxs("div", { ...props, ref: ref, role: loadingLabel ? "status" : undefined, "aria-busy": loadingLabel ? true : undefined, "aria-hidden": loadingLabel ? undefined : true, "aria-label": loadingLabel, className: classNames("hjm-list-row", "hjm-list-row--loading", className), "data-density": density, "data-leading": leading ? "" : undefined, "data-lines": description ? "two" : "one", "data-state": "loading", style: { ...style, ...layoutStyle }, children: [leading ? _jsx("span", { className: "hjm-list-row__leading", "data-shape": leadingShape, "data-placeholder": "" }) : null, _jsxs("span", { className: "hjm-list-row__content", children: [_jsx("span", { className: "hjm-list-row__title", "data-placeholder": "", style: { width: `${listRowRecipe.loading.titleWidthPercent}%` } }), description ? _jsx("span", { className: "hjm-list-row__description", "data-placeholder": "", style: { width: `${listRowRecipe.loading.descriptionWidthPercent}%` } }) : null] }), trailing ? _jsx("span", { className: "hjm-list-row__trailing", "data-placeholder": "", style: { width: listRowRecipe.loading.trailingWidth } }) : null] }));
+        return (_jsxs("div", { ...props, ref: ref, role: loadingLabel ? "status" : undefined, "aria-busy": loadingLabel ? true : undefined, "aria-hidden": loadingLabel ? undefined : true, "aria-label": loadingLabel, className: classNames("hjm-list-row", "hjm-list-row--loading", className), "data-density": density, "data-leading": leading ? "" : undefined, "data-lines": description ? "two" : "one", "data-state": "loading", style: { ...style, ...layoutStyle }, children: [leading ? _jsx("span", { className: "hjm-list-row__leading", "data-shape": leadingShape, "data-placeholder": "" }) : null, _jsxs("span", { className: "hjm-list-row__content", children: [_jsx("span", { className: "hjm-list-row__title", "data-placeholder": "", style: { width: `${listRowRecipe.loading.titleWidthPercent}%` } }), description ? _jsx("span", { className: "hjm-list-row__description", "data-placeholder": "", style: { width: `${listRowRecipe.loading.descriptionWidthPercent}%` } }) : null] }), trailing ? _jsx("span", { className: "hjm-list-row__trailing", "data-placeholder": "", style: { width: listRowRecipe.loading.trailingWidth } }) : null, accessory ? _jsx("span", { className: "hjm-list-row__accessory", "data-accessory": trailingAccessory, style: { inlineSize: glyph[accessory.glyph], blockSize: glyph[accessory.glyph] } }) : null] }));
     }
     const element = href ? "a" : onClick ? "button" : "div";
     const interactiveProps = href
@@ -106,7 +130,9 @@ export const ListRow = forwardRef(function ListRow({ title, description, leading
         style: trailingAction ? style : { ...style, ...layoutStyle },
     }, leading
         ? _jsx("span", { className: "hjm-list-row__leading", "data-shape": leadingShape, children: leading })
-        : null, _jsxs("span", { className: "hjm-list-row__content", children: [_jsx("span", { className: "hjm-list-row__title", children: title }), description ? (_jsx("span", { className: "hjm-list-row__description", children: description })) : null] }), trailing ? _jsx("span", { className: "hjm-list-row__trailing", children: trailing }) : null);
+        : null, _jsxs("span", { className: "hjm-list-row__content", children: [_jsx("span", { className: "hjm-list-row__title", children: title }), description ? (_jsx("span", { className: "hjm-list-row__description", children: description })) : null] }), trailing ? _jsx("span", { className: "hjm-list-row__trailing", children: trailing }) : null, accessory
+        ? _jsx("span", { className: "hjm-list-row__accessory", "data-accessory": trailingAccessory, "aria-hidden": "true", children: _jsx(Icon, { name: accessory.icon, size: accessory.glyph, weight: accessory.weight }) })
+        : null);
     const linked = href && renderLink ? renderLink(row.props) : row;
     // The frame owns the row surface and its bleed so the command and the separate action share one fill, as Native;
     // the action stays outside the link/button (styles.css `.hjm-list-row-frame`).

package/dist/display.js.map

@@ -1 +1 @@
-{"version":3,"file":"display.js","sourceRoot":"","sources":["../src/display.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  badgeRecipe,\n  listRowRecipe,\n  type BadgeAdornmentContext,\n  type BadgeSize,\n  type BadgeTone,\n  type BadgeVariant as ContractBadgeVariant,\n  type ListRowDensity,\n  type ListRowLeadingShape,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  resolveTagDescriptor,\n  type TagTone,\n} from \"@hjmds/design-contracts/components/tag\";\nimport {\n  cardRecipe,\n  type CardHeadingLevel,\n} from \"@hjmds/design-contracts/components/card\";\nimport {\n  surfaceGeometry,\n  type SurfacePadding,\n  type SurfaceRadius,\n  type SurfaceTone,\n} from \"@hjmds/design-contracts/recipes/base\";\nimport {\n  createElement,\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\nimport { useHjmDensityDefault } from \"./provider.js\";\nimport { Surface, Text } from \"./layout.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\nexport type { CardHeadingLevel } from \"@hjmds/design-contracts/components/card\";\nexport type { TagTone } from \"@hjmds/design-contracts/components/tag\";\nexport type BadgeVariant = ContractBadgeVariant;\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> &\n  Readonly<{\n    tone?: BadgeTone;\n    size?: BadgeSize;\n    variant?: BadgeVariant;\n    leading?: ReactNode | ((context: BadgeAdornmentContext) => ReactNode);\n    trailing?: ReactNode | ((context: BadgeAdornmentContext) => ReactNode);\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  {\n    tone = badgeRecipe.defaults.tone,\n    size = badgeRecipe.defaults.size,\n    variant = badgeRecipe.defaults.variant,\n    leading,\n    trailing,\n    className,\n    children,\n    layoutStyle,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const iconContext = { color: \"currentColor\", size: badgeRecipe.sizes[size].iconSize };\n  return (\n    <span\n      {...props}\n      style={{ ...style, ...layoutStyle }}\n      ref={ref}\n      className={classNames(\"hjm-badge\", className)}\n      data-tone={tone}\n      data-size={size}\n      data-variant={variant}\n    >\n      {leading === undefined ? null : (\n        <span aria-hidden=\"true\" className=\"hjm-badge__icon\">\n          {typeof leading === \"function\" ? leading(iconContext) : leading}\n        </span>\n      )}\n      <span className=\"hjm-badge__label\">{children}</span>\n      {trailing === undefined ? null : (\n        <span aria-hidden=\"true\" className=\"hjm-badge__icon\">{typeof trailing === \"function\" ? trailing(iconContext) : trailing}</span>\n      )}\n    </span>\n  );\n});\n\nexport type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> &\n  Readonly<{\n    children: string;\n    tone?: TagTone;\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  { children, tone, className, layoutStyle, style, ...props },\n  ref,\n) {\n  const descriptor = resolveTagDescriptor({\n    label: children,\n    ...(tone === undefined ? {} : { tone }),\n  });\n  return (\n    <span\n      {...props}\n      style={{ ...style, ...layoutStyle }}\n      ref={ref}\n      className={classNames(\"hjm-tag\", className)}\n      data-tone={descriptor.tone}\n    >\n      <span className=\"hjm-tag__label\">{descriptor.label}</span>\n    </span>\n  );\n});\n\nexport type CardProps = Omit<HTMLAttributes<HTMLElement>, \"title\"> &\n  Readonly<{\n    title?: ReactNode;\n    description?: ReactNode;\n    leading?: ReactNode;\n    media?: ReactNode;\n    /** Decorative artwork behind the shared body/actions; its host determines the available height. */\n    backgroundMedia?: ReactNode;\n    /** Platform gesture/accessibility host behind content. Requires backgroundMedia; never put metadata/actions here. */\n    backgroundInteraction?: ReactNode;\n    /** Non-interactive cover classification at the shared top/end inset. Requires backgroundMedia. */\n    mediaBadges?: ReactNode;\n    badges?: ReactNode;\n    /** Centre short metadata beneath artwork without product-owned badge layout. */\n    badgesAlign?: \"start\" | \"center\";\n    /** Activate only the passive cover; other card content/actions keep independent targets. */\n    mediaAction?: Readonly<{ label: string; onActivate(): void; icon?: (context: Readonly<{ color: string; size: number }>) => ReactNode }>;\n    actions?: ReactNode;\n    /** Independent commands at the header end; never nested in whole-card activation. */\n    headerActions?: ReactNode;\n    headingLevel?: CardHeadingLevel;\n    selected?: boolean;\n    /**\n     * Whole-card activation. With `actions`, the card stays an article and a separate full-card button sits under the\n     * action region, so actions remain independent buttons (never a button inside a button). Keep other children passive.\n     */\n    onActivate?: () => void;\n    /** A native anchor preserves new-tab, copy-link and browser previews; it is exclusive with onActivate. */\n    href?: string;\n    /** Framework routing and product effects can wrap the shared anchor without replacing its placement. */\n    renderLink?: (props: React.ComponentPropsWithRef<\"a\">) => ReactNode;\n    disabled?: boolean;\n    tone?: SurfaceTone;\n    bordered?: boolean;\n    padding?: SurfacePadding;\n    radius?: SurfaceRadius;\n    /** Canonical layout-only placement; forwarded to the root Surface, which applies it. */\n    layoutStyle?: HjmCompositionStyleProp;\n  }>;\n\nexport const Card = forwardRef<HTMLElement, CardProps>(function Card(\n  {\n    title,\n    description,\n    leading,\n    media,\n    backgroundMedia,\n    backgroundInteraction,\n    mediaBadges,\n    badges,\n    badgesAlign = cardRecipe.defaults.badgesAlign,\n    mediaAction,\n    actions,\n    headerActions,\n    headingLevel = cardRecipe.defaults.headingLevel,\n    // An omitted selection is an ordinary action, not an unpressed toggle.\n    selected,\n    onActivate, href, renderLink,\n    disabled = false,\n    tone = cardRecipe.defaults.tone,\n    bordered = cardRecipe.defaults.bordered,\n    padding = cardRecipe.defaults.padding,\n    radius,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  if (href !== undefined && (!href.trim() || onActivate)) throw new TypeError(\"Card href requires a destination and cannot combine with onActivate\");\n  if (renderLink && href === undefined) throw new TypeError(\"Card renderLink requires href\");\n  if ((onActivate || href !== undefined) && !props[\"aria-label\"]?.trim()) {\n    throw new TypeError(\"Interactive Card requires aria-label\");\n  }\n  if (mediaAction && (onActivate || href !== undefined || !media || !mediaAction.label.trim())) throw new TypeError(\"Card mediaAction requires passive media, a label, and no whole-card activation\");\n  if (backgroundMedia && (media || mediaAction || onActivate || href !== undefined)) throw new TypeError(\"Card backgroundMedia is decorative and cannot combine with media, mediaAction, onActivate or href\");\n  if ((backgroundInteraction !== undefined || mediaBadges !== undefined) && !backgroundMedia) throw new TypeError(\"Card backgroundInteraction/mediaBadges require backgroundMedia\");\n  const hasHeader =\n    leading !== undefined || title !== undefined || description !== undefined || headerActions !== undefined;\n  // Whole-card open plus separate commands (2026-10-18 unairplane journey card: open + delete). A root button cannot\n  // contain the action buttons, so the root stays an article and an overlay button carries the card's name and state.\n  const overlay = href !== undefined || (onActivate !== undefined && Boolean(actions || headerActions));\n  const { \"aria-label\": activationLabel, ...rootProps } = props;\n  const activate = () => { if (!disabled) onActivate?.(); };\n\n  const linkProps: React.ComponentPropsWithRef<\"a\"> = {\n    href: disabled ? undefined : href, role: \"link\", className: \"hjm-card__activator\",\n    \"aria-label\": activationLabel, \"aria-disabled\": disabled || undefined, tabIndex: disabled ? -1 : undefined,\n  };\n  // Link activation belongs to the shared card; a product-owned stretched link was its own second layout (Diairy).\n  const destination = href === undefined ? null : !disabled && renderLink ? renderLink(linkProps) : <a {...linkProps} />;\n  return (\n    <Surface\n      {...(overlay ? rootProps : props)}\n      ref={ref}\n      as={onActivate && !overlay ? \"button\" : \"article\"}\n      {...(onActivate && !overlay ? {\n        type: \"button\" as const, disabled, \"aria-pressed\": selected,\n        \"data-interactive\": true, onClick: activate,\n      } : {})}\n      {...(overlay ? { \"data-activation\": \"overlay\" } : {})}\n      tone={selected ? cardRecipe.selectedTone : tone}\n      bordered={bordered}\n      {...(radius === undefined ? {} : { radius })}\n      className={classNames(\"hjm-card\", className)}\n      data-background-media={backgroundMedia ? true : undefined}\n      data-state={(onActivate || href !== undefined || mediaAction) && disabled ? \"disabled\" : selected ? \"selected\" : \"idle\"}\n      style={{ \"--hjm-card-background-scrim\": cardRecipe.backgroundMedia.scrim, \"--hjm-card-background-foreground\": cardRecipe.backgroundMedia.foreground, \"--hjm-card-disabled-opacity\": cardRecipe.interaction.disabledOpacity,\n        \"--hjm-card-pressed-opacity\": cardRecipe.interaction.pressedOpacity, ...props.style } as CSSProperties}\n    >\n      {backgroundMedia ? <div className=\"hjm-card__background\" aria-hidden=\"true\">{backgroundMedia}<span className=\"hjm-card__scrim\" /></div> : null}\n      {backgroundInteraction === undefined ? null : <div className=\"hjm-card__background-interaction\" data-slot=\"background-interaction\">{backgroundInteraction}</div>}\n      {mediaBadges === undefined ? null : <div className=\"hjm-card__media-badges\" data-slot=\"media-badges\">{mediaBadges}</div>}\n      {media ? <div className=\"hjm-card__media\" data-slot=\"media\">{mediaAction ? <button type=\"button\" className=\"hjm-card__media-action\" aria-label={mediaAction.label} disabled={disabled} onClick={() => { if (!disabled) mediaAction.onActivate(); }}>\n        {media}\n        {mediaAction.icon ? <span className=\"hjm-card__media-icon\" aria-hidden=\"true\" style={{ insetInlineEnd: cardRecipe.mediaAction.inset, insetBlockEnd: cardRecipe.mediaAction.inset, width: cardRecipe.mediaAction.diameter, height: cardRecipe.mediaAction.diameter }}>{mediaAction.icon({ color: \"currentColor\", size: cardRecipe.mediaAction.iconSize })}</span> : null}\n      </button> : media}</div> : null}\n      <div\n        className=\"hjm-card__body\"\n        data-slot=\"body\"\n        style={{ padding: surfaceGeometry.paddings[padding] }}\n      >\n        {badges === undefined ? null : <div className=\"hjm-card__badges\" data-slot=\"badges\" data-align={badgesAlign}>{badges}</div>}\n        {hasHeader ? (\n          <div className=\"hjm-card__header\" data-slot=\"header\">\n            {leading === undefined ? null : (\n              <span className=\"hjm-card__leading\" data-slot=\"leading\">\n                {leading}\n              </span>\n            )}\n            <div className=\"hjm-card__copy\">\n              {title === undefined\n                ? null\n                : createElement(\n                    `h${headingLevel}`,\n                    { className: \"hjm-card__title\", \"data-slot\": \"title\" },\n                    title,\n                  )}\n              {description === undefined ? null : (\n                <Text\n                  as=\"p\"\n                  tone=\"muted\"\n                  className=\"hjm-card__description\"\n                  data-slot=\"description\"\n                >\n                  {description}\n                </Text>\n              )}\n            </div>\n            {headerActions === undefined ? null : <div className=\"hjm-card__header-actions\" data-slot=\"header-actions\">{headerActions}</div>}\n          </div>\n        ) : null}\n        {children === undefined ? null : (\n          <div className=\"hjm-card__content\" data-slot=\"content\">{children}</div>\n        )}\n      </div>\n      {destination}\n      {overlay && href === undefined ? (\n        <button\n          type=\"button\"\n          className=\"hjm-card__activator\"\n          data-slot=\"activator\"\n          aria-label={activationLabel}\n          aria-pressed={selected}\n          disabled={disabled}\n          onClick={activate}\n        />\n      ) : null}\n      {actions ? <div className=\"hjm-card__actions\" data-slot=\"actions\">{actions}</div> : null}\n    </Surface>\n  );\n});\n\n/** An attributed quotation reuses Card material while keeping quotation semantics and its caption together. */\nexport type QuoteCardProps = Omit<HTMLAttributes<HTMLElement>, \"children\" | \"title\"> & Readonly<{\n  children: ReactNode;\n  attribution?: string;\n  renderMark?: (context: { color: string; size: number }) => ReactNode;\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport function QuoteCard({ children, attribution, renderMark, ...props }: QuoteCardProps) {\n  return <Card {...props} leading={<span className=\"hjm-quote-card__mark\" aria-hidden=\"true\">{renderMark?.({ color: \"currentColor\", size: cardRecipe.quotation.markSize }) ?? \"“\"}</span>}>\n    <blockquote className=\"hjm-quote-card__body\">\n      {children}\n      {attribution === undefined ? null : <footer><Text variant=\"caption\" tone=\"muted\">{attribution}</Text></footer>}\n    </blockquote>\n  </Card>;\n}\n\nexport type ListRowProps = Omit<HTMLAttributes<HTMLElement>, \"title\" | \"onClick\"> &\n  Readonly<{\n    title: ReactNode;\n    description?: ReactNode;\n    leading?: ReactNode;\n    trailing?: ReactNode;\n    /** Independent command outside the row's navigation target. */\n    trailingAction?: ReactNode;\n    /** Supply a framework Link without replacing the shared row layout. */\n    renderLink?: (props: React.ComponentPropsWithRef<\"a\">) => ReactNode;\n    density?: ListRowDensity;\n    /** Semantic emphasis for destructive destinations; selection stays independent. */\n    tone?: keyof typeof listRowRecipe.tones;\n    /** Frame the ListRow paints around `leading`; the recipe owns its size. */\n    leadingShape?: ListRowLeadingShape;\n    selected?: boolean;\n    disabled?: boolean;\n    /**\n     * Placeholder row while the real one loads. It keeps the row's own height\n     * and slot geometry, so a list does not jump when the content arrives —\n     * which is exactly what a product-owned skeleton next to the list cannot do.\n     */\n    loading?: boolean;\n    /** Localized status text announced while `loading`. */\n    loadingLabel?: string;\n    href?: string;\n    onClick?: MouseEventHandler<HTMLElement>;\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const ListRow = forwardRef<HTMLElement, ListRowProps>(function ListRow(\n  {\n    title,\n    description,\n    leading,\n    trailing,\n    trailingAction,\n    renderLink,\n    density: densityProp,\n    tone = listRowRecipe.defaults.tone,\n    leadingShape = \"square\",\n    selected,\n    disabled = false,\n    loading = false,\n    loadingLabel,\n    href,\n    onClick,\n    className,\n    layoutStyle,\n    style,\n    ...props\n  },\n  ref,\n) {\n  // The hook runs unconditionally — `??` would short-circuit it and break the\n  // rules of hooks on the very first row that passes `density`.\n  const densityDefault = useHjmDensityDefault({\n    comfortable: listRowRecipe.defaults.density,\n    compact: \"compact\",\n  });\n  const density = densityProp ?? densityDefault;\n  if (loading) {\n    // A loading row is never interactive: there is nothing to activate yet.\n    return (\n      <div\n        {...props}\n        ref={ref as React.Ref<HTMLDivElement>}\n        role={loadingLabel ? \"status\" : undefined}\n        aria-busy={loadingLabel ? true : undefined}\n        aria-hidden={loadingLabel ? undefined : true}\n        aria-label={loadingLabel}\n        className={classNames(\"hjm-list-row\", \"hjm-list-row--loading\", className)}\n        data-density={density}\n        data-leading={leading ? \"\" : undefined}\n        data-lines={description ? \"two\" : \"one\"}\n        data-state=\"loading\"\n        style={{ ...style, ...layoutStyle }}\n      >\n        {leading ? <span className=\"hjm-list-row__leading\" data-shape={leadingShape} data-placeholder=\"\" /> : null}\n        <span className=\"hjm-list-row__content\">\n          <span className=\"hjm-list-row__title\" data-placeholder=\"\" style={{ width: `${listRowRecipe.loading.titleWidthPercent}%` }} />\n          {description ? <span className=\"hjm-list-row__description\" data-placeholder=\"\" style={{ width: `${listRowRecipe.loading.descriptionWidthPercent}%` }} /> : null}\n        </span>\n        {trailing ? <span className=\"hjm-list-row__trailing\" data-placeholder=\"\" style={{ width: listRowRecipe.loading.trailingWidth }} /> : null}\n      </div>\n    );\n  }\n  const element = href ? \"a\" : onClick ? \"button\" : \"div\";\n  const interactiveProps = href\n    ? {\n        href: disabled ? undefined : href,\n        \"aria-current\": selected ? (\"page\" as const) : undefined,\n        \"aria-disabled\": disabled || undefined,\n        tabIndex: disabled ? -1 : undefined,\n      }\n    : onClick\n      ? {\n          type: \"button\" as const,\n          onClick: disabled ? undefined : onClick,\n          disabled,\n          \"aria-pressed\": selected,\n        }\n      : {};\n\n  const row = createElement(\n    element,\n    {\n      ...props,\n      ...interactiveProps,\n      ref,\n      className: classNames(\"hjm-list-row\", className),\n      \"data-density\": density,\n      // Exposes the text column to the enclosing List: its indented separator starts after the leading frame\n      // (listRecipe.separators.indented.leadingInsetStart) only when this row has one.\n      \"data-leading\": leading ? \"\" : undefined,\n      \"data-tone\": tone,\n      // One- and two-line rows have different minimum heights in the recipe;\n      // the web renderer used a single hardcoded value until now.\n      \"data-lines\": description ? \"two\" : \"one\",\n      \"data-state\": disabled ? \"disabled\" : selected ? \"selected\" : \"idle\",\n      // Placement wins over the legacy `style`, matching Surface's ordering.\n      // With trailingAction the frame is the placed root, as Native's outer View.\n      style: trailingAction ? style : { ...style, ...layoutStyle },\n    },\n    leading\n      ? <span className=\"hjm-list-row__leading\" data-shape={leadingShape}>{leading}</span>\n      : null,\n    <span className=\"hjm-list-row__content\">\n      <span className=\"hjm-list-row__title\">{title}</span>\n      {description ? (\n        <span className=\"hjm-list-row__description\">{description}</span>\n      ) : null}\n    </span>,\n    trailing ? <span className=\"hjm-list-row__trailing\">{trailing}</span> : null,\n  );\n  const linked = href && renderLink ? renderLink(row.props as React.ComponentPropsWithRef<\"a\">) : row;\n  // The frame owns the row surface and its bleed so the command and the separate action share one fill, as Native;\n  // the action stays outside the link/button (styles.css `.hjm-list-row-frame`).\n  return trailingAction ? (\n    <div className=\"hjm-list-row-frame\" data-density={density} data-leading={leading ? \"\" : undefined}\n      data-state={disabled ? \"disabled\" : selected ? \"selected\" : \"idle\"} style={layoutStyle}>\n      {linked}\n      <div className=\"hjm-list-row__action\">{trailingAction}</div>\n    </div>\n  ) : linked;\n});\n"]}
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../src/display.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport {\n  badgeRecipe,\n  listRowRecipe,\n  type BadgeAdornmentContext,\n  type BadgeSize,\n  type BadgeTone,\n  type BadgeVariant as ContractBadgeVariant,\n  resolveBadgeCategoryColor,\n  validateListRowTrailingAccessory,\n  type BadgeCategoryColor,\n  type ListRowDensity,\n  type ListRowLeadingShape,\n  type ListRowTrailingAccessory,\n} from \"@hjmds/design-contracts/recipes\";\nimport { THEMES } from \"@hjmds/design-contracts/colors\";\nimport { glyph } from \"@hjmds/design-contracts/foundations\";\nimport {\n  resolveTagDescriptor,\n  type TagTone,\n} from \"@hjmds/design-contracts/components/tag\";\nimport {\n  cardRecipe,\n  type CardHeadingLevel,\n} from \"@hjmds/design-contracts/components/card\";\nimport {\n  surfaceGeometry,\n  type SurfacePadding,\n  type SurfaceRadius,\n  type SurfaceTone,\n} from \"@hjmds/design-contracts/recipes/base\";\nimport {\n  createElement,\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\nimport { useHjmDensityDefault, useOptionalHjmTheme } from \"./provider.js\";\nimport { Surface, Text } from \"./layout.js\";\nimport { Icon } from \"./supplemental-display.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\nexport type { CardHeadingLevel } from \"@hjmds/design-contracts/components/card\";\nexport type { TagTone } from \"@hjmds/design-contracts/components/tag\";\nexport type BadgeVariant = ContractBadgeVariant;\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> &\n  Readonly<{\n    tone?: BadgeTone;\n    /**\n     * Product classification color per theme (series, grade…) in place of `tone`. HJM keeps the frame and picks the\n     * label ink; a color whose label cannot reach AA 4.5 throws instead of rendering unreadable.\n     */\n    categoryColor?: BadgeCategoryColor;\n    size?: BadgeSize;\n    variant?: BadgeVariant;\n    leading?: ReactNode | ((context: BadgeAdornmentContext) => ReactNode);\n    trailing?: ReactNode | ((context: BadgeAdornmentContext) => ReactNode);\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  {\n    tone: toneProp,\n    categoryColor,\n    size = badgeRecipe.defaults.size,\n    variant = badgeRecipe.defaults.variant,\n    leading,\n    trailing,\n    className,\n    children,\n    layoutStyle,\n    style,\n    ...props\n  },\n  ref,\n) {\n  if (categoryColor !== undefined && toneProp !== undefined) throw new TypeError(\"Badge takes either tone or categoryColor, not both\");\n  const tone = toneProp ?? badgeRecipe.defaults.tone;\n  // Outside a provider the stylesheet paints the light palette, so the category resolves against it too.\n  const theme = useOptionalHjmTheme();\n  const category = categoryColor === undefined ? null : resolveBadgeCategoryColor(categoryColor, {\n    theme: theme?.environment.theme ?? \"light\",\n    variant,\n    palette: theme?.palette.theme ?? THEMES.light,\n  });\n  const iconContext = { color: \"currentColor\", size: badgeRecipe.sizes[size].iconSize, strokeWidth: badgeRecipe.iconStrokeWidth };\n  return (\n    <span\n      {...props}\n      style={{\n        ...style,\n        ...(category ? {\n          \"--hjm-badge-category-content\": category.content,\n          \"--hjm-badge-category-background\": category.background ?? \"transparent\",\n          \"--hjm-badge-category-border\": category.border ?? \"transparent\",\n        } as CSSProperties : {}),\n        ...layoutStyle,\n      }}\n      ref={ref}\n      className={classNames(\"hjm-badge\", className)}\n      data-tone={category ? \"category\" : tone}\n      data-size={size}\n      data-variant={variant}\n    >\n      {leading === undefined ? null : (\n        <span aria-hidden=\"true\" className=\"hjm-badge__icon\">\n          {typeof leading === \"function\" ? leading(iconContext) : leading}\n        </span>\n      )}\n      <span className=\"hjm-badge__label\">{children}</span>\n      {trailing === undefined ? null : (\n        <span aria-hidden=\"true\" className=\"hjm-badge__icon\">{typeof trailing === \"function\" ? trailing(iconContext) : trailing}</span>\n      )}\n    </span>\n  );\n});\n\nexport type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> &\n  Readonly<{\n    children: string;\n    tone?: TagTone;\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  { children, tone, className, layoutStyle, style, ...props },\n  ref,\n) {\n  const descriptor = resolveTagDescriptor({\n    label: children,\n    ...(tone === undefined ? {} : { tone }),\n  });\n  return (\n    <span\n      {...props}\n      style={{ ...style, ...layoutStyle }}\n      ref={ref}\n      className={classNames(\"hjm-tag\", className)}\n      data-tone={descriptor.tone}\n    >\n      <span className=\"hjm-tag__label\">{descriptor.label}</span>\n    </span>\n  );\n});\n\nexport type CardProps = Omit<HTMLAttributes<HTMLElement>, \"title\"> &\n  Readonly<{\n    title?: ReactNode;\n    description?: ReactNode;\n    leading?: ReactNode;\n    media?: ReactNode;\n    /** Decorative artwork behind the shared body/actions; its host determines the available height. */\n    backgroundMedia?: ReactNode;\n    /** Platform gesture/accessibility host behind content. Requires backgroundMedia; never put metadata/actions here. */\n    backgroundInteraction?: ReactNode;\n    /** Non-interactive cover classification at the shared top/end inset. Requires backgroundMedia. */\n    mediaBadges?: ReactNode;\n    badges?: ReactNode;\n    /** Centre short metadata beneath artwork without product-owned badge layout. */\n    badgesAlign?: \"start\" | \"center\";\n    /** Activate only the passive cover; other card content/actions keep independent targets. */\n    mediaAction?: Readonly<{ label: string; onActivate(): void; icon?: (context: Readonly<{ color: string; size: number }>) => ReactNode }>;\n    actions?: ReactNode;\n    /** Independent commands at the header end; never nested in whole-card activation. */\n    headerActions?: ReactNode;\n    headingLevel?: CardHeadingLevel;\n    selected?: boolean;\n    /**\n     * Whole-card activation. With `actions`, the card stays an article and a separate full-card button sits under the\n     * action region, so actions remain independent buttons (never a button inside a button). Keep other children passive.\n     */\n    onActivate?: () => void;\n    /** A native anchor preserves new-tab, copy-link and browser previews; it is exclusive with onActivate. */\n    href?: string;\n    /** Framework routing and product effects can wrap the shared anchor without replacing its placement. */\n    renderLink?: (props: React.ComponentPropsWithRef<\"a\">) => ReactNode;\n    disabled?: boolean;\n    tone?: SurfaceTone;\n    bordered?: boolean;\n    padding?: SurfacePadding;\n    radius?: SurfaceRadius;\n    /** Canonical layout-only placement; forwarded to the root Surface, which applies it. */\n    layoutStyle?: HjmCompositionStyleProp;\n  }>;\n\nexport const Card = forwardRef<HTMLElement, CardProps>(function Card(\n  {\n    title,\n    description,\n    leading,\n    media,\n    backgroundMedia,\n    backgroundInteraction,\n    mediaBadges,\n    badges,\n    badgesAlign = cardRecipe.defaults.badgesAlign,\n    mediaAction,\n    actions,\n    headerActions,\n    headingLevel = cardRecipe.defaults.headingLevel,\n    // An omitted selection is an ordinary action, not an unpressed toggle.\n    selected,\n    onActivate, href, renderLink,\n    disabled = false,\n    tone = cardRecipe.defaults.tone,\n    bordered = cardRecipe.defaults.bordered,\n    padding = cardRecipe.defaults.padding,\n    radius,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  if (href !== undefined && (!href.trim() || onActivate)) throw new TypeError(\"Card href requires a destination and cannot combine with onActivate\");\n  if (renderLink && href === undefined) throw new TypeError(\"Card renderLink requires href\");\n  if ((onActivate || href !== undefined) && !props[\"aria-label\"]?.trim()) {\n    throw new TypeError(\"Interactive Card requires aria-label\");\n  }\n  if (mediaAction && (onActivate || href !== undefined || !media || !mediaAction.label.trim())) throw new TypeError(\"Card mediaAction requires passive media, a label, and no whole-card activation\");\n  if (backgroundMedia && (media || mediaAction || onActivate || href !== undefined)) throw new TypeError(\"Card backgroundMedia is decorative and cannot combine with media, mediaAction, onActivate or href\");\n  if ((backgroundInteraction !== undefined || mediaBadges !== undefined) && !backgroundMedia) throw new TypeError(\"Card backgroundInteraction/mediaBadges require backgroundMedia\");\n  const hasHeader =\n    leading !== undefined || title !== undefined || description !== undefined || headerActions !== undefined;\n  // Whole-card open plus separate commands (2026-10-18 unairplane journey card: open + delete). A root button cannot\n  // contain the action buttons, so the root stays an article and an overlay button carries the card's name and state.\n  const overlay = href !== undefined || (onActivate !== undefined && Boolean(actions || headerActions));\n  const { \"aria-label\": activationLabel, ...rootProps } = props;\n  const activate = () => { if (!disabled) onActivate?.(); };\n\n  const linkProps: React.ComponentPropsWithRef<\"a\"> = {\n    href: disabled ? undefined : href, role: \"link\", className: \"hjm-card__activator\",\n    \"aria-label\": activationLabel, \"aria-disabled\": disabled || undefined, tabIndex: disabled ? -1 : undefined,\n  };\n  // Link activation belongs to the shared card; a product-owned stretched link was its own second layout (Diairy).\n  const destination = href === undefined ? null : !disabled && renderLink ? renderLink(linkProps) : <a {...linkProps} />;\n  return (\n    <Surface\n      {...(overlay ? rootProps : props)}\n      ref={ref}\n      as={onActivate && !overlay ? \"button\" : \"article\"}\n      {...(onActivate && !overlay ? {\n        type: \"button\" as const, disabled, \"aria-pressed\": selected,\n        \"data-interactive\": true, onClick: activate,\n      } : {})}\n      {...(overlay ? { \"data-activation\": \"overlay\" } : {})}\n      tone={selected ? cardRecipe.selectedTone : tone}\n      bordered={bordered}\n      {...(radius === undefined ? {} : { radius })}\n      className={classNames(\"hjm-card\", className)}\n      data-background-media={backgroundMedia ? true : undefined}\n      data-state={(onActivate || href !== undefined || mediaAction) && disabled ? \"disabled\" : selected ? \"selected\" : \"idle\"}\n      style={{ \"--hjm-card-background-scrim\": cardRecipe.backgroundMedia.scrim, \"--hjm-card-background-foreground\": cardRecipe.backgroundMedia.foreground, \"--hjm-card-disabled-opacity\": cardRecipe.interaction.disabledOpacity,\n        \"--hjm-card-pressed-opacity\": cardRecipe.interaction.pressedOpacity, ...props.style } as CSSProperties}\n    >\n      {backgroundMedia ? <div className=\"hjm-card__background\" aria-hidden=\"true\">{backgroundMedia}<span className=\"hjm-card__scrim\" /></div> : null}\n      {backgroundInteraction === undefined ? null : <div className=\"hjm-card__background-interaction\" data-slot=\"background-interaction\">{backgroundInteraction}</div>}\n      {mediaBadges === undefined ? null : <div className=\"hjm-card__media-badges\" data-slot=\"media-badges\">{mediaBadges}</div>}\n      {media ? <div className=\"hjm-card__media\" data-slot=\"media\">{mediaAction ? <button type=\"button\" className=\"hjm-card__media-action\" aria-label={mediaAction.label} disabled={disabled} onClick={() => { if (!disabled) mediaAction.onActivate(); }}>\n        {media}\n        {mediaAction.icon ? <span className=\"hjm-card__media-icon\" aria-hidden=\"true\" style={{ insetInlineEnd: cardRecipe.mediaAction.inset, insetBlockEnd: cardRecipe.mediaAction.inset, width: cardRecipe.mediaAction.diameter, height: cardRecipe.mediaAction.diameter }}>{mediaAction.icon({ color: \"currentColor\", size: cardRecipe.mediaAction.iconSize })}</span> : null}\n      </button> : media}</div> : null}\n      <div\n        className=\"hjm-card__body\"\n        data-slot=\"body\"\n        style={{ padding: surfaceGeometry.paddings[padding] }}\n      >\n        {badges === undefined ? null : <div className=\"hjm-card__badges\" data-slot=\"badges\" data-align={badgesAlign}>{badges}</div>}\n        {hasHeader ? (\n          <div className=\"hjm-card__header\" data-slot=\"header\">\n            {leading === undefined ? null : (\n              <span className=\"hjm-card__leading\" data-slot=\"leading\">\n                {leading}\n              </span>\n            )}\n            <div className=\"hjm-card__copy\">\n              {title === undefined\n                ? null\n                : createElement(\n                    `h${headingLevel}`,\n                    { className: \"hjm-card__title\", \"data-slot\": \"title\" },\n                    title,\n                  )}\n              {description === undefined ? null : (\n                <Text\n                  as=\"p\"\n                  tone=\"muted\"\n                  className=\"hjm-card__description\"\n                  data-slot=\"description\"\n                >\n                  {description}\n                </Text>\n              )}\n            </div>\n            {headerActions === undefined ? null : <div className=\"hjm-card__header-actions\" data-slot=\"header-actions\">{headerActions}</div>}\n          </div>\n        ) : null}\n        {children === undefined ? null : (\n          <div className=\"hjm-card__content\" data-slot=\"content\">{children}</div>\n        )}\n      </div>\n      {destination}\n      {overlay && href === undefined ? (\n        <button\n          type=\"button\"\n          className=\"hjm-card__activator\"\n          data-slot=\"activator\"\n          aria-label={activationLabel}\n          aria-pressed={selected}\n          disabled={disabled}\n          onClick={activate}\n        />\n      ) : null}\n      {actions ? <div className=\"hjm-card__actions\" data-slot=\"actions\">{actions}</div> : null}\n    </Surface>\n  );\n});\n\n/** An attributed quotation reuses Card material while keeping quotation semantics and its caption together. */\nexport type QuoteCardProps = Omit<HTMLAttributes<HTMLElement>, \"children\" | \"title\"> & Readonly<{\n  children: ReactNode;\n  attribution?: string;\n  renderMark?: (context: { color: string; size: number }) => ReactNode;\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport function QuoteCard({ children, attribution, renderMark, ...props }: QuoteCardProps) {\n  return <Card {...props} leading={<span className=\"hjm-quote-card__mark\" aria-hidden=\"true\">{renderMark?.({ color: \"currentColor\", size: cardRecipe.quotation.markSize }) ?? \"“\"}</span>}>\n    <blockquote className=\"hjm-quote-card__body\">\n      {children}\n      {attribution === undefined ? null : <footer><Text variant=\"caption\" tone=\"muted\">{attribution}</Text></footer>}\n    </blockquote>\n  </Card>;\n}\n\nexport type ListRowProps = Omit<HTMLAttributes<HTMLElement>, \"title\" | \"onClick\"> &\n  Readonly<{\n    title: ReactNode;\n    description?: ReactNode;\n    leading?: ReactNode;\n    trailing?: ReactNode;\n    /**\n     * `disclosure`: the row opens another screen. HJM draws the decorative chevron after `trailing`, inside the row\n     * command (before any `trailingAction`), mirrored in RTL; size and color come from `listRowRecipe.accessories`.\n     */\n    trailingAccessory?: ListRowTrailingAccessory;\n    /** Independent command outside the row's navigation target. */\n    trailingAction?: ReactNode;\n    /** Supply a framework Link without replacing the shared row layout. */\n    renderLink?: (props: React.ComponentPropsWithRef<\"a\">) => ReactNode;\n    density?: ListRowDensity;\n    /** Semantic emphasis for destructive destinations; selection stays independent. */\n    tone?: keyof typeof listRowRecipe.tones;\n    /** Frame the ListRow paints around `leading`; the recipe owns its size. */\n    leadingShape?: ListRowLeadingShape;\n    selected?: boolean;\n    disabled?: boolean;\n    /**\n     * Placeholder row while the real one loads. It keeps the row's own height\n     * and slot geometry, so a list does not jump when the content arrives —\n     * which is exactly what a product-owned skeleton next to the list cannot do.\n     */\n    loading?: boolean;\n    /** Localized status text announced while `loading`. */\n    loadingLabel?: string;\n    href?: string;\n    onClick?: MouseEventHandler<HTMLElement>;\n      /** Canonical layout-only placement. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nexport const ListRow = forwardRef<HTMLElement, ListRowProps>(function ListRow(\n  {\n    title,\n    description,\n    leading,\n    trailing,\n    trailingAccessory = listRowRecipe.defaults.trailingAccessory,\n    trailingAction,\n    renderLink,\n    density: densityProp,\n    tone = listRowRecipe.defaults.tone,\n    leadingShape = \"square\",\n    selected,\n    disabled = false,\n    loading = false,\n    loadingLabel,\n    href,\n    onClick,\n    className,\n    layoutStyle,\n    style,\n    ...props\n  },\n  ref,\n) {\n  // The hook runs unconditionally — `??` would short-circuit it and break the\n  // rules of hooks on the very first row that passes `density`.\n  const densityDefault = useHjmDensityDefault({\n    comfortable: listRowRecipe.defaults.density,\n    compact: \"compact\",\n  });\n  const density = densityProp ?? densityDefault;\n  validateListRowTrailingAccessory(trailingAccessory);\n  const accessory = trailingAccessory === \"none\" ? null : listRowRecipe.accessories[trailingAccessory];\n  if (loading) {\n    // A loading row is never interactive: there is nothing to activate yet.\n    return (\n      <div\n        {...props}\n        ref={ref as React.Ref<HTMLDivElement>}\n        role={loadingLabel ? \"status\" : undefined}\n        aria-busy={loadingLabel ? true : undefined}\n        aria-hidden={loadingLabel ? undefined : true}\n        aria-label={loadingLabel}\n        className={classNames(\"hjm-list-row\", \"hjm-list-row--loading\", className)}\n        data-density={density}\n        data-leading={leading ? \"\" : undefined}\n        data-lines={description ? \"two\" : \"one\"}\n        data-state=\"loading\"\n        style={{ ...style, ...layoutStyle }}\n      >\n        {leading ? <span className=\"hjm-list-row__leading\" data-shape={leadingShape} data-placeholder=\"\" /> : null}\n        <span className=\"hjm-list-row__content\">\n          <span className=\"hjm-list-row__title\" data-placeholder=\"\" style={{ width: `${listRowRecipe.loading.titleWidthPercent}%` }} />\n          {description ? <span className=\"hjm-list-row__description\" data-placeholder=\"\" style={{ width: `${listRowRecipe.loading.descriptionWidthPercent}%` }} /> : null}\n        </span>\n        {trailing ? <span className=\"hjm-list-row__trailing\" data-placeholder=\"\" style={{ width: listRowRecipe.loading.trailingWidth }} /> : null}\n        {/* Keep the accessory's box so the text column does not shift when the real row arrives. */}\n        {accessory ? <span className=\"hjm-list-row__accessory\" data-accessory={trailingAccessory} style={{ inlineSize: glyph[accessory.glyph], blockSize: glyph[accessory.glyph] }} /> : null}\n      </div>\n    );\n  }\n  const element = href ? \"a\" : onClick ? \"button\" : \"div\";\n  const interactiveProps = href\n    ? {\n        href: disabled ? undefined : href,\n        \"aria-current\": selected ? (\"page\" as const) : undefined,\n        \"aria-disabled\": disabled || undefined,\n        tabIndex: disabled ? -1 : undefined,\n      }\n    : onClick\n      ? {\n          type: \"button\" as const,\n          onClick: disabled ? undefined : onClick,\n          disabled,\n          \"aria-pressed\": selected,\n        }\n      : {};\n\n  const row = createElement(\n    element,\n    {\n      ...props,\n      ...interactiveProps,\n      ref,\n      className: classNames(\"hjm-list-row\", className),\n      \"data-density\": density,\n      // Exposes the text column to the enclosing List: its indented separator starts after the leading frame\n      // (listRecipe.separators.indented.leadingInsetStart) only when this row has one.\n      \"data-leading\": leading ? \"\" : undefined,\n      \"data-tone\": tone,\n      // One- and two-line rows have different minimum heights in the recipe;\n      // the web renderer used a single hardcoded value until now.\n      \"data-lines\": description ? \"two\" : \"one\",\n      \"data-state\": disabled ? \"disabled\" : selected ? \"selected\" : \"idle\",\n      // Placement wins over the legacy `style`, matching Surface's ordering.\n      // With trailingAction the frame is the placed root, as Native's outer View.\n      style: trailingAction ? style : { ...style, ...layoutStyle },\n    },\n    leading\n      ? <span className=\"hjm-list-row__leading\" data-shape={leadingShape}>{leading}</span>\n      : null,\n    <span className=\"hjm-list-row__content\">\n      <span className=\"hjm-list-row__title\">{title}</span>\n      {description ? (\n        <span className=\"hjm-list-row__description\">{description}</span>\n      ) : null}\n    </span>,\n    trailing ? <span className=\"hjm-list-row__trailing\">{trailing}</span> : null,\n    accessory\n      ? <span className=\"hjm-list-row__accessory\" data-accessory={trailingAccessory} aria-hidden=\"true\">\n          <Icon name={accessory.icon} size={accessory.glyph} weight={accessory.weight} />\n        </span>\n      : null,\n  );\n  const linked = href && renderLink ? renderLink(row.props as React.ComponentPropsWithRef<\"a\">) : row;\n  // The frame owns the row surface and its bleed so the command and the separate action share one fill, as Native;\n  // the action stays outside the link/button (styles.css `.hjm-list-row-frame`).\n  return trailingAction ? (\n    <div className=\"hjm-list-row-frame\" data-density={density} data-leading={leading ? \"\" : undefined}\n      data-state={disabled ? \"disabled\" : selected ? \"selected\" : \"idle\"} style={layoutStyle}>\n      {linked}\n      <div className=\"hjm-list-row__action\">{trailingAction}</div>\n    </div>\n  ) : linked;\n});\n"]}

package/dist/duration-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"duration-field.d.ts","sourceRoot":"","sources":["../src/duration-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,mBAAmB,EAAE,KAAK,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAG3I,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,MAAM,EAAE,mBAAmB,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,uBAAuB,CAAA;CAAE,CAAC,CAAC;AAEnO,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,GAAO,EAAE,GAAG,EAAE,QAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,kBAAkB,+BAazI"}
+{"version":3,"file":"duration-field.d.ts","sourceRoot":"","sources":["../src/duration-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuC,KAAK,mBAAmB,EAAE,KAAK,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAG3I,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,MAAM,EAAE,mBAAmB,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,uBAAuB,CAAA;CAAE,CAAC,CAAC;AAEnO,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,GAAO,EAAE,GAAG,EAAE,QAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,kBAAkB,+BAazI"}

package/dist/duration-field.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { changeDurationUnit, resolveDuration } from "@hjmds/design-contracts/duration-field";
 import { NumberField } from "./number-field.js";

package/dist/duration-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"duration-field.js","sourceRoot":"","sources":["../src/duration-field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAgD,MAAM,wCAAwC,CAAC;AAC3I,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU,CAAC;AACvD,sFAAsF;AACtF,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,EAAE,WAAW,EAAsB;IACxI,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IACnD,OAAO,KAAC,UAAU,IAAC,MAAM,EAAC,QAAQ,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,KAAM,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,EACxJ,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ;YACzC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,KAAK,OAAO,IAAI,GAAG,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,EAC5G,WAAW,EAAE,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE;YACjD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;YAC7C,IAAI,CAAC,IAAI;gBAAE,OAAO,IAAI,CAAC;YACvB,OAAO,KAAC,WAAW,OAAK,YAAY,EAClC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,EACrG,cAAc,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9E,aAAa,EAAE,WAAW,CAAC,CAAC,IAAmB,EAAE,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,GAAI,CAAC;QAChI,CAAC,GAAI,CAAC;AACV,CAAC","sourcesContent":["import { changeDurationUnit, resolveDuration, type DurationFieldLabels, type DurationRange } from \"@hjmds/design-contracts/duration-field\";\nimport { NumberField } from \"./number-field.js\";\nimport { FieldGroup } from \"./field-group.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nexport type DurationFieldProps = DurationRange & Readonly<{ value: number; onValueChange: (seconds: number) => void; labels: DurationFieldLabels; disabled?: boolean; className?: string; layoutStyle?: HjmCompositionStyleProp }>;\nconst units = [\"hours\", \"minutes\", \"seconds\"] as const;\n/** Units and limits remain in seconds; FieldGroup owns grouping and edit lifetime. */\nexport function DurationField({ value, onValueChange, labels, min = 0, max, disabled = false, className, layoutStyle }: DurationFieldProps) {\n  const parts = resolveDuration(value, { min, max });\n  return <FieldGroup layout=\"inline\" {...(className === undefined ? {} : { className })} {...(layoutStyle === undefined ? {} : { layoutStyle: layoutStyle })}\n    descriptor={{ label: labels.label, disabled,\n      fields: units.map(unit => ({ id: unit, label: labels[unit], disabled: unit === \"hours\" && max < 3600 })) }}\n    renderField={({ id, controlProps, guardChange }) => {\n      const unit = units.find(unit => unit === id);\n      if (!unit) return null;\n      return <NumberField {...controlProps}\n        min={0} max={unit === \"hours\" ? Math.max(1, Math.floor(max / 3600)) : 59} value={parts[unit]} step={1}\n        incrementLabel={labels.increment(unit)} decrementLabel={labels.decrement(unit)}\n        onValueChange={guardChange((next: number | null) => onValueChange(changeDurationUnit(value, unit, next, { min, max })))} />;\n    }} />;\n}\n"]}
+{"version":3,"file":"duration-field.js","sourceRoot":"","sources":["../src/duration-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAgD,MAAM,wCAAwC,CAAC;AAC3I,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU,CAAC;AACvD,sFAAsF;AACtF,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,EAAE,WAAW,EAAsB;IACxI,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IACnD,OAAO,KAAC,UAAU,IAAC,MAAM,EAAC,QAAQ,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,KAAM,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,EACxJ,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ;YACzC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,KAAK,OAAO,IAAI,GAAG,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,EAC5G,WAAW,EAAE,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE;YACjD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;YAC7C,IAAI,CAAC,IAAI;gBAAE,OAAO,IAAI,CAAC;YACvB,OAAO,KAAC,WAAW,OAAK,YAAY,EAClC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,EACrG,cAAc,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9E,aAAa,EAAE,WAAW,CAAC,CAAC,IAAmB,EAAE,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,GAAI,CAAC;QAChI,CAAC,GAAI,CAAC;AACV,CAAC","sourcesContent":["\"use client\";\n\nimport { changeDurationUnit, resolveDuration, type DurationFieldLabels, type DurationRange } from \"@hjmds/design-contracts/duration-field\";\nimport { NumberField } from \"./number-field.js\";\nimport { FieldGroup } from \"./field-group.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nexport type DurationFieldProps = DurationRange & Readonly<{ value: number; onValueChange: (seconds: number) => void; labels: DurationFieldLabels; disabled?: boolean; className?: string; layoutStyle?: HjmCompositionStyleProp }>;\nconst units = [\"hours\", \"minutes\", \"seconds\"] as const;\n/** Units and limits remain in seconds; FieldGroup owns grouping and edit lifetime. */\nexport function DurationField({ value, onValueChange, labels, min = 0, max, disabled = false, className, layoutStyle }: DurationFieldProps) {\n  const parts = resolveDuration(value, { min, max });\n  return <FieldGroup layout=\"inline\" {...(className === undefined ? {} : { className })} {...(layoutStyle === undefined ? {} : { layoutStyle: layoutStyle })}\n    descriptor={{ label: labels.label, disabled,\n      fields: units.map(unit => ({ id: unit, label: labels[unit], disabled: unit === \"hours\" && max < 3600 })) }}\n    renderField={({ id, controlProps, guardChange }) => {\n      const unit = units.find(unit => unit === id);\n      if (!unit) return null;\n      return <NumberField {...controlProps}\n        min={0} max={unit === \"hours\" ? Math.max(1, Math.floor(max / 3600)) : 59} value={parts[unit]} step={1}\n        incrementLabel={labels.increment(unit)} decrementLabel={labels.decrement(unit)}\n        onValueChange={guardChange((next: number | null) => onValueChange(changeDurationUnit(value, unit, next, { min, max })))} />;\n    }} />;\n}\n"]}

package/dist/effect-surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"effect-surface.d.ts","sourceRoot":"","sources":["../src/effect-surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAwB,KAAK,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAE5G,OAAO,EAAoC,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACjI,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IAAE,UAAU,CAAC,EAAE,uBAAuB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IACxH,oIAAoI;IACpI,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;oGACgG;IAChG,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAChC,gGAAgG,CAAC,WAAW,CAAC,EAAE,uBAAuB,CAAC;CAAE,CAAC,CAAC;AAC7I,gFAAgF;AAChF,wBAAgB,aAAa,CAAC,EAAE,UAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAgB,EAAE,MAA+B,EAAE,WAAW,EAAE,EAAE,kBAAkB,+BAsDzJ"}
+{"version":3,"file":"effect-surface.d.ts","sourceRoot":"","sources":["../src/effect-surface.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAwB,KAAK,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAE5G,OAAO,EAAoC,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACjI,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IAAE,UAAU,CAAC,EAAE,uBAAuB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IACxH,oIAAoI;IACpI,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;oGACgG;IAChG,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAChC,gGAAgG,CAAC,WAAW,CAAC,EAAE,uBAAuB,CAAC;CAAE,CAAC,CAAC;AAC7I,gFAAgF;AAChF,wBAAgB,aAAa,CAAC,EAAE,UAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAgB,EAAE,MAA+B,EAAE,WAAW,EAAE,EAAE,kBAAkB,+BAsDzJ"}

package/dist/effect-surface.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 import { resolveEffectSurface } from "@hjmds/design-contracts/effect-surface";

package/dist/effect-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"effect-surface.js","sourceRoot":"","sources":["../src/effect-surface.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAgC,MAAM,wCAAwC,CAAC;AAC5G,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,eAAe,EAAE,eAAe,EAA2C,MAAM,sCAAsC,CAAC;AAEjI,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAQ5C,gFAAgF;AAChF,MAAM,UAAU,aAAa,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,GAAG,eAAe,CAAC,MAAM,EAAE,WAAW,EAAsB;IACxJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/C,MAAM,MAAM,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAChD,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACrC,MAAM,IAAI,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAC1B,IAAI,OAAO,oBAAoB,KAAK,WAAW,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAAC,OAAO;QAAC,CAAC;QAC9E,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,cAAc,IAAI,KAAK,CAAC,CAAC,CAAC;QACnG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrE,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,WAAW,CAAC,aAAa,IAAI,CAAC,OAAO,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,UAAU;YAAE,OAAO;QACrI,4EAA4E;QAC5E,yEAAyE;QACzE,IAAI,SAAgC,CAAC;QACrC,IAAI,MAAM,GAAG,KAAK,CAAC;QACnB,MAAM,IAAI,GAAG,GAAG,EAAE;YAAG,SAAS,EAAE,MAAM,EAAE,CAAC;YAAC,IAAI,QAAQ,CAAC,MAAM,IAAI,MAAM;gBAAE,OAAO;YAC9E,6EAA6E;YAC7E,8EAA8E;YAC9E,IAAI,CAAC;gBAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;oBAC/B,EAAE,SAAS,EAAE,gCAAgC,EAAE;oBAC/C,EAAE,SAAS,EAAE,+BAA+B,EAAE;oBAC9C,EAAE,SAAS,EAAE,gCAAgC,EAAE;iBAChD,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;YAAC,CAAC;YAAC,MAAM,CAAC;gBAAC,MAAM,GAAG,IAAI,CAAC;YAAC,CAAC;QAAC,CAAC,CAAC;QAClH,IAAI,EAAE,CAAC;QAAC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAC5D,OAAO,GAAG,EAAE,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAChG,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IACtF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACjF,OAAO,eAAK,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,6BAA0B,EAAE,EAAC,KAAK,EAAE,EAAE,GAAG,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oBAAoB,MAAM,GAAG,EAAE,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,aAClQ,eAAK,GAAG,EAAE,KAAK,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,SAAS,EAAE,aAE9K,yBAAO,MAAM,CAAC,KAAK,IAAI,8BAAE,kBAAS,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,EAAC,gBAAgB,YAAC,gBAAO,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,GAAI,GAAU,EAAA,eAAM,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,gBAAgB,YAAC,eAAM,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,cAAc,GAAI,GAAO,IAAG,GAAQ,EACzb,MAAM,CAAC,KAAK,IAAI,eAAM,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,cAAc,GAAI,EAC9G,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,mBAAmB,EAAC,MAAM,aAChF,2BAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,0BAAgB,EAAE,EAAE,GAAG,EAAE,IAAI,KAAK,EAAE,aAAc,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAE,KAAK,GAAI,EAAA,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,GAAI,KAArG,KAAK,CAAiH,CAAC,EACpM,kBAAS,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,YAAY,EAAC,gBAAgB,YAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,iBAAoB,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,IAAxG,KAAK,CAAuG,CAAC,GAAW,IACpP,EACN,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,kBAAqB,EAAE,EAAE,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAK,GAAG,IAA/E,KAAK,CAA8E,CAAC,EAC1K,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,kBAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAI,EACpG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,eAAM,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,GAAI,IAC1F,IACF,EAEL,MAAM,CAAC,KAAK,IAAI,wCAA2B,OAAO,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,SAAS,EAAE,aACjN,yBAAM,kBAAS,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,YAAY,EAAC,gBAAgB,YAAC,eAAM,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,GAAI,GAAU,GAAO,EAC1P,eAAM,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,GAAI,IAC1D,EACN,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAG,QAAQ,GAAO,IAC9F,CAAC;AACT,CAAC","sourcesContent":["import { useEffect, useId, useRef, useState, type ReactNode } from \"react\";\nimport { resolveEffectSurface, type EffectSurfaceDescriptor } from \"@hjmds/design-contracts/effect-surface\";\nimport { resolveColorReference } from \"@hjmds/design-contracts/color-references\";\nimport { surfaceDefaults, surfaceGeometry, type SurfacePadding, type SurfaceRadius } from \"@hjmds/design-contracts/recipes/base\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nimport { useHjmTheme } from \"./provider.js\";\nexport type EffectSurfaceProps = Readonly<{ descriptor?: EffectSurfaceDescriptor; children: ReactNode; className?: string;\n  /** Content inset inside the decorated area (Surface padding scale). Consumers otherwise wrapped children in raw padded elements. */\n  padding?: SurfacePadding;\n  /** Corner radius of the decorated area. Defaults to the Surface radius so a framed hero clips its\n   * decoration to the same corners as the Surface it wraps; full-bleed canvases pass `\"none\"`. */\n  radius?: SurfaceRadius | \"none\";\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */ layoutStyle?: HjmCompositionStyleProp; }>;\n/** Decorative layers never receive pointer events or own the content's name. */\nexport function EffectSurface({ descriptor = {}, children, className, padding = \"none\", radius = surfaceDefaults.radius, layoutStyle }: EffectSurfaceProps) {\n  const { palette, environment } = useHjmTheme();\n  const effect = resolveEffectSurface(descriptor);\n  const id = useId().replace(/:/g, \"\");\n  const host = useRef<HTMLDivElement>(null);\n  const layer = useRef<SVGSVGElement>(null);\n  const [visible, setVisible] = useState(false);\n  const hasAtmosphere = effect.layers.some(value => value !== \"ruled\");\n  useEffect(() => {\n    if (!host.current) return;\n    if (typeof IntersectionObserver === \"undefined\") { setVisible(true); return; }\n    const observer = new IntersectionObserver(([entry]) => setVisible(entry?.isIntersecting ?? false));\n    observer.observe(host.current); return () => observer.disconnect();\n  }, []);\n  useEffect(() => {\n    const node = layer.current;\n    if (!node || !hasAtmosphere || !effect.active || environment.reducedMotion || !visible || typeof node.animate !== \"function\") return;\n    // WAAPI stays outside React renders; visibility changes cancel the loop and\n    // expose its static composition rather than scheduling invisible frames.\n    let animation: Animation | undefined;\n    let failed = false;\n    const sync = () => { animation?.cancel(); if (document.hidden || failed) return;\n      // A host may expose WAAPI but reject animation creation. Keep the static SVG\n      // and content instead of propagating a decorative failure to the application.\n      try { animation = node.animate([\n      { transform: \"scale(1.08) translate(-1%, 0%)\" },\n      { transform: \"scale(1.12) translate(1%, 1%)\" },\n      { transform: \"scale(1.08) translate(-1%, 0%)\" },\n    ], { duration: effect.period * 1000, iterations: Infinity, easing: \"ease-in-out\" }); } catch { failed = true; } };\n    sync(); document.addEventListener(\"visibilitychange\", sync);\n    return () => { animation?.cancel(); document.removeEventListener(\"visibilitychange\", sync); };\n  }, [hasAtmosphere, effect.active, effect.period, environment.reducedMotion, visible]);\n  const colors = effect.colors.map(color => resolveColorReference(color, palette));\n  return <div ref={host} className={className} data-hjm-effect-surface=\"\" style={{ ...layoutStyle, position: \"relative\", isolation: \"isolate\", overflow: \"hidden\", borderRadius: radius === \"none\" ? 0 : `var(--hjm-radius-${radius})`, background: palette.theme.bg }}>\n    <svg ref={layer} aria-hidden=\"true\" focusable=\"false\" style={{ position: \"absolute\", inset: 0, width: \"100%\", height: \"100%\", pointerEvents: \"none\", opacity: effect.intensity }}>\n      {/* Keep noise in CSS-pixel units; the existing geometric layers retain their viewBox. */}\n      <defs>{effect.noise && <><pattern id={`${id}-noise-tile`} width={effect.noise.size} height={effect.noise.size} x={effect.noise.offset} patternUnits=\"userSpaceOnUse\"><image href={effect.noise.uri} width={effect.noise.size} height={effect.noise.size} /></pattern><mask id={`${id}-noise-mask`} x={0} y={0} width=\"100%\" height=\"100%\" maskUnits=\"userSpaceOnUse\"><rect width=\"100%\" height=\"100%\" fill={`url(#${id}-noise-tile)`} /></mask></>}</defs>\n      {effect.noise && <rect width=\"100%\" height=\"100%\" fill={palette.theme.text} mask={`url(#${id}-noise-mask)`} />}\n      <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">\n      <defs>{colors.map((color, index) => <radialGradient id={`${id}-${index}`} key={index}><stop offset=\"0%\" stopColor={color} /><stop offset=\"100%\" stopColor={color} stopOpacity={0} /></radialGradient>)}\n        <pattern id={`${id}-grain`} width={4} height={4} patternUnits=\"userSpaceOnUse\">{effect.points.map((point, index) => <circle key={index} cx={point.x / 25} cy={point.y / 25} r={point.radius / 10} fill={palette.theme.text} opacity={0.28} />)}</pattern>\n      </defs>\n      {effect.layers.includes(\"mesh\") && effect.anchors.map((anchor, index) => <ellipse key={index} cx={anchor.x} cy={anchor.y} rx={65} ry={70} fill={`url(#${id}-${index})`} />)}\n      {effect.layers.includes(\"glow\") && <ellipse cx={50} cy={10} rx={70} ry={95} fill={`url(#${id}-0)`} />}\n      {effect.layers.includes(\"grain\") && <rect width={100} height={100} fill={`url(#${id}-grain)`} />}\n      </svg>\n    </svg>\n    {/* Notebook ruling must not stretch or drift with the atmospheric layers. */}\n    {effect.ruled && <svg data-hjm-effect-layer=\"ruled\" aria-hidden=\"true\" focusable=\"false\" style={{ position: \"absolute\", inset: 0, width: \"100%\", height: \"100%\", pointerEvents: \"none\", opacity: effect.intensity }}>\n      <defs><pattern id={`${id}-ruled`} width={1} height={effect.ruled.spacing} patternUnits=\"userSpaceOnUse\"><rect y={effect.ruled.spacing - effect.ruled.thickness} width=\"100%\" height={effect.ruled.thickness} fill={palette.theme.text} /></pattern></defs>\n      <rect width=\"100%\" height=\"100%\" fill={`url(#${id}-ruled)`} />\n    </svg>}\n    <div style={{ position: \"relative\", padding: surfaceGeometry.paddings[padding] }}>{children}</div>\n  </div>;\n}\n"]}
+{"version":3,"file":"effect-surface.js","sourceRoot":"","sources":["../src/effect-surface.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { useEffect, useId, useRef, useState, type ReactNode } from \"react\";\nimport { resolveEffectSurface, type EffectSurfaceDescriptor } from \"@hjmds/design-contracts/effect-surface\";\nimport { resolveColorReference } from \"@hjmds/design-contracts/color-references\";\nimport { surfaceDefaults, surfaceGeometry, type SurfacePadding, type SurfaceRadius } from \"@hjmds/design-contracts/recipes/base\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\nimport { useHjmTheme } from \"./provider.js\";\nexport type EffectSurfaceProps = Readonly<{ descriptor?: EffectSurfaceDescriptor; children: ReactNode; className?: string;\n  /** Content inset inside the decorated area (Surface padding scale). Consumers otherwise wrapped children in raw padded elements. */\n  padding?: SurfacePadding;\n  /** Corner radius of the decorated area. Defaults to the Surface radius so a framed hero clips its\n   * decoration to the same corners as the Surface it wraps; full-bleed canvases pass `\"none\"`. */\n  radius?: SurfaceRadius | \"none\";\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */ layoutStyle?: HjmCompositionStyleProp; }>;\n/** Decorative layers never receive pointer events or own the content's name. */\nexport function EffectSurface({ descriptor = {}, children, className, padding = \"none\", radius = surfaceDefaults.radius, layoutStyle }: EffectSurfaceProps) {\n  const { palette, environment } = useHjmTheme();\n  const effect = resolveEffectSurface(descriptor);\n  const id = useId().replace(/:/g, \"\");\n  const host = useRef<HTMLDivElement>(null);\n  const layer = useRef<SVGSVGElement>(null);\n  const [visible, setVisible] = useState(false);\n  const hasAtmosphere = effect.layers.some(value => value !== \"ruled\");\n  useEffect(() => {\n    if (!host.current) return;\n    if (typeof IntersectionObserver === \"undefined\") { setVisible(true); return; }\n    const observer = new IntersectionObserver(([entry]) => setVisible(entry?.isIntersecting ?? false));\n    observer.observe(host.current); return () => observer.disconnect();\n  }, []);\n  useEffect(() => {\n    const node = layer.current;\n    if (!node || !hasAtmosphere || !effect.active || environment.reducedMotion || !visible || typeof node.animate !== \"function\") return;\n    // WAAPI stays outside React renders; visibility changes cancel the loop and\n    // expose its static composition rather than scheduling invisible frames.\n    let animation: Animation | undefined;\n    let failed = false;\n    const sync = () => { animation?.cancel(); if (document.hidden || failed) return;\n      // A host may expose WAAPI but reject animation creation. Keep the static SVG\n      // and content instead of propagating a decorative failure to the application.\n      try { animation = node.animate([\n      { transform: \"scale(1.08) translate(-1%, 0%)\" },\n      { transform: \"scale(1.12) translate(1%, 1%)\" },\n      { transform: \"scale(1.08) translate(-1%, 0%)\" },\n    ], { duration: effect.period * 1000, iterations: Infinity, easing: \"ease-in-out\" }); } catch { failed = true; } };\n    sync(); document.addEventListener(\"visibilitychange\", sync);\n    return () => { animation?.cancel(); document.removeEventListener(\"visibilitychange\", sync); };\n  }, [hasAtmosphere, effect.active, effect.period, environment.reducedMotion, visible]);\n  const colors = effect.colors.map(color => resolveColorReference(color, palette));\n  return <div ref={host} className={className} data-hjm-effect-surface=\"\" style={{ ...layoutStyle, position: \"relative\", isolation: \"isolate\", overflow: \"hidden\", borderRadius: radius === \"none\" ? 0 : `var(--hjm-radius-${radius})`, background: palette.theme.bg }}>\n    <svg ref={layer} aria-hidden=\"true\" focusable=\"false\" style={{ position: \"absolute\", inset: 0, width: \"100%\", height: \"100%\", pointerEvents: \"none\", opacity: effect.intensity }}>\n      {/* Keep noise in CSS-pixel units; the existing geometric layers retain their viewBox. */}\n      <defs>{effect.noise && <><pattern id={`${id}-noise-tile`} width={effect.noise.size} height={effect.noise.size} x={effect.noise.offset} patternUnits=\"userSpaceOnUse\"><image href={effect.noise.uri} width={effect.noise.size} height={effect.noise.size} /></pattern><mask id={`${id}-noise-mask`} x={0} y={0} width=\"100%\" height=\"100%\" maskUnits=\"userSpaceOnUse\"><rect width=\"100%\" height=\"100%\" fill={`url(#${id}-noise-tile)`} /></mask></>}</defs>\n      {effect.noise && <rect width=\"100%\" height=\"100%\" fill={palette.theme.text} mask={`url(#${id}-noise-mask)`} />}\n      <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">\n      <defs>{colors.map((color, index) => <radialGradient id={`${id}-${index}`} key={index}><stop offset=\"0%\" stopColor={color} /><stop offset=\"100%\" stopColor={color} stopOpacity={0} /></radialGradient>)}\n        <pattern id={`${id}-grain`} width={4} height={4} patternUnits=\"userSpaceOnUse\">{effect.points.map((point, index) => <circle key={index} cx={point.x / 25} cy={point.y / 25} r={point.radius / 10} fill={palette.theme.text} opacity={0.28} />)}</pattern>\n      </defs>\n      {effect.layers.includes(\"mesh\") && effect.anchors.map((anchor, index) => <ellipse key={index} cx={anchor.x} cy={anchor.y} rx={65} ry={70} fill={`url(#${id}-${index})`} />)}\n      {effect.layers.includes(\"glow\") && <ellipse cx={50} cy={10} rx={70} ry={95} fill={`url(#${id}-0)`} />}\n      {effect.layers.includes(\"grain\") && <rect width={100} height={100} fill={`url(#${id}-grain)`} />}\n      </svg>\n    </svg>\n    {/* Notebook ruling must not stretch or drift with the atmospheric layers. */}\n    {effect.ruled && <svg data-hjm-effect-layer=\"ruled\" aria-hidden=\"true\" focusable=\"false\" style={{ position: \"absolute\", inset: 0, width: \"100%\", height: \"100%\", pointerEvents: \"none\", opacity: effect.intensity }}>\n      <defs><pattern id={`${id}-ruled`} width={1} height={effect.ruled.spacing} patternUnits=\"userSpaceOnUse\"><rect y={effect.ruled.spacing - effect.ruled.thickness} width=\"100%\" height={effect.ruled.thickness} fill={palette.theme.text} /></pattern></defs>\n      <rect width=\"100%\" height=\"100%\" fill={`url(#${id}-ruled)`} />\n    </svg>}\n    <div style={{ position: \"relative\", padding: surfaceGeometry.paddings[padding] }}>{children}</div>\n  </div>;\n}\n"]}

package/dist/evidence.d.ts

@@ -34,7 +34,7 @@ export type ReactRendererEvidenceManifest = Readonly<{
 export declare const reactRendererEvidence: {
     readonly schemaVersion: 2;
     readonly packageName: "@hjmds/react";
-    readonly packageVersion: "1.41.2";
+    readonly packageVersion: "1.42.0";
     readonly surface: "web";
     readonly components: Readonly<{
         /** Canonical component id from the design-contracts catalog. */

package/dist/evidence.js

@@ -135,7 +135,7 @@ const activeWebEntries = componentCatalog.filter((entry) => {
 export const reactRendererEvidence = {
     schemaVersion: reactRendererEvidenceSchemaVersion,
     packageName: "@hjmds/react",
-    packageVersion: "1.41.2",
+    packageVersion: "1.42.0",
     surface: "web",
     components: activeWebEntries.map(derivedClaim),
 };