sherick-ui 2.0.0 → 2.1.0

package/dist/cjs/components/fileUpload.rules.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+/* File selection rules for `FileUpload`.
+
+   The native chooser and the drop zone are two doors into one policy: the same accept, the same
+   per-file size and the same total count decide both, so a file the picker would refuse cannot
+   slip in through a drop. Nothing here reads a browser global — every rule works from the
+   metadata a `File` already carries — so the module is safe to evaluate during SSR and can be
+   probed without a document.
+
+   `FileUpload.tsx` composes the field around these rules; it owns no rule of its own. */
+/** The identity of one selection entry: the fields that make two `File`s the same choice. */
+const fileKey = (file) => `${file.name}\u0000${file.size}\u0000${file.type}\u0000${file.lastModified}`;
+/** The per-file byte limit as a whole number, or `undefined` when the caller set none. */
+const resolveMaxSize = (maxSize) => maxSize !== undefined && Number.isFinite(maxSize) && maxSize >= 0 ? Math.floor(maxSize) : undefined;
+/**
+ * The total file limit, or `undefined` when the selection is unbounded. A single-file field
+ * holds exactly one: the picker is told nothing about it, because that limit is what makes a
+ * second file a replacement rather than an addition.
+ */
+const resolveMaxFiles = (maxFiles, multiple) => {
+    if (!multiple)
+        return 1;
+    return maxFiles !== undefined && Number.isFinite(maxFiles) && maxFiles >= 0
+        ? Math.floor(maxFiles)
+        : undefined;
+};
+/** A byte limit as the copy spells it: `2 MB`, never `2097152`. */
+const formatBytes = (bytes) => {
+    const units = ["B", "KB", "MB", "GB"];
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    return `${Number.isInteger(value) ? value : value.toFixed(1)} ${units[unit]}`;
+};
+const acceptTokens = (accept) => (accept !== null && accept !== void 0 ? accept : "")
+    .split(",")
+    .map((token) => token.trim().toLowerCase())
+    .filter(Boolean);
+/** An extension token starts with a dot; anything else has to name a media type. */
+const isAcceptToken = (token) => (token.startsWith(".") ? token.length > 1 : token.includes("/"));
+/**
+ * Whether a file satisfies the native `accept` restriction. An extension token matches the file
+ * name, a media type matches the reported MIME type, and a `type/*` wildcard matches a whole
+ * family of them. A file that reports no MIME type at all can satisfy an extension but can never
+ * establish a MIME-only match, which is exactly what the platform does. A malformed `accept`
+ * value is ignored entirely rather than taken as a restriction that refuses everything, again
+ * mirroring the platform: a typo must not close the field.
+ */
+const matchesAccept = (file, accept) => {
+    const tokens = acceptTokens(accept);
+    if (tokens.length === 0 || !tokens.every(isAcceptToken))
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return tokens.some((token) => {
+        if (token.startsWith("."))
+            return name.endsWith(token);
+        if (token.endsWith("/*"))
+            return type !== "" && type.startsWith(token.slice(0, -1));
+        return type !== "" && type === token;
+    });
+};
+const countMessage = (file, limit, multiple) => multiple
+    ? `${file.name} was not added: at most ${limit} file${limit === 1 ? "" : "s"} can be selected.`
+    : `${file.name} was not added: this field holds one file.`;
+/**
+ * Applies the whole policy to one batch, from either door.
+ *
+ * Each file is judged type first, then size, then count — the caller's order of severity — and a
+ * refusal never removes a file that was already accepted, so the valid part of a mixed batch
+ * still enters. A file the selection already holds is not a failure, it is the same choice
+ * arriving twice, so it is neither reported nor counted against the limit.
+ *
+ * A single-file field starts from an empty selection: the first accepted file replaces what was
+ * there and everything after it is a count failure.
+ */
+const selectFiles = ({ incoming, current, limits, }) => {
+    const maxSize = resolveMaxSize(limits.maxSize);
+    const maxFiles = resolveMaxFiles(limits.maxFiles, limits.multiple);
+    const files = limits.multiple ? [...current] : [];
+    const keys = new Set(current.map(fileKey));
+    const rejections = [];
+    let accepted = 0;
+    for (const file of incoming) {
+        if (!matchesAccept(file, limits.accept)) {
+            rejections.push({ file, code: "type", message: `${file.name} is not an accepted file type.` });
+            continue;
+        }
+        if (maxSize !== undefined && file.size > maxSize) {
+            rejections.push({
+                file,
+                code: "size",
+                message: `${file.name} is larger than the ${formatBytes(maxSize)} limit.`,
+            });
+            continue;
+        }
+        const key = fileKey(file);
+        if (keys.has(key))
+            continue;
+        if (maxFiles !== undefined && files.length >= maxFiles) {
+            rejections.push({ file, code: "count", message: countMessage(file, maxFiles, limits.multiple) });
+            continue;
+        }
+        keys.add(key);
+        files.push(file);
+        accepted += 1;
+    }
+    return { files, rejections, accepted };
+};
+
+exports.fileKey = fileKey;
+exports.formatBytes = formatBytes;
+exports.matchesAccept = matchesAccept;
+exports.resolveMaxFiles = resolveMaxFiles;
+exports.resolveMaxSize = resolveMaxSize;
+exports.selectFiles = selectFiles;
+//# sourceMappingURL=fileUpload.rules.cjs.map

package/dist/cjs/components/fileUpload.rules.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileUpload.rules.cjs","sources":["../../../src/components/fileUpload.rules.ts"],"sourcesContent":["/* File selection rules for `FileUpload`.\n\n   The native chooser and the drop zone are two doors into one policy: the same accept, the same\n   per-file size and the same total count decide both, so a file the picker would refuse cannot\n   slip in through a drop. Nothing here reads a browser global — every rule works from the\n   metadata a `File` already carries — so the module is safe to evaluate during SSR and can be\n   probed without a document.\n\n   `FileUpload.tsx` composes the field around these rules; it owns no rule of its own. */\n\nexport type RejectionCode = \"type\" | \"size\" | \"count\";\n\n/** One file a selection operation refused, with the reason it was refused. */\nexport interface FileRejection {\n  file: File;\n  code: RejectionCode;\n  message: string;\n}\n\nexport interface FileSelectionLimits {\n  /** The native `accept` value, comma-separated MIME types and extensions. */\n  accept?: string;\n  /** Per-file byte limit, already normalized. */\n  maxSize?: number;\n  /** Total file limit, already normalized. */\n  maxFiles?: number;\n  /** Whether the field holds several files or replaces its selection with one. */\n  multiple: boolean;\n}\n\nexport interface FileSelection {\n  /** The selection the operation leaves behind. */\n  files: File[];\n  /** Everything the batch refused, in the order it arrived. */\n  rejections: FileRejection[];\n  /** How many of the incoming files entered the selection. */\n  accepted: number;\n}\n\n/** The identity of one selection entry: the fields that make two `File`s the same choice. */\nexport const fileKey = (file: File) =>\n  `${file.name}\\u0000${file.size}\\u0000${file.type}\\u0000${file.lastModified}`;\n\n/** The per-file byte limit as a whole number, or `undefined` when the caller set none. */\nexport const resolveMaxSize = (maxSize?: number) =>\n  maxSize !== undefined && Number.isFinite(maxSize) && maxSize >= 0 ? Math.floor(maxSize) : undefined;\n\n/**\n * The total file limit, or `undefined` when the selection is unbounded. A single-file field\n * holds exactly one: the picker is told nothing about it, because that limit is what makes a\n * second file a replacement rather than an addition.\n */\nexport const resolveMaxFiles = (maxFiles: number | undefined, multiple: boolean) => {\n  if (!multiple) return 1;\n  return maxFiles !== undefined && Number.isFinite(maxFiles) && maxFiles >= 0\n    ? Math.floor(maxFiles)\n    : undefined;\n};\n\n/** A byte limit as the copy spells it: `2 MB`, never `2097152`. */\nexport const formatBytes = (bytes: number) => {\n  const units = [\"B\", \"KB\", \"MB\", \"GB\"];\n  let value = bytes;\n  let unit = 0;\n  while (value >= 1024 && unit < units.length - 1) {\n    value /= 1024;\n    unit += 1;\n  }\n  return `${Number.isInteger(value) ? value : value.toFixed(1)} ${units[unit]}`;\n};\n\nconst acceptTokens = (accept?: string) =>\n  (accept ?? \"\")\n    .split(\",\")\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n\n/** An extension token starts with a dot; anything else has to name a media type. */\nconst isAcceptToken = (token: string) => (token.startsWith(\".\") ? token.length > 1 : token.includes(\"/\"));\n\n/**\n * Whether a file satisfies the native `accept` restriction. An extension token matches the file\n * name, a media type matches the reported MIME type, and a `type/*` wildcard matches a whole\n * family of them. A file that reports no MIME type at all can satisfy an extension but can never\n * establish a MIME-only match, which is exactly what the platform does. A malformed `accept`\n * value is ignored entirely rather than taken as a restriction that refuses everything, again\n * mirroring the platform: a typo must not close the field.\n */\nexport const matchesAccept = (file: File, accept?: string) => {\n  const tokens = acceptTokens(accept);\n  if (tokens.length === 0 || !tokens.every(isAcceptToken)) return true;\n\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n\n  return tokens.some((token) => {\n    if (token.startsWith(\".\")) return name.endsWith(token);\n    if (token.endsWith(\"/*\")) return type !== \"\" && type.startsWith(token.slice(0, -1));\n    return type !== \"\" && type === token;\n  });\n};\n\nconst countMessage = (file: File, limit: number, multiple: boolean) =>\n  multiple\n    ? `${file.name} was not added: at most ${limit} file${limit === 1 ? \"\" : \"s\"} can be selected.`\n    : `${file.name} was not added: this field holds one file.`;\n\n/**\n * Applies the whole policy to one batch, from either door.\n *\n * Each file is judged type first, then size, then count — the caller's order of severity — and a\n * refusal never removes a file that was already accepted, so the valid part of a mixed batch\n * still enters. A file the selection already holds is not a failure, it is the same choice\n * arriving twice, so it is neither reported nor counted against the limit.\n *\n * A single-file field starts from an empty selection: the first accepted file replaces what was\n * there and everything after it is a count failure.\n */\nexport const selectFiles = ({\n  incoming,\n  current,\n  limits,\n}: {\n  incoming: File[];\n  current: File[];\n  limits: FileSelectionLimits;\n}): FileSelection => {\n  const maxSize = resolveMaxSize(limits.maxSize);\n  const maxFiles = resolveMaxFiles(limits.maxFiles, limits.multiple);\n\n  const files = limits.multiple ? [...current] : [];\n  const keys = new Set(current.map(fileKey));\n  const rejections: FileRejection[] = [];\n  let accepted = 0;\n\n  for (const file of incoming) {\n    if (!matchesAccept(file, limits.accept)) {\n      rejections.push({ file, code: \"type\", message: `${file.name} is not an accepted file type.` });\n      continue;\n    }\n\n    if (maxSize !== undefined && file.size > maxSize) {\n      rejections.push({\n        file,\n        code: \"size\",\n        message: `${file.name} is larger than the ${formatBytes(maxSize)} limit.`,\n      });\n      continue;\n    }\n\n    const key = fileKey(file);\n    if (keys.has(key)) continue;\n\n    if (maxFiles !== undefined && files.length >= maxFiles) {\n      rejections.push({ file, code: \"count\", message: countMessage(file, maxFiles, limits.multiple) });\n      continue;\n    }\n\n    keys.add(key);\n    files.push(file);\n    accepted += 1;\n  }\n\n  return { files, rejections, accepted };\n};\n"],"names":[],"mappings":"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"}

package/dist/cjs/components/tree.cjs

@@ -0,0 +1,95 @@
+'use strict';
+
+/**
+ * How long a typed sequence stays open for extension.
+ *
+ * A node label is a word rather than a document, so a search only spans a few characters: long
+ * enough that typing quickly reads as one search, short enough that the next deliberate
+ * character starts a new one instead of extending a stale one.
+ */
+const typeaheadWindow = 500;
+/** Whether a node holds children the tree can show. */
+const isBranch = (item) => { var _a, _b; return ((_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; };
+/**
+ * The nodes in the order the tree presents them: a document-order walk that descends into an
+ * expanded branch and leaves a collapsed one alone.
+ *
+ * This is the one place that decides what "visible" means, and the keyboard, the typeahead and
+ * the roving tab stop all read it rather than walking the tree again — so they can never
+ * disagree about which node is where.
+ */
+const flattenTree = (items, expanded) => {
+    const rows = [];
+    const collect = (nodes, depth, ancestors, ancestorDisabled) => {
+        var _a, _b;
+        for (const item of nodes) {
+            const expandedHere = isBranch(item) && expanded.has(item.value);
+            rows.push({
+                item,
+                depth,
+                parent: (_a = ancestors[ancestors.length - 1]) !== null && _a !== void 0 ? _a : null,
+                ancestors,
+                expanded: expandedHere,
+                ancestorDisabled,
+            });
+            if (expandedHere) {
+                collect((_b = item.children) !== null && _b !== void 0 ? _b : [], depth + 1, [...ancestors, item.value], ancestorDisabled || item.disabled === true);
+            }
+        }
+    };
+    collect(items, 0, [], false);
+    return rows;
+};
+/** The nearest of `ancestors`, deepest first, that the tree still shows. */
+const nearestVisible = (ancestors, visible) => {
+    for (let index = ancestors.length - 1; index >= 0; index -= 1) {
+        if (visible.has(ancestors[index]))
+            return ancestors[index];
+    }
+    return null;
+};
+/**
+ * The APG typeahead search: the next *visible* node whose label starts with the characters typed
+ * so far, starting after `from` and wrapping at the end of the tree.
+ *
+ * A search moves focus and nothing else. Selection is the user's decision, so typing a letter can
+ * never change what is chosen, and a node that a typeahead lands on is not selected by arriving.
+ */
+const matchTypeahead = (rows, pattern, from) => {
+    const query = pattern.toLowerCase();
+    if (query.length === 0 || rows.length === 0)
+        return null;
+    const start = rows.findIndex((row) => row.item.value === from);
+    for (let step = 1; step <= rows.length; step += 1) {
+        const row = rows[(start + step + rows.length) % rows.length];
+        if (row.item.label.toLowerCase().startsWith(query))
+            return row;
+    }
+    return null;
+};
+/**
+ * Advances the typeahead buffer by one keystroke.
+ *
+ * Characters typed in quick succession are one search — `d`, `o`, `c` looks for a label starting
+ * with "doc" — and the *same* character typed again cycles through the nodes that start with it
+ * rather than searching for a two-letter word that almost certainly does not exist. A repeat
+ * neither clears nor extends the buffer, so the next different character still widens the
+ * single-character search it was part of.
+ */
+const typeaheadStep = (buffer, key, now) => {
+    if (buffer.text.length === 0 || now - buffer.time >= typeaheadWindow) {
+        return { buffer: { text: key, time: now }, pattern: key };
+    }
+    if (buffer.text === key) {
+        return { buffer: { text: buffer.text, time: now }, pattern: key };
+    }
+    return { buffer: { text: buffer.text + key, time: now }, pattern: buffer.text + key };
+};
+
+exports.flattenTree = flattenTree;
+exports.isBranch = isBranch;
+exports.matchTypeahead = matchTypeahead;
+exports.nearestVisible = nearestVisible;
+exports.typeaheadStep = typeaheadStep;
+exports.typeaheadWindow = typeaheadWindow;
+//# sourceMappingURL=tree.cjs.map

package/dist/cjs/components/tree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.cjs","sources":["../../../src/components/tree.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\n/**\n * The finite static tree a `TreeView` presents.\n *\n * A node is data, never markup: the tree renders the roles, the nesting and the indentation\n * itself, so every node in it is reachable the same way whether it is a leaf or a branch.\n * `value` identifies a node throughout the tree and is unique; `label` is what the node is\n * called — its accessible name and what a typeahead search matches.\n */\nexport interface TreeViewItem {\n  value: string;\n  label: string;\n  icon?: ReactNode;\n  disabled?: boolean;\n  children?: TreeViewItem[];\n}\n\n/** One node, as the tree currently shows it. */\nexport interface TreeRow {\n  item: TreeViewItem;\n  /** How deep the node sits, counted from the roots. */\n  depth: number;\n  /** The node that contains it, or `null` at the top level. */\n  parent: string | null;\n  /** Its ancestors, outermost first. */\n  ancestors: string[];\n  /** Whether this node's own children are shown. */\n  expanded: boolean;\n  /**\n   * Whether a node above this one is disabled. `aria-disabled` is inherited down a subtree, and\n   * this tree deliberately does not mean that: a node below an unavailable branch is its own\n   * node, so the row has to be able to say it is not itself unavailable.\n   */\n  ancestorDisabled: boolean;\n}\n\n/** The characters a typeahead search has accumulated, and when the last one arrived. */\nexport interface TypeaheadBuffer {\n  text: string;\n  time: number;\n}\n\n/**\n * How long a typed sequence stays open for extension.\n *\n * A node label is a word rather than a document, so a search only spans a few characters: long\n * enough that typing quickly reads as one search, short enough that the next deliberate\n * character starts a new one instead of extending a stale one.\n */\nexport const typeaheadWindow = 500;\n\n/** Whether a node holds children the tree can show. */\nexport const isBranch = (item: TreeViewItem) => (item.children?.length ?? 0) > 0;\n\n/**\n * The nodes in the order the tree presents them: a document-order walk that descends into an\n * expanded branch and leaves a collapsed one alone.\n *\n * This is the one place that decides what \"visible\" means, and the keyboard, the typeahead and\n * the roving tab stop all read it rather than walking the tree again — so they can never\n * disagree about which node is where.\n */\nexport const flattenTree = (items: TreeViewItem[], expanded: ReadonlySet<string>): TreeRow[] => {\n  const rows: TreeRow[] = [];\n\n  const collect = (\n    nodes: TreeViewItem[],\n    depth: number,\n    ancestors: string[],\n    ancestorDisabled: boolean\n  ) => {\n    for (const item of nodes) {\n      const expandedHere = isBranch(item) && expanded.has(item.value);\n      rows.push({\n        item,\n        depth,\n        parent: ancestors[ancestors.length - 1] ?? null,\n        ancestors,\n        expanded: expandedHere,\n        ancestorDisabled,\n      });\n      if (expandedHere) {\n        collect(\n          item.children ?? [],\n          depth + 1,\n          [...ancestors, item.value],\n          ancestorDisabled || item.disabled === true\n        );\n      }\n    }\n  };\n\n  collect(items, 0, [], false);\n  return rows;\n};\n\n/** The nearest of `ancestors`, deepest first, that the tree still shows. */\nexport const nearestVisible = (\n  ancestors: string[],\n  visible: ReadonlySet<string>\n): string | null => {\n  for (let index = ancestors.length - 1; index >= 0; index -= 1) {\n    if (visible.has(ancestors[index])) return ancestors[index];\n  }\n  return null;\n};\n\n/**\n * The APG typeahead search: the next *visible* node whose label starts with the characters typed\n * so far, starting after `from` and wrapping at the end of the tree.\n *\n * A search moves focus and nothing else. Selection is the user's decision, so typing a letter can\n * never change what is chosen, and a node that a typeahead lands on is not selected by arriving.\n */\nexport const matchTypeahead = (\n  rows: TreeRow[],\n  pattern: string,\n  from: string | null\n): TreeRow | null => {\n  const query = pattern.toLowerCase();\n  if (query.length === 0 || rows.length === 0) return null;\n\n  const start = rows.findIndex((row) => row.item.value === from);\n  for (let step = 1; step <= rows.length; step += 1) {\n    const row = rows[(start + step + rows.length) % rows.length];\n    if (row.item.label.toLowerCase().startsWith(query)) return row;\n  }\n  return null;\n};\n\n/**\n * Advances the typeahead buffer by one keystroke.\n *\n * Characters typed in quick succession are one search — `d`, `o`, `c` looks for a label starting\n * with \"doc\" — and the *same* character typed again cycles through the nodes that start with it\n * rather than searching for a two-letter word that almost certainly does not exist. A repeat\n * neither clears nor extends the buffer, so the next different character still widens the\n * single-character search it was part of.\n */\nexport const typeaheadStep = (\n  buffer: TypeaheadBuffer,\n  key: string,\n  now: number\n): { buffer: TypeaheadBuffer; pattern: string } => {\n  if (buffer.text.length === 0 || now - buffer.time >= typeaheadWindow) {\n    return { buffer: { text: key, time: now }, pattern: key };\n  }\n\n  if (buffer.text === key) {\n    return { buffer: { text: buffer.text, time: now }, pattern: key };\n  }\n\n  return { buffer: { text: buffer.text + key, time: now }, pattern: buffer.text + key };\n};\n"],"names":[],"mappings":"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"}

package/dist/cjs/components/ui.common.cjs

@@ -68,6 +68,8 @@ var ui_motion = require('./ui.motion.cjs');
    draws it from the wrapping control instead of the track it contains. */
 const focusRing = "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]";
 const focusRingInset = "focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus";
+/* A focus owner that also contains a subtree paints the inset ring on its direct row only. */
+const parentFocusRingInset = "[:focus-visible>&]:ring-2 [:focus-visible>&]:ring-inset [:focus-visible>&]:ring-sherick-focus";
 /* The ring of a value control that is itself the focusable element: it wears it whenever it
    holds focus, however it was focused, and whenever the surface it opened is on screen. A select
    hands the DOM focus to its list while that list is open, so the ring follows the control's
@@ -81,6 +83,8 @@ const focusRingHeld = "focus:outline-none focus:outline focus:outline-2 focus:ou
    input is `:focus-visible` only for the keyboard, so a slider's handle saves its ring for the
    keyboard and lets its own engagement answer the pointer. */
 const focusRingWithin = "has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-sherick-focus has-[:focus-visible]:outline-offset-[3px]";
+/* A file drag marks the same target with the same outline as visible keyboard focus. */
+const focusRingDrag = "data-[dragging]:outline data-[dragging]:outline-2 data-[dragging]:outline-sherick-focus data-[dragging]:outline-offset-[3px]";
 const groupFocusRing = "group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-sherick-focus group-focus-visible:outline-offset-[3px]";
 /* Motion is not owned here. Every physical event — feedback, tactile, arrive, orient,
    relocate, direct, presence and activity — is a named recipe in `ui.motion.ts`, which
@@ -94,7 +98,7 @@ const groupFocusRing = "group-focus-visible:outline group-focus-visible:outline-
                touchable; pressing it returns it to the track.
    - floating: a surface that genuinely sits above the application.
    - control:  the resting half of the tactile pair, for a part the user moves —
-               a switch thumb, a selected segment.
+               a switch thumb, a selected segment or a held option/date selection.
    - recessed: the other half of that pair: a groove, a track or a well, which is
                recessed by definition, and a raised control while it is held, which
                lands at the same depth.
@@ -112,6 +116,9 @@ const elevation = {
        of the well is deepened and that boundary is what says what it is. See `selectable.markSurface`. */
     well: "shadow-sherick-well",
 };
+/* An inset sheet's shaded upper wall, without a lower rim. Kept independent so
+   unrelated components do not bundle this recipe. */
+const recessedTop = "shadow-sherick-recessed-top";
 /* Shape — semantic corner roles, never an arbitrary radius. Softness grows with
    the size of the object and the emphasis it carries:
    - control:     ordinary controls and dense data regions — fields, rows, options,
@@ -179,8 +186,8 @@ const effectiveDisabled = "data-[disabled]:cursor-not-allowed data-[disabled]:op
      pressed    a raised control returning to the recessed depth of its own track, plus
                 a slight compression; a flat control stays flat and a floating one keeps
                 its elevation
-     selected   a selected tone; depth comes from the component's anatomy — a
-                segment inside a groove is raised, a row in a list is not
+     selected   a held choice: selected tone plus control elevation on a segment,
+                option/tree row or date surface; never on mere navigation highlight
      disabled   45% opacity, no pointer affordance, no interactive state at all
      focus      the shared outer focus ring, visible on keyboard focus */
 const state = {
@@ -220,7 +227,8 @@ const state = {
     field: {
         hover: "hover:bg-sherick-surface-high/[0.82]",
         focus: "focus:bg-sherick-surface-high/[0.9]",
-        focusWithin: "focus-within:bg-sherick-surface-high/[0.9]",
+        /* A composite's engaged tone outranks hover, independent of variant emission order. */
+        focusWithin: "[&&]:focus-within:bg-sherick-surface-high/[0.9]",
         engaged: "bg-sherick-surface-high/[0.9]",
         errorHover: "hover:bg-sherick-danger/[0.10]",
         errorFocus: "focus:bg-sherick-danger/[0.13]",
@@ -231,7 +239,7 @@ const state = {
         invalid: "data-[invalid]:bg-sherick-danger/[0.075]",
         invalidHover: "data-[invalid]:hover:bg-sherick-danger/[0.10]",
         invalidEngaged: "data-[invalid]:bg-sherick-danger/[0.13]",
-        invalidFocusWithin: "data-[invalid]:focus-within:bg-sherick-danger/[0.13]",
+        invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]",
     },
 };
 /* State layers.
@@ -310,6 +318,8 @@ const hitArea = "relative after:pointer-events-auto after:absolute after:inset-[
                   should sit back from the surface around them.
    - matte:       a matte surface that separates from the canvas by tone alone.
    - matteHigh:   the second matte step, for nesting inside another matte surface.
+   - matteInset:  a passive sheet tucked under a stronger control; subdued without
+                  blending into the canvas or needing a drawn rim.
    - control:     the fill every text control shares, plus its placeholder tone.
    - handle:      the fill of a small part the user has to find — a value control's handle.
                   Surface steps sit within a few percent of their neighbours, so this role
@@ -357,6 +367,10 @@ const material = {
     acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]",
     acrylicHero: "bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-hero-blur)] backdrop-saturate-[var(--sui-glass-hero-saturation)] backdrop-brightness-[var(--sui-glass-hero-brightness)]",
 };
+/* Dark neutral behind native video, including poster loading and letterboxing. */
+const mediaCanvas = "bg-sherick-media";
+/* A passive sheet tucked below a stronger control; independently tree-shakeable. */
+const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
 /* Density — three control steps plus the accessible hit target.
    Density owns height and the type step, so controls of one density share a
    rhythm. A component's anatomy owns its padding: a button's inline padding is
@@ -468,8 +482,9 @@ const detail = {
    The sheet never exceeds what the viewport leaves it, and scrolls inside itself rather than
    growing. Its width is the list's own decision: a control's list is never narrower than the
    control it came from and grows to fit its own content until the viewport clamp, and a command
-   list only ever grows to its content. A row is flat — depth never announces a state —
-   and one row step of `stateLayer.quiet` plus `stateLayer.activeRow` carries both its hover and
+   list only ever grows to its content. Unselected rows and commands stay flat; held options
+   compose `tone.selected` with `elevation.control`. One row step of `stateLayer.quiet` plus
+   `stateLayer.activeRow` carries both its hover and
    its keyboard highlight, so an option and a command are highlighted by the same tone at the
    same strength. Keyboard focus adds the shared inset ring independently of that highlight.
    Selection is a tint of the sheet through `tone.selected` and never the opaque
@@ -659,6 +674,7 @@ exports.edgeTone = edgeTone;
 exports.elevation = elevation;
 exports.fieldLayout = fieldLayout;
 exports.focusRing = focusRing;
+exports.focusRingDrag = focusRingDrag;
 exports.focusRingHeld = focusRingHeld;
 exports.focusRingInset = focusRingInset;
 exports.focusRingWithin = focusRingWithin;
@@ -666,7 +682,11 @@ exports.groupFocusRing = groupFocusRing;
 exports.hitArea = hitArea;
 exports.list = list;
 exports.material = material;
+exports.matteInset = matteInset;
+exports.mediaCanvas = mediaCanvas;
 exports.overlay = overlay;
+exports.parentFocusRingInset = parentFocusRingInset;
+exports.recessedTop = recessedTop;
 exports.recipeAlphas = recipeAlphas;
 exports.selectable = selectable;
 exports.shape = shape;