@usefidel/design-system 0.4.0 → 0.5.0

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.4.0",
-  "resolvedSha": "2ffffb3224acff54fc34007bdbf831644f69fa22"
+  "packageVersion": "0.5.0",
+  "resolvedSha": "03a49c2e8d888b7916f449d7801daa922c525737"
 }

package/dist/index.cjs

@@ -129,6 +129,8 @@ function DiffSection({
   elements,
   defaultExpanded = false,
   headerless = false,
+  onElementToggle,
+  onElementHover,
   className,
   ...rest
 }) {
@@ -165,14 +167,35 @@ function DiffSection({
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ElementRow, { element: el }, `${el.name}-${ei}`)) })
+        open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ElementRow,
+          {
+            element: el,
+            index: ei,
+            onToggle: onElementToggle,
+            onHover: onElementHover
+          },
+          `${el.name}-${ei}`
+        )) })
       ]
     }
   );
 }
-function ElementRow({ element }) {
+function ElementRow({
+  element,
+  index,
+  onToggle,
+  onHover
+}) {
   const hasDetail = element.detail != null;
-  const [open, setOpen] = (0, import_react2.useState)(element.defaultOpen ?? false);
+  const isControlled = element.open !== void 0;
+  const [internalOpen, setInternalOpen] = (0, import_react2.useState)(element.defaultOpen ?? false);
+  const open = isControlled ? !!element.open : internalOpen;
+  const toggle = () => {
+    const next = !open;
+    if (!isControlled) setInternalOpen(next);
+    onToggle?.(index, next);
+  };
   const lines = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-diff-section__element-head-inner", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__element-name", children: element.name }),
@@ -188,19 +211,28 @@ function ElementRow({ element }) {
       ] })
     ] }, `${line.property}-${li}`)) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-diff-section__element", "data-open": hasDetail && open ? "true" : void 0, children: [
-    hasDetail ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "fds-diff-section__element-head fds-diff-section__element-head--button",
-        "aria-expanded": open,
-        onClick: () => setOpen((v) => !v),
-        children: lines
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__element-head", children: lines }),
-    hasDetail && open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__detail", children: element.detail })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: "fds-diff-section__element",
+      "data-open": hasDetail && open ? "true" : void 0,
+      onMouseEnter: onHover ? () => onHover(index, true) : void 0,
+      onMouseLeave: onHover ? () => onHover(index, false) : void 0,
+      children: [
+        hasDetail ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "fds-diff-section__element-head fds-diff-section__element-head--button",
+            "aria-expanded": open,
+            onClick: toggle,
+            children: lines
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__element-head", children: lines }),
+        hasDetail && open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__detail", children: element.detail })
+      ]
+    }
+  );
 }
 function Chevron2({ open, className }) {
   const classes = [

package/dist/index.d.cts

@@ -82,8 +82,15 @@ interface DiffElement {
      * owns whatever lives inside.
      */
     detail?: ReactNode;
-    /** When the element has `detail`, render it open on first paint. @default false */
+    /** When the element has `detail`, render it open on first paint (uncontrolled). @default false */
     defaultOpen?: boolean;
+    /**
+     * Controlled open state. When defined, the row is controlled: the component
+     * renders this value and never keeps its own expand state — the caller owns
+     * it via `onElementToggle` (so drawer selection can drive, e.g., a matching
+     * screenshot highlight). Leave undefined for uncontrolled (`defaultOpen`).
+     */
+    open?: boolean;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */
@@ -105,6 +112,14 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
      * `mismatchCount` are ignored. @default false
      */
     headerless?: boolean;
+    /**
+     * Called when an element with `detail` is toggled. `index` is the element's
+     * position in `elements`. Pair with `DiffElement.open` to control expansion
+     * from the parent (e.g. to sync a screenshot highlight with drawer selection).
+     */
+    onElementToggle?: (index: number, open: boolean) => void;
+    /** Called when the pointer enters (`true`) or leaves (`false`) an element row. */
+    onElementHover?: (index: number, hovering: boolean) => void;
 }
 /**
  * Fidel design-system DiffSection — the mismatch drawer's section.
@@ -121,6 +136,6 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
  * Presentational only — no diff taxonomy. Framing is Live → Design (founder
  * decision 2026-04-24): each delta reads `live → design`.
  */
-declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, className, ...rest }: DiffSectionProps): react.JSX.Element;
+declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, onElementToggle, onElementHover, className, ...rest }: DiffSectionProps): react.JSX.Element;
 
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };

package/dist/index.d.ts

@@ -82,8 +82,15 @@ interface DiffElement {
      * owns whatever lives inside.
      */
     detail?: ReactNode;
-    /** When the element has `detail`, render it open on first paint. @default false */
+    /** When the element has `detail`, render it open on first paint (uncontrolled). @default false */
     defaultOpen?: boolean;
+    /**
+     * Controlled open state. When defined, the row is controlled: the component
+     * renders this value and never keeps its own expand state — the caller owns
+     * it via `onElementToggle` (so drawer selection can drive, e.g., a matching
+     * screenshot highlight). Leave undefined for uncontrolled (`defaultOpen`).
+     */
+    open?: boolean;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */
@@ -105,6 +112,14 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
      * `mismatchCount` are ignored. @default false
      */
     headerless?: boolean;
+    /**
+     * Called when an element with `detail` is toggled. `index` is the element's
+     * position in `elements`. Pair with `DiffElement.open` to control expansion
+     * from the parent (e.g. to sync a screenshot highlight with drawer selection).
+     */
+    onElementToggle?: (index: number, open: boolean) => void;
+    /** Called when the pointer enters (`true`) or leaves (`false`) an element row. */
+    onElementHover?: (index: number, hovering: boolean) => void;
 }
 /**
  * Fidel design-system DiffSection — the mismatch drawer's section.
@@ -121,6 +136,6 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
  * Presentational only — no diff taxonomy. Framing is Live → Design (founder
  * decision 2026-04-24): each delta reads `live → design`.
  */
-declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, className, ...rest }: DiffSectionProps): react.JSX.Element;
+declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, onElementToggle, onElementHover, className, ...rest }: DiffSectionProps): react.JSX.Element;
 
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };

package/dist/index.js

@@ -101,6 +101,8 @@ function DiffSection({
   elements,
   defaultExpanded = false,
   headerless = false,
+  onElementToggle,
+  onElementHover,
   className,
   ...rest
 }) {
@@ -137,14 +139,35 @@ function DiffSection({
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ jsx3(ElementRow, { element: el }, `${el.name}-${ei}`)) })
+        open && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ jsx3(
+          ElementRow,
+          {
+            element: el,
+            index: ei,
+            onToggle: onElementToggle,
+            onHover: onElementHover
+          },
+          `${el.name}-${ei}`
+        )) })
       ]
     }
   );
 }
-function ElementRow({ element }) {
+function ElementRow({
+  element,
+  index,
+  onToggle,
+  onHover
+}) {
   const hasDetail = element.detail != null;
-  const [open, setOpen] = useState2(element.defaultOpen ?? false);
+  const isControlled = element.open !== void 0;
+  const [internalOpen, setInternalOpen] = useState2(element.defaultOpen ?? false);
+  const open = isControlled ? !!element.open : internalOpen;
+  const toggle = () => {
+    const next = !open;
+    if (!isControlled) setInternalOpen(next);
+    onToggle?.(index, next);
+  };
   const lines = /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__element-head-inner", children: [
       /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__element-name", children: element.name }),
@@ -160,19 +183,28 @@ function ElementRow({ element }) {
       ] })
     ] }, `${line.property}-${li}`)) })
   ] });
-  return /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__element", "data-open": hasDetail && open ? "true" : void 0, children: [
-    hasDetail ? /* @__PURE__ */ jsx3(
-      "button",
-      {
-        type: "button",
-        className: "fds-diff-section__element-head fds-diff-section__element-head--button",
-        "aria-expanded": open,
-        onClick: () => setOpen((v) => !v),
-        children: lines
-      }
-    ) : /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__element-head", children: lines }),
-    hasDetail && open && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__detail", children: element.detail })
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "fds-diff-section__element",
+      "data-open": hasDetail && open ? "true" : void 0,
+      onMouseEnter: onHover ? () => onHover(index, true) : void 0,
+      onMouseLeave: onHover ? () => onHover(index, false) : void 0,
+      children: [
+        hasDetail ? /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "fds-diff-section__element-head fds-diff-section__element-head--button",
+            "aria-expanded": open,
+            onClick: toggle,
+            children: lines
+          }
+        ) : /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__element-head", children: lines }),
+        hasDetail && open && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__detail", children: element.detail })
+      ]
+    }
+  );
 }
 function Chevron2({ open, className }) {
   const classes = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Fidel brand design tokens + React component library — DTCG token source of truth, generated per-surface CSS + Tailwind-v4 parser-compatibility output, and on-brand React components (Button, MismatchCard, DiffSection).",
   "type": "module",
   "main": "./dist/index.cjs",