@usefidel/design-system 0.4.0 → 0.6.0

package/dist/fidel.manifest.json

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

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,30 @@ 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,
+      "data-highlighted": element.highlighted ? "true" : void 0,
+      "data-anchor-id": element.anchorId,
+      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.css

@@ -310,6 +310,11 @@
 .fds-diff-section__element {
   display: flex;
   flex-direction: column;
+  transition: background var(--duration-quick, 150ms) ease;
+}
+.fds-diff-section__element[data-highlighted=true] {
+  background: var(--color-accent-subtle, var(--color-surface-hover));
+  box-shadow: inset 2px 0 0 var(--color-accent);
 }
 .fds-diff-section__element-head {
   display: flex;

package/dist/index.d.cts

@@ -82,8 +82,28 @@ 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;
+    /**
+     * Emphasise this row without expanding it. When `true` the element renders a
+     * highlight treatment (a subtle fill and an accent edge). Use it to reflect
+     * an external selection — e.g. hovering a screenshot annotation highlighting
+     * its matching drawer row. Purely visual; does not affect `open`.
+     */
+    highlighted?: boolean;
+    /**
+     * Stamped onto the element root as `data-anchor-id`, giving the caller a
+     * stable handle to scroll this row into view (e.g. from a screenshot
+     * annotation) without threading a ref through the component.
+     */
+    anchorId?: string;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */
@@ -105,6 +125,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 +149,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,28 @@ 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;
+    /**
+     * Emphasise this row without expanding it. When `true` the element renders a
+     * highlight treatment (a subtle fill and an accent edge). Use it to reflect
+     * an external selection — e.g. hovering a screenshot annotation highlighting
+     * its matching drawer row. Purely visual; does not affect `open`.
+     */
+    highlighted?: boolean;
+    /**
+     * Stamped onto the element root as `data-anchor-id`, giving the caller a
+     * stable handle to scroll this row into view (e.g. from a screenshot
+     * annotation) without threading a ref through the component.
+     */
+    anchorId?: string;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */
@@ -105,6 +125,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 +149,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,30 @@ 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,
+      "data-highlighted": element.highlighted ? "true" : void 0,
+      "data-anchor-id": element.anchorId,
+      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.6.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",