@hjmds/react 1.46.1 → 1.47.0

package/dist/conversation-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-row.js","sourceRoot":"","sources":["../src/conversation-row.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { conversationRowRecipe as recipe } from \"@hjmds/design-contracts/conversation-row\";\nimport { Text } from \"./layout.js\";\n\nexport type ConversationRowProps = Readonly<{\n  title: string; preview: string; metadata: string; avatar: ReactNode; unread?: boolean;\n}>;\n\n/** Presentation inside a router-owned link: the host supplies its full accessible name. */\nexport function ConversationRow({ title, preview, metadata, avatar, unread = false }: ConversationRowProps) {\n  // Separators join visible fields; a missing preview must not leave a leading dot.\n  const hasPreview = preview.trim().length > 0;\n  const hasMetadata = metadata.trim().length > 0;\n  return <span aria-hidden=\"true\" data-hjm-conversation-row=\"true\" data-unread={unread || undefined}\n    style={{display:\"flex\",alignItems:\"center\",gap:recipe.gap,paddingInline:recipe.paddingInline,paddingBlock:recipe.paddingBlock,minWidth:0,width:\"100%\",boxSizing:\"border-box\"}}>\n    <span style={{display:\"flex\",alignItems:\"center\",justifyContent:\"center\",width:recipe.avatarSize,height:recipe.avatarSize,flexShrink:0,borderRadius:\"50%\",overflow:\"hidden\"}}>{avatar}</span>\n    <span style={{display:\"flex\",flexDirection:\"column\",gap:recipe.contentGap,flex:1,minWidth:0}}>\n      <Text style={{overflow:\"hidden\",textOverflow:\"ellipsis\",whiteSpace:\"nowrap\",fontWeight:unread?recipe.unreadTitleWeight:recipe.titleWeight}}>{title}</Text>\n      <span style={{display:\"flex\",minWidth:0}}>\n        {hasPreview ? <Text variant=\"label\" tone={unread?\"primary\":\"subtle\"} style={{overflow:\"hidden\",textOverflow:\"ellipsis\",whiteSpace:\"nowrap\",fontWeight:unread?recipe.unreadPreviewWeight:recipe.titleWeight}}>{preview}</Text> : null}\n        {hasMetadata ? <Text variant=\"label\" tone={unread?\"primary\":\"subtle\"} style={{flexShrink:0,/* \"pre\": flex items drop the leading space of \" · \" (2026-10-17 comparison); still no wrap. */whiteSpace:\"pre\",fontWeight:unread?recipe.unreadPreviewWeight:recipe.titleWeight}}>{hasPreview ? ` · ${metadata}` : metadata}</Text> : null}\n      </span>\n    </span>\n    {unread?<span data-hjm-unread-dot=\"true\" style={{width:recipe.unreadSize,height:recipe.unreadSize,flexShrink:0,borderRadius:\"50%\",background:\"var(--hjm-color-content-brand)\"}}/>:null}\n  </span>;\n}\n"]}
+{"version":3,"file":"conversation-row.js","sourceRoot":"","sources":["../src/conversation-row.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { IdentityAction } from \"./internal/identity-action.js\";\nimport type { ReactNode } from \"react\";\nimport { conversationRowRecipe as recipe } from \"@hjmds/design-contracts/conversation-row\";\nimport { Text } from \"./layout.js\";\n\nexport type ConversationRowProps = Readonly<{\n  title: string; preview: string; metadata: string; avatar: ReactNode; unread?: boolean;\n  avatarAction?: Readonly<{label:string;onPress():void}>;\n  /** Router host for the body, separate from the member avatar destination. */\n  renderBody?: (body:ReactNode)=>ReactNode;\n}>;\n\n/** Presentation inside a router-owned link: the host supplies its full accessible name. */\nexport function ConversationRow({ title, preview, metadata, avatar, avatarAction, renderBody, unread = false }: ConversationRowProps) {\n  // Separators join visible fields; a missing preview must not leave a leading dot.\n  const hasPreview = preview.trim().length > 0;\n  const hasMetadata = metadata.trim().length > 0;\n  const body = <span style={{display:\"flex\",alignItems:\"center\",gap:recipe.gap,flex:1,minWidth:0}}>\n    <span style={{display:\"flex\",flexDirection:\"column\",gap:recipe.contentGap,flex:1,minWidth:0}}>\n      <Text style={{overflow:\"hidden\",textOverflow:\"ellipsis\",whiteSpace:\"nowrap\",fontWeight:unread?recipe.unreadTitleWeight:recipe.titleWeight}}>{title}</Text>\n      <span style={{display:\"flex\",minWidth:0}}>\n        {hasPreview ? <Text variant=\"label\" tone={unread?\"primary\":\"subtle\"} style={{overflow:\"hidden\",textOverflow:\"ellipsis\",whiteSpace:\"nowrap\",fontWeight:unread?recipe.unreadPreviewWeight:recipe.titleWeight}}>{preview}</Text> : null}\n        {hasMetadata ? <Text variant=\"label\" tone={unread?\"primary\":\"subtle\"} style={{flexShrink:0,/* \"pre\": flex items drop the leading space of \" · \" (2026-10-17 comparison); still no wrap. */whiteSpace:\"pre\",fontWeight:unread?recipe.unreadPreviewWeight:recipe.titleWeight}}>{hasPreview ? ` · ${metadata}` : metadata}</Text> : null}\n      </span>\n    </span>\n    {unread?<span data-hjm-unread-dot=\"true\" style={{width:recipe.unreadSize,height:recipe.unreadSize,flexShrink:0,borderRadius:\"50%\",background:\"var(--hjm-color-content-brand)\"}}/>:null}\n  </span>;\n  return <span aria-hidden={renderBody||avatarAction?undefined:true} data-hjm-conversation-row=\"true\" data-unread={unread || undefined}\n    style={{display:\"flex\",alignItems:\"center\",gap:recipe.gap,paddingInline:recipe.paddingInline,paddingBlock:recipe.paddingBlock,minWidth:0,width:\"100%\",boxSizing:\"border-box\"}}>\n    {avatarAction?<IdentityAction action={avatarAction}><span aria-hidden=\"true\" style={{display:\"flex\",alignItems:\"center\",justifyContent:\"center\",width:recipe.avatarSize,height:recipe.avatarSize,flexShrink:0,borderRadius:\"50%\",overflow:\"hidden\"}}>{avatar}</span></IdentityAction>:<span aria-hidden=\"true\" style={{display:\"flex\",alignItems:\"center\",justifyContent:\"center\",width:recipe.avatarSize,height:recipe.avatarSize,flexShrink:0,borderRadius:\"50%\",overflow:\"hidden\"}}>{avatar}</span>}\n    {renderBody?renderBody(body):body}\n  </span>;\n}\n"]}

package/dist/date-range.d.ts

@@ -1,11 +1,25 @@
-import { type DateRangeValue } from "@hjmds/design-contracts/components/date-range";
+import { type DateRangeLimit, type DateRangePresetLength, type DateRangeValue } from "@hjmds/design-contracts/components/date-range";
 import type { CalendarDescriptor, ComposeCalendarAccessibleName } from "@hjmds/design-contracts/components/calendar";
 import { type ReactNode } from "react";
 import { type CalendarMonthAction } from "./calendar.js";
 import type { HjmCompositionStyleProp } from "./composition-style.js";
+export type DateRangeSummary = Readonly<{
+    startLabel: string;
+    endLabel: string;
+    /** Shown in a field whose date is not chosen yet. */
+    placeholder: string;
+    formatDate: (date: string) => string;
+}>;
+/** A shortcut such as "최근 7일" or "1개월" that ends on the grid's `todayDate`. */
+export type DateRangePresetOption = Readonly<{
+    id: string;
+    label: string;
+    length: DateRangePresetLength;
+}>;
+type RangeCalendarDescriptor<T> = T extends unknown ? Omit<T, "selectedDate" | "defaultSelectedDate" | "onSelectionChange"> : never;
 export type DateRangePickerProps<Content = unknown> = Readonly<{
     /** The same grid Calendar renders; the product still owns month data. */
-    descriptor: Omit<CalendarDescriptor<Content>, "selectedDate" | "defaultSelectedDate" | "onSelectionChange">;
+    descriptor: RangeCalendarDescriptor<CalendarDescriptor<Content>>;
     composeAccessibleName: ComposeCalendarAccessibleName<Content>;
     value?: DateRangeValue;
     defaultValue?: DateRangeValue;
@@ -18,10 +32,17 @@ export type DateRangePickerProps<Content = unknown> = Readonly<{
         end: string;
         between: string;
     }>;
+    /** Inclusive calendar span; one year by default, null removes the limit. */
+    maxRange?: DateRangeLimit | null;
     renderCellContent?: (date: string) => ReactNode;
+    /** Start/end fields above the grid; the edge the next tap sets is marked (replaces a hint sentence). */
+    summary?: DateRangeSummary;
+    /** Shortcut chips between the summary and the grid; each ends on `descriptor.grid.todayDate`. */
+    presets?: readonly DateRangePresetOption[];
     className?: string;
     /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */
     layoutStyle?: HjmCompositionStyleProp;
 }>;
-export declare function DateRangePicker<Content = unknown>({ descriptor, composeAccessibleName, value: controlledValue, defaultValue, onValueChange, previousMonth, nextMonth, rangeLabels, renderCellContent, className, layoutStyle, }: DateRangePickerProps<Content>): import("react").JSX.Element;
+export declare function DateRangePicker<Content = unknown>({ descriptor, composeAccessibleName, value: controlledValue, defaultValue, onValueChange, previousMonth, nextMonth, rangeLabels, maxRange, renderCellContent, summary, presets, className, layoutStyle, }: DateRangePickerProps<Content>): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=date-range.d.ts.map

package/dist/date-range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-range.d.ts","sourceRoot":"","sources":["../src/date-range.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,+CAA+C,CAAC;AACvD,OAAO,KAAK,EACV,kBAAkB,EAClB,6BAA6B,EAC9B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAY,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,oBAAoB,CAAC,OAAO,GAAG,OAAO,IAAI,QAAQ,CAAC;IAC7D,yEAAyE;IACzE,UAAU,EAAE,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,CAAC,CAAC;IAC5G,qBAAqB,EAAE,6BAA6B,CAAC,OAAO,CAAC,CAAC;IAC9D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,2EAA2E;IAC3E,WAAW,EAAE,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC,CAAC,CAAC;AAEH,wBAAgB,eAAe,CAAC,OAAO,GAAG,OAAO,EAAE,EACjD,UAAU,EACV,qBAAqB,EACrB,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,WAAW,GACZ,EAAE,oBAAoB,CAAC,OAAO,CAAC,+BA8C/B"}
+{"version":3,"file":"date-range.d.ts","sourceRoot":"","sources":["../src/date-range.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,cAAc,EAMnB,KAAK,qBAAqB,EAG1B,KAAK,cAAc,EACpB,MAAM,+CAA+C,CAAC;AACvD,OAAO,KAAK,EACV,kBAAkB,EAClB,6BAA6B,EAC9B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAY,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAInE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACtC,CAAC,CAAC;AAEH,+EAA+E;AAC/E,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,qBAAqB,CAAA;CAAE,CAAC,CAAC;AAG3G,KAAK,uBAAuB,CAAC,CAAC,IAAI,CAAC,SAAS,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,CAAC,GAAG,KAAK,CAAC;AAEpI,MAAM,MAAM,oBAAoB,CAAC,OAAO,GAAG,OAAO,IAAI,QAAQ,CAAC;IAC7D,yEAAyE;IACzE,UAAU,EAAE,uBAAuB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;IACjE,qBAAqB,EAAE,6BAA6B,CAAC,OAAO,CAAC,CAAC;IAC9D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,2EAA2E;IAC3E,WAAW,EAAE,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvE,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,wGAAwG;IACxG,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,iGAAiG;IACjG,OAAO,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC,CAAC,CAAC;AAEH,wBAAgB,eAAe,CAAC,OAAO,GAAG,OAAO,EAAE,EACjD,UAAU,EACV,qBAAqB,EACrB,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,SAAS,EACT,WAAW,EACX,QAAgC,EAChC,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,SAAS,EACT,WAAW,GACZ,EAAE,oBAAoB,CAAC,OAAO,CAAC,+BA0E/B"}

package/dist/date-range.js

@@ -1,30 +1,51 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { emptyDateRange, isCompleteDateRange, resolveDateRangeCellState, resolveDateRangeSelection, validateDateRange, } from "@hjmds/design-contracts/components/date-range";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dateRangeRecipe, emptyDateRange, defaultDateRangeLimit, isDateWithinRangeLimit, isCompleteDateRange, resolveDateRangeActiveEdge, resolveDateRangeCellPaint, resolveDateRangeCellState, resolveDateRangePreset, resolveDateRangeSelection, validateDateRange, } from "@hjmds/design-contracts/components/date-range";
 import { useState } from "react";
 import { Calendar } from "./calendar.js";
 import { classNames, useControllableState } from "./internal.js";
-export function DateRangePicker({ descriptor, composeAccessibleName, value: controlledValue, defaultValue, onValueChange, previousMonth, nextMonth, rangeLabels, renderCellContent, className, layoutStyle, }) {
+import { CalendarPaintContext } from "./internal/calendar-paint.js";
+import { Chip } from "./selection.js";
+export function DateRangePicker({ descriptor, composeAccessibleName, value: controlledValue, defaultValue, onValueChange, previousMonth, nextMonth, rangeLabels, maxRange = defaultDateRangeLimit, renderCellContent, summary, presets, className, layoutStyle, }) {
     const [value, setValue] = useControllableState({
         ...(controlledValue === undefined ? {} : { value: controlledValue }),
         defaultValue: defaultValue ?? emptyDateRange,
         ...(onValueChange === undefined ? {} : { onChange: onValueChange }),
     });
-    validateDateRange(value);
+    validateDateRange(value, maxRange);
     // The hovered date previews the not-yet-committed end through the same cell
     // state function the committed range uses.
-    const [hovered, setHovered] = useState(null);
-    return (_jsx("div", { style: layoutStyle, className: classNames("hjm-date-range", className), "data-selecting": value.start !== null && value.end === null ? "" : undefined, "data-complete": isCompleteDateRange(value) || undefined, onMouseLeave: () => setHovered(null), children: _jsx(Calendar, { descriptor: {
-                ...descriptor,
-                // Calendar keeps single selection: the range's own edges are painted
-                // through cell content and data attributes, not by lying to it.
-                selectedDate: value.end ?? value.start,
-                onSelectionChange: (date) => { if (date !== null)
-                    setValue(resolveDateRangeSelection(value, date)); },
-            }, composeAccessibleName: (info) => {
-                const state = resolveDateRangeCellState(value, info.date, hovered);
-                const base = composeAccessibleName(info);
-                return state === "none" ? base : `${base}, ${rangeLabels[state]}`;
-            }, ...(previousMonth === undefined ? {} : { previousMonth }), ...(nextMonth === undefined ? {} : { nextMonth }), renderCellContent: (cell) => (_jsx("span", { className: "hjm-date-range__cell", "data-range": resolveDateRangeCellState(value, cell.date, hovered), onMouseEnter: () => setHovered(cell.date), children: renderCellContent?.(cell.date) ?? null })) }) }));
+    const [pointer, setPointer] = useState(null);
+    const hovered = pointer !== null && isDateWithinRangeLimit(value, pointer, maxRange) ? pointer : null;
+    const activeEdge = resolveDateRangeActiveEdge(value);
+    const field = (edge) => {
+        const date = value[edge];
+        return (_jsxs("div", { className: "hjm-date-range__field", "data-active": activeEdge === edge || undefined, "data-empty": date === null || undefined, children: [_jsx("span", { className: "hjm-date-range__field-label", children: edge === "start" ? summary.startLabel : summary.endLabel }), _jsx("span", { className: "hjm-date-range__field-value", children: date === null ? summary.placeholder : summary.formatDate(date) })] }, edge));
+    };
+    return (_jsxs("div", { style: layoutStyle, className: classNames("hjm-date-range", className), "data-selecting": value.start !== null && value.end === null ? "" : undefined, "data-complete": isCompleteDateRange(value) || undefined, onMouseLeave: () => setPointer(null), children: [summary ? _jsxs("div", { className: "hjm-date-range__summary", children: [field("start"), field("end")] }) : null, presets?.length ? (_jsx("div", { className: "hjm-date-range__presets", children: presets.map((preset) => {
+                    const range = resolveDateRangePreset(descriptor.grid.todayDate, preset.length);
+                    return (_jsx(Chip, { label: preset.label, size: dateRangeRecipe.presets.chipSize, selectionMode: "single", selected: range.start === value.start && range.end === value.end, onSelectedChange: () => {
+                            validateDateRange(range, maxRange);
+                            setValue(range);
+                            // A preset ends today; bring its end month into view like a jump, so the band is visible.
+                            const month = range.end.slice(0, 7);
+                            if (descriptor.focusedMonth !== month)
+                                descriptor.onFocusedMonthChange?.(month, "jump");
+                        } }, preset.id));
+                }) })) : null, _jsx(CalendarPaintContext.Provider, { value: { paint: (date) => resolveDateRangeCellPaint(value, date, hovered), onDayHover: setPointer }, children: _jsx(Calendar, { descriptor: {
+                        ...descriptor,
+                        // The range owns eligibility; Calendar keeps the same disabled-day interaction contract.
+                        grid: { ...descriptor.grid, cells: descriptor.grid.cells.map(cell => cell.date === undefined ? cell :
+                                { ...cell, disabled: cell.disabled === true || !isDateWithinRangeLimit(value, cell.date, maxRange) }) },
+                        // Calendar keeps single selection; the two edges and the band are painted through the internal
+                        // paint context, and each day's name carries the range position for assistive tech.
+                        selectedDate: value.end ?? value.start,
+                        onSelectionChange: (date) => { if (date !== null)
+                            setValue(resolveDateRangeSelection(value, date, maxRange)); },
+                    }, composeAccessibleName: (info) => {
+                        const state = resolveDateRangeCellState(value, info.date, hovered);
+                        const base = composeAccessibleName(info);
+                        return state === "none" ? base : `${base}, ${rangeLabels[state]}`;
+                    }, ...(previousMonth === undefined ? {} : { previousMonth }), ...(nextMonth === undefined ? {} : { nextMonth }), ...(renderCellContent === undefined ? {} : { renderCellContent: (cell) => renderCellContent(cell.date) }) }) })] }));
 }
 //# sourceMappingURL=date-range.js.map

package/dist/date-range.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"date-range.js","sourceRoot":"","sources":["../src/date-range.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport {\n  dateRangeRecipe,\n  emptyDateRange,\n  defaultDateRangeLimit,\n  isDateWithinRangeLimit,\n  type DateRangeLimit,\n  isCompleteDateRange,\n  resolveDateRangeActiveEdge,\n  resolveDateRangeCellPaint,\n  resolveDateRangeCellState,\n  resolveDateRangePreset,\n  type DateRangePresetLength,\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 { CalendarPaintContext } from \"./internal/calendar-paint.js\";\nimport { Chip } from \"./selection.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\nexport type DateRangeSummary = Readonly<{\n  startLabel: string;\n  endLabel: string;\n  /** Shown in a field whose date is not chosen yet. */\n  placeholder: string;\n  formatDate: (date: string) => string;\n}>;\n\n/** A shortcut such as \"최근 7일\" or \"1개월\" that ends on the grid's `todayDate`. */\nexport type DateRangePresetOption = Readonly<{ id: string; label: string; length: DateRangePresetLength }>;\n\n// Preserve Calendar's controlled/uncontrolled month union when removing its single-date selection props.\ntype RangeCalendarDescriptor<T> = T extends unknown ? Omit<T, \"selectedDate\" | \"defaultSelectedDate\" | \"onSelectionChange\"> : never;\n\nexport type DateRangePickerProps<Content = unknown> = Readonly<{\n  /** The same grid Calendar renders; the product still owns month data. */\n  descriptor: RangeCalendarDescriptor<CalendarDescriptor<Content>>;\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  /** Inclusive calendar span; one year by default, null removes the limit. */\n  maxRange?: DateRangeLimit | null;\n  renderCellContent?: (date: string) => ReactNode;\n  /** Start/end fields above the grid; the edge the next tap sets is marked (replaces a hint sentence). */\n  summary?: DateRangeSummary;\n  /** Shortcut chips between the summary and the grid; each ends on `descriptor.grid.todayDate`. */\n  presets?: readonly DateRangePresetOption[];\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  maxRange = defaultDateRangeLimit,\n  renderCellContent,\n  summary,\n  presets,\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, maxRange);\n  // The hovered date previews the not-yet-committed end through the same cell\n  // state function the committed range uses.\n  const [pointer, setPointer] = useState<string | null>(null);\n  const hovered = pointer !== null && isDateWithinRangeLimit(value, pointer, maxRange) ? pointer : null;\n\n  const activeEdge = resolveDateRangeActiveEdge(value);\n  const field = (edge: \"start\" | \"end\") => {\n    const date = value[edge];\n    return (\n      <div key={edge} className=\"hjm-date-range__field\" data-active={activeEdge === edge || undefined} data-empty={date === null || undefined}>\n        <span className=\"hjm-date-range__field-label\">{edge === \"start\" ? summary!.startLabel : summary!.endLabel}</span>\n        <span className=\"hjm-date-range__field-value\">{date === null ? summary!.placeholder : summary!.formatDate(date)}</span>\n      </div>\n    );\n  };\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={() => setPointer(null)}\n    >\n      {summary ? <div className=\"hjm-date-range__summary\">{field(\"start\")}{field(\"end\")}</div> : null}\n      {presets?.length ? (\n        <div className=\"hjm-date-range__presets\">\n          {presets.map((preset) => {\n            const range = resolveDateRangePreset(descriptor.grid.todayDate, preset.length);\n            return (\n              <Chip key={preset.id} label={preset.label} size={dateRangeRecipe.presets.chipSize} selectionMode=\"single\"\n                selected={range.start === value.start && range.end === value.end}\n                onSelectedChange={() => {\n                  validateDateRange(range, maxRange);\n                  setValue(range);\n                  // A preset ends today; bring its end month into view like a jump, so the band is visible.\n                  const month = range.end!.slice(0, 7);\n                  if (descriptor.focusedMonth !== month) descriptor.onFocusedMonthChange?.(month, \"jump\");\n                }} />\n            );\n          })}\n        </div>\n      ) : null}\n      <CalendarPaintContext.Provider value={{ paint: (date) => resolveDateRangeCellPaint(value, date, hovered), onDayHover: setPointer }}>\n        <Calendar<Content>\n          descriptor={{\n            ...descriptor,\n            // The range owns eligibility; Calendar keeps the same disabled-day interaction contract.\n            grid: { ...descriptor.grid, cells: descriptor.grid.cells.map(cell => cell.date === undefined ? cell :\n              { ...cell, disabled: cell.disabled === true || !isDateWithinRangeLimit(value, cell.date, maxRange) }) },\n            // Calendar keeps single selection; the two edges and the band are painted through the internal\n            // paint context, and each day's name carries the range position for assistive tech.\n            selectedDate: value.end ?? value.start,\n            onSelectionChange: (date) => { if (date !== null) setValue(resolveDateRangeSelection(value, date, maxRange)); },\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 === undefined ? {} : { renderCellContent: (cell: { date: string }) => renderCellContent(cell.date) })}\n        />\n      </CalendarPaintContext.Provider>\n    </div>\n  );\n}\n"]}

package/dist/display.d.ts

@@ -51,6 +51,12 @@ export type CardProps = Omit<HTMLAttributes<HTMLElement>, "title"> & Readonly<{
     title?: ReactNode;
     description?: ReactNode;
     leading?: ReactNode;
+    /** Independent identity destination, outside the card activation host. */
+    leadingAction?: Readonly<{
+        label: string;
+        onPress(): void;
+        disabled?: boolean;
+    }>;
     media?: ReactNode;
     /** Decorative artwork behind the shared body/actions; its host determines the available height. */
     backgroundMedia?: ReactNode;
@@ -96,6 +102,12 @@ export declare const Card: import("react").ForwardRefExoticComponent<Omit<HTMLAt
     title?: ReactNode;
     description?: ReactNode;
     leading?: ReactNode;
+    /** Independent identity destination, outside the card activation host. */
+    leadingAction?: Readonly<{
+        label: string;
+        onPress(): void;
+        disabled?: boolean;
+    }>;
     media?: ReactNode;
     /** Decorative artwork behind the shared body/actions; its host determines the available height. */
     backgroundMedia?: ReactNode;
@@ -152,6 +164,12 @@ export type ListRowProps = Omit<HTMLAttributes<HTMLElement>, "title" | "onClick"
     title: ReactNode;
     description?: ReactNode;
     leading?: ReactNode;
+    /** Independent member destination; rendered beside, never inside, the row command. */
+    leadingAction?: Readonly<{
+        label: string;
+        onPress(): void;
+        disabled?: boolean;
+    }>;
     trailing?: ReactNode;
     /**
      * `disclosure`: the row opens another screen. HJM draws the decorative chevron after `trailing`, inside the row
@@ -167,6 +185,8 @@ export type ListRowProps = Omit<HTMLAttributes<HTMLElement>, "title" | "onClick"
     tone?: keyof typeof listRowRecipe.tones;
     /** Frame the ListRow paints around `leading`; the recipe owns its size. */
     leadingShape?: ListRowLeadingShape;
+    /** Large member portraits use the shared 48px frame; icons retain the default frame. */
+    leadingSize?: "default" | "large";
     selected?: boolean;
     disabled?: boolean;
     /**
@@ -186,6 +206,12 @@ export declare const ListRow: import("react").ForwardRefExoticComponent<Omit<HTM
     title: ReactNode;
     description?: ReactNode;
     leading?: ReactNode;
+    /** Independent member destination; rendered beside, never inside, the row command. */
+    leadingAction?: Readonly<{
+        label: string;
+        onPress(): void;
+        disabled?: boolean;
+    }>;
     trailing?: ReactNode;
     /**
      * `disclosure`: the row opens another screen. HJM draws the decorative chevron after `trailing`, inside the row
@@ -201,6 +227,8 @@ export declare const ListRow: import("react").ForwardRefExoticComponent<Omit<HTM
     tone?: keyof typeof listRowRecipe.tones;
     /** Frame the ListRow paints around `leading`; the recipe owns its size. */
     leadingShape?: ListRowLeadingShape;
+    /** Large member portraits use the shared 48px frame; icons retain the default frame. */
+    leadingSize?: "default" | "large";
     selected?: boolean;
     disabled?: boolean;
     /**

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,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IdentityAction } from "./internal/identity-action.js";
 import { badgeRecipe, listRowRecipe, resolveBadgeCategoryColor, validateListRowTrailingAccessory, } from "@hjmds/design-contracts/recipes";
 import { THEMES } from "@hjmds/design-contracts/colors";
 import { glyph } from "@hjmds/design-contracts/foundations";
@@ -40,7 +41,7 @@ export const Tag = forwardRef(function Tag({ children, tone, className, layoutSt
     });
     return (_jsx("span", { ...props, style: { ...style, ...layoutStyle }, ref: ref, className: classNames("hjm-tag", className), "data-tone": descriptor.tone, children: _jsx("span", { className: "hjm-tag__label", children: descriptor.label }) }));
 });
-export const Card = forwardRef(function Card({ title, description, leading, media, backgroundMedia, backgroundInteraction, mediaBadges, badges, badgesAlign = cardRecipe.defaults.badgesAlign, mediaAction, actions, headerActions, headingLevel = cardRecipe.defaults.headingLevel, 
+export const Card = forwardRef(function Card({ title, description, leading, leadingAction, media, backgroundMedia, backgroundInteraction, mediaBadges, badges, badgesAlign = cardRecipe.defaults.badgesAlign, mediaAction, actions, headerActions, headingLevel = cardRecipe.defaults.headingLevel, 
 // An omitted selection is an ordinary action, not an unpressed toggle.
 selected, onActivate, href, renderLink, disabled = false, tone = cardRecipe.defaults.tone, bordered = cardRecipe.defaults.bordered, padding = cardRecipe.defaults.padding, radius, className, children, ...props }, ref) {
     if (href !== undefined && (!href.trim() || onActivate))
@@ -59,7 +60,7 @@ selected, onActivate, href, renderLink, disabled = false, tone = cardRecipe.defa
     const hasHeader = leading !== undefined || title !== undefined || description !== undefined || headerActions !== undefined;
     // Whole-card open plus separate commands (2026-10-18 unairplane journey card: open + delete). A root button cannot
     // contain the action buttons, so the root stays an article and an overlay button carries the card's name and state.
-    const overlay = href !== undefined || (onActivate !== undefined && Boolean(actions || headerActions));
+    const overlay = href !== undefined || (onActivate !== undefined && Boolean(actions || headerActions || leadingAction));
     const { "aria-label": activationLabel, ...rootProps } = props;
     const activate = () => { if (!disabled)
         onActivate?.(); };
@@ -74,16 +75,17 @@ selected, onActivate, href, renderLink, disabled = false, tone = cardRecipe.defa
             "data-interactive": true, onClick: activate,
         } : {}), ...(overlay ? { "data-activation": "overlay" } : {}), tone: selected ? cardRecipe.selectedTone : tone, bordered: bordered, ...(radius === undefined ? {} : { radius }), className: classNames("hjm-card", className), "data-background-media": backgroundMedia ? true : undefined, "data-state": (onActivate || href !== undefined || mediaAction) && disabled ? "disabled" : selected ? "selected" : "idle", style: { "--hjm-card-background-scrim": cardRecipe.backgroundMedia.scrim, "--hjm-card-background-foreground": cardRecipe.backgroundMedia.foreground, "--hjm-card-disabled-opacity": cardRecipe.interaction.disabledOpacity,
             "--hjm-card-pressed-opacity": cardRecipe.interaction.pressedOpacity, ...props.style }, children: [backgroundMedia ? _jsxs("div", { className: "hjm-card__background", "aria-hidden": "true", children: [backgroundMedia, _jsx("span", { className: "hjm-card__scrim" })] }) : null, backgroundInteraction === undefined ? null : _jsx("div", { className: "hjm-card__background-interaction", "data-slot": "background-interaction", children: backgroundInteraction }), mediaBadges === undefined ? null : _jsx("div", { className: "hjm-card__media-badges", "data-slot": "media-badges", children: mediaBadges }), media ? _jsx("div", { className: "hjm-card__media", "data-slot": "media", children: mediaAction ? _jsxs("button", { type: "button", className: "hjm-card__media-action", "aria-label": mediaAction.label, disabled: disabled, onClick: () => { if (!disabled)
-                        mediaAction.onActivate(); }, children: [media, mediaAction.icon ? _jsx("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 }, children: mediaAction.icon({ color: "currentColor", size: cardRecipe.mediaAction.iconSize }) }) : null] }) : media }) : null, _jsxs("div", { className: "hjm-card__body", "data-slot": "body", style: { padding: surfaceGeometry.paddings[padding] }, children: [badges === undefined ? null : _jsx("div", { className: "hjm-card__badges", "data-slot": "badges", "data-align": badgesAlign, children: badges }), hasHeader ? (_jsxs("div", { className: "hjm-card__header", "data-slot": "header", children: [leading === undefined ? null : (_jsx("span", { className: "hjm-card__leading", "data-slot": "leading", children: leading })), _jsxs("div", { className: "hjm-card__copy", children: [title === undefined
+                        mediaAction.onActivate(); }, children: [media, mediaAction.icon ? _jsx("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 }, children: mediaAction.icon({ color: "currentColor", size: cardRecipe.mediaAction.iconSize }) }) : null] }) : media }) : null, _jsxs("div", { className: "hjm-card__body", "data-slot": "body", style: { padding: surfaceGeometry.paddings[padding] }, children: [badges === undefined ? null : _jsx("div", { className: "hjm-card__badges", "data-slot": "badges", "data-align": badgesAlign, children: badges }), hasHeader ? (_jsxs("div", { className: "hjm-card__header", "data-slot": "header", children: [leading === undefined ? null : (_jsx("span", { className: "hjm-card__leading", "data-slot": "leading", "data-interactive": leadingAction ? "" : undefined, children: leadingAction ? _jsx(IdentityAction, { action: leadingAction, children: leading }) : leading })), _jsxs("div", { className: "hjm-card__copy", children: [title === undefined
                                         ? null
                                         : createElement(`h${headingLevel}`, { className: "hjm-card__title", "data-slot": "title" }, title), description === undefined ? null : (_jsx(Text, { as: "p", tone: "muted", className: "hjm-card__description", "data-slot": "description", children: description }))] }), headerActions === undefined ? null : _jsx("div", { className: "hjm-card__header-actions", "data-slot": "header-actions", children: headerActions })] })) : null, children === undefined ? null : (_jsx("div", { className: "hjm-card__content", "data-slot": "content", children: children }))] }), destination, overlay && href === undefined ? (_jsx("button", { type: "button", className: "hjm-card__activator", "data-slot": "activator", "aria-label": activationLabel, "aria-pressed": selected, disabled: disabled, onClick: activate })) : null, actions ? _jsx("div", { className: "hjm-card__actions", "data-slot": "actions", children: actions }) : null] }));
 });
 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, 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) {
+export const ListRow = forwardRef(function ListRow({ title, description, leading, leadingAction, trailing, trailingAccessory = listRowRecipe.defaults.trailingAccessory, trailingAction, renderLink, density: densityProp, tone = listRowRecipe.defaults.tone, leadingShape = "square", leadingSize = leadingShape === "circle" ? "large" : "default", 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 separateActions = Boolean(trailingAction || leadingAction);
     const densityDefault = useHjmDensityDefault({
         comfortable: listRowRecipe.defaults.density,
         compact: "compact",
@@ -93,7 +95,7 @@ export const ListRow = forwardRef(function ListRow({ title, description, leading
     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, accessory ? _jsx("span", { className: "hjm-list-row__accessory", "data-accessory": trailingAccessory, style: { inlineSize: glyph[accessory.glyph], blockSize: glyph[accessory.glyph] } }) : 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-size": leadingSize, "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
@@ -127,15 +129,15 @@ export const ListRow = forwardRef(function ListRow({ title, description, leading
         "data-state": disabled ? "disabled" : selected ? "selected" : "idle",
         // Placement wins over the legacy `style`, matching Surface's ordering.
         // With trailingAction the frame is the placed root, as Native's outer View.
-        style: trailingAction ? style : { ...style, ...layoutStyle },
-    }, leading
-        ? _jsx("span", { className: "hjm-list-row__leading", "data-shape": leadingShape, children: leading })
+        style: separateActions ? style : { ...style, ...layoutStyle },
+    }, leading && !leadingAction
+        ? _jsx("span", { className: "hjm-list-row__leading", "data-shape": leadingShape, "data-size": leadingSize, 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, 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`).
-    return trailingAction ? (_jsxs("div", { className: "hjm-list-row-frame", "data-density": density, "data-leading": leading ? "" : undefined, "data-state": disabled ? "disabled" : selected ? "selected" : "idle", style: layoutStyle, children: [linked, _jsx("div", { className: "hjm-list-row__action", children: trailingAction })] })) : linked;
+    return separateActions ? (_jsxs("div", { className: "hjm-list-row-frame", "data-leading-action": leadingAction ? "" : undefined, "data-trailing-action": trailingAction ? "" : undefined, "data-density": density, "data-leading": leading ? "" : undefined, "data-state": disabled ? "disabled" : selected ? "selected" : "idle", style: layoutStyle, children: [leadingAction && leading ? _jsx("div", { className: "hjm-list-row__profile", children: _jsx(IdentityAction, { action: leadingAction, children: leading }) }) : null, linked, trailingAction ? _jsx("div", { className: "hjm-list-row__action", children: trailingAction }) : null] })) : linked;
 });
 //# sourceMappingURL=display.js.map

package/dist/display.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../src/display.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { IdentityAction } from \"./internal/identity-action.js\";\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    /** Independent identity destination, outside the card activation host. */\n    leadingAction?: Readonly<{label:string;onPress():void; disabled?: boolean }>;\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    leadingAction,\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 || leadingAction));\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\" data-interactive={leadingAction?\"\":undefined}>\n                {leadingAction?<IdentityAction action={leadingAction}>{leading}</IdentityAction>: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    /** Independent member destination; rendered beside, never inside, the row command. */\n    leadingAction?: Readonly<{ label: string; onPress(): void; disabled?: boolean }>;\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    /** Large member portraits use the shared 48px frame; icons retain the default frame. */\n    leadingSize?: \"default\" | \"large\";\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    leadingAction,\n    trailing,\n    trailingAccessory = listRowRecipe.defaults.trailingAccessory,\n    trailingAction,\n    renderLink,\n    density: densityProp,\n    tone = listRowRecipe.defaults.tone,\n    leadingShape = \"square\",\n    leadingSize = leadingShape === \"circle\" ? \"large\" : \"default\",\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 separateActions = Boolean(trailingAction || leadingAction);\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-size={leadingSize} 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: separateActions ? style : { ...style, ...layoutStyle },\n    },\n    leading && !leadingAction\n      ? <span className=\"hjm-list-row__leading\" data-shape={leadingShape} data-size={leadingSize}>{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 separateActions ? (\n    <div className=\"hjm-list-row-frame\" data-leading-action={leadingAction ? \"\" : undefined} data-trailing-action={trailingAction ? \"\" : undefined} data-density={density} data-leading={leading ? \"\" : undefined}\n      data-state={disabled ? \"disabled\" : selected ? \"selected\" : \"idle\"} style={layoutStyle}>\n      {leadingAction && leading ? <div className=\"hjm-list-row__profile\"><IdentityAction action={leadingAction}>{leading}</IdentityAction></div> : null}\n      {linked}\n      {trailingAction ? <div className=\"hjm-list-row__action\">{trailingAction}</div> : null}\n    </div>\n  ) : linked;\n});\n"]}