@yahoo/uds-create-cli 5.76.0 → 5.77.0

package/subprocess/transform-runner.mjs

@@ -82268,6 +82268,10 @@ function classLeaf(leaf) {
   const spaced = leaf.replace(/\s+/g, "-");
   return /^\d+\/\d+$/.test(spaced) ? spaced : spaced.replaceAll("/", "-");
 }
+function arbitraryClassName({ config: config2, path: path2, value }) {
+  const inner = value.slice(1, -1).replace(/\s+/g, "_");
+  return `${stylePropClassBase(config2, path2)}-[${inner}]`;
+}
 function stylePropClasses(config2, path2) {
   const out = /* @__PURE__ */ new Map();
   for (const leaf of stylePropValueLeaves(config2, path2)) if (!out.has(leaf)) out.set(leaf, stylePropClassName(config2, path2, leaf));
@@ -86396,7 +86400,7 @@ var ComponentEntity = defineEntity({
       input: external_exports.object({ path: pathInput("component") }),
       readOnly: false,
       label: "Create blank",
-      description: 'Create an empty component at a new qualified `path`, to design on the canvas first: one `div` root layer and the node that renders it, with no props, no variants, no slot, no styles and no preview content. This is exactly what Studio\'s "+" creates. Takes only `path`. Use it for "a new component", "a blank component" or "start a component from nothing"; `create` is for a component whose body is already known.',
+      description: 'Create an empty component at a new qualified `path`, to design on the canvas first: one `div` root layer and the node that renders it, with no props, no variants, no slot, no styles and no preview content. This is exactly what Create\'s "+" creates. Takes only `path`. Use it for "a new component", "a blank component" or "start a component from nothing"; `create` is for a component whose body is already known.',
       scope: "item",
       creates: true,
       title: (entity) => `Create blank ${entity}`,
@@ -86415,7 +86419,7 @@ var ComponentEntity = defineEntity({
       example: ({ config: config2 }) => forwardsCreateExample(config2)
     },
     "sub-upsert/forwards": { description: `Set what one layer forwards, added when absent and replaced whole when present. ${FORWARDS_DESCRIPTION}` },
-    "sub-update/forwards": { description: `Replace what one layer forwards: the member is \`'*'\` or a list, so \`data\` is the whole new value. ${FORWARDS_DESCRIPTION}` },
+    "sub-update/forwards": { description: `Replace what one layer forwards: the member is a list of prop names, so \`data\` is the whole new list. ${FORWARDS_DESCRIPTION}` },
     /**
     * Add an element to a composition — a layer and the node that targets it, together.
     *
@@ -86714,7 +86718,7 @@ var ComponentEntity = defineEntity({
       }),
       readOnly: false,
       label: "Forward layer props",
-      description: 'Expose a layer\'s props at the component\'s top level ("forward everything from the root but icon", "also forward width"): `props` is `"*"` for every prop the layer\'s element takes, or a list added to what the layer forwards now, or that replaces it with `replace`; `except` leaves props out of either. A prop the element lacks, one the component declares itself, and one a sibling layer already forwards are refused. Read `component/get` for what a layer forwards now.',
+      description: 'Expose a layer\'s props at the component\'s top level ("also forward width", "forward onClick from the root"): `props` is a list of prop names, added to what the layer forwards now, or replacing it with `replace`. A prop the element lacks, one the component declares itself, and one a sibling layer already forwards are refused. Read `component/get` for what a layer forwards now.',
       scope: "item",
       title: (entity) => `Forward ${entity} layer props`,
       handler: (input2, config2) => {
@@ -87667,6 +87671,200 @@ function renderBoundProp(value) {
   return name.length > 0 && !name.includes("/") ? name : void 0;
 }
 
+// ../config/dist/entities/system/Icon.js
+var iconVariantAs = external_exports.union([external_exports.strictObject({ prop: external_exports.string().min(1) }), external_exports.strictObject({ export: external_exports.record(external_exports.string().min(1), external_exports.string().min(1)) })]);
+var Icon = defineEntity({
+  kind: "icon",
+  label: "Icon",
+  labelPlural: "Icons",
+  fields: iconMemberMetadata,
+  groupFields: external_exports.strictObject({
+    /** The package the glyphs come from — a REF to the `Package` item, which owns the module
+    *  specifier (its path) and the pinned version. A generated module imports the glyphs it renders
+    *  from it, and a render that imports a member of it is placing a glyph of this set. */
+    package: Package.optional().describe("The npm package the set comes from."),
+    /** Where member metadata comes from and how to read it — `{ from, format }`. The build resolves
+    *  the source and bakes each member's fields; see `icon-metadata.ts`. */
+    metadata: iconMetadataDeclaration.optional().describe("Catalogue metadata read from the package."),
+    /** Named sizes the set ships (`sm: 16`).
+    *  @deprecated How a glyph is sized is the icon tool's component's business: the icon tool's component declares its own `size` and `variant` props, and every surface reads those. TODO: remove with a migration once no surface reads the library's copy. */
+    sizes: external_exports.record(external_exports.string(), external_exports.number()).optional().describe("Deprecated. The icon tool's component declares its own `size` and `variant` props."),
+    /** Weights/styles the set ships (`regular`, `fill`).
+    *  @deprecated Which styles a glyph takes is the icon tool's component's business: the icon tool's component declares its own `size` and `variant` props, and every surface reads those. TODO: remove with a migration once no surface reads the library's copy. */
+    variants: external_exports.array(external_exports.string()).optional().describe("Deprecated. The icon tool's component declares its own `size` and `variant` props."),
+    /** How a variant reaches the glyph; see {@link iconVariantAs}. Absent, a variant is dropped at
+    *  render.
+    *  @deprecated Only the framework's raw-draw path read it; the icon tool's component passes a
+    *  variant the way its package wants, and a set whose styles are separate exports lists them as
+    *  members. TODO: remove with `sizes` and `variants`. */
+    variantAs: iconVariantAs.optional().describe("Deprecated. The icon tool's component passes a variant the way its package wants.")
+  }),
+  groupComputed: {
+    /** The glyphs the set ships, by leaf name. */
+    members: ({ config: config2, path: path2 }) => config2.members("icon", path2).map((member) => member.path.startsWith(`${path2}/`) ? member.path.slice(path2.length + 1) : member.path),
+    /** The module the glyphs import from: the named package's path. `pathOf` drops a source
+    *  qualifier, so a borrowed set's module is still the bare specifier. */
+    module: ({ meta: meta3 }) => isRef2(meta3.package) ? pathOf2(meta3.package) : void 0,
+    /** The version the named package pins, resolved through the ref in whichever config holds the
+    *  package row. */
+    version: ({ config: config2, meta: meta3 }) => {
+      if (!isRef2(meta3.package)) return void 0;
+      const pinned = config2.resolveRef(meta3.package)?.toJSON();
+      return typeof pinned?.version === "string" ? pinned.version : void 0;
+    }
+  },
+  groupInputs: {
+    /**
+    * The package's module namespace. The set's members are its glyph exports, named by the rule
+    * the metadata format declares (`glyphExportRule`), so an alias pair is one member and the
+    * package's infrastructure exports are none; `items` lays facts over members that exist, and a
+    * key naming no member is refused so a typo cannot invent a glyph. Each member's identity is
+    * recorded by reference, so an authored glyph (`name={StarIcon}`) is matched to its member by
+    * the object rather than by anything the component says about itself, and an alias resolves to
+    * the member it is. Read once while the config file is evaluated and never stored.
+    */
+    glyphs: ({ input: input2, body }) => {
+      if (!isRef2(body.package)) throw new Error("Icon.group: `glyphs` needs `package` on the same group, since a glyph is identified as an export of that module.");
+      const format = iconMetadataFormat.safeParse(body.metadata?.format);
+      const members2 = glyphMembersOf({
+        namespace: input2,
+        format: format.success ? format.data : void 0
+      });
+      const overlay = body.items ?? {};
+      const unknown2 = Object.keys(overlay).filter((name) => !members2.includes(name));
+      if (unknown2.length > 0) throw new Error(`Icon.group: \`items\` names ${spellValues(unknown2)}, which ${unknown2.length === 1 ? "is not a glyph export" : "are not glyph exports"} of \`glyphs\`${members2.length === 0 ? " (the namespace has no glyph components; the package may not be installed)" : ""}. \`items\` lays facts over the members the package exports; it cannot add one.`);
+      recordGlyphIdentities({
+        namespace: input2,
+        names: members2,
+        specifier: pathOf2(body.package)
+      });
+      return { items: Object.fromEntries(members2.map((name) => [name, overlay[name] ?? {}])) };
+    }
+  },
+  /**
+  * A value bound to a library may be the glyph component itself, or the `package:` export ref the
+  * open-bag pass turned it into. Either is answered as the member name when the export is one of
+  * this library's and comes from the module its `package` names.
+  */
+  authoredValue: ({ config: config2, target: target2, leaves: leaves2 }) => glyphOfLibrary(libraryGlyphFacts({
+    config: config2,
+    target: target2,
+    leaves: leaves2
+  })),
+  invariants: (config2) => iconDomainInvariants(config2)
+});
+
+// ../config/dist/entities/system/icon-library.js
+var EMPTY_CATEGORIES = Object.freeze([]);
+var EMPTY_SIZES = Object.freeze({});
+var EMPTY_VARIANTS = Object.freeze([]);
+var NO_LIBRARIES = [];
+function iconLibrary(config2, path2) {
+  if (!config2) return void 0;
+  const cache = librariesOf(config2);
+  if (cache.has(path2)) return cache.get(path2);
+  const library = readIconLibrary(config2, path2);
+  cache.set(path2, library);
+  return library;
+}
+var librariesOf = createSliceMemo({
+  kinds: [
+    "icon",
+    "component",
+    "package"
+  ],
+  compute: (_config) => /* @__PURE__ */ new Map()
+});
+function readIconLibrary(config2, path2) {
+  const group = Icon.groups(config2).find((entry) => entry.path === path2);
+  if (!group) return void 0;
+  const { items: _items, sizes, variants: variants2, ...meta3 } = group.meta;
+  const set2 = setMembers({
+    config: config2,
+    path: path2,
+    declared: variants2
+  });
+  return {
+    ...meta3,
+    path: path2,
+    members: set2.members,
+    sizes: sizes ?? EMPTY_SIZES,
+    variants: variants2 ?? EMPTY_VARIANTS,
+    ...set2.memberVariants ? { memberVariants: set2.memberVariants } : {},
+    ...componentDefaults({
+      config: config2,
+      library: path2
+    })
+  };
+}
+function componentDefaults({ config: config2, library }) {
+  const bound = glyphComponentOf(config2, library);
+  if (!bound) return {};
+  const defaults = Component.get(config2, bound.path)?.defaultProps;
+  const variant = defaults?.variant;
+  const size = defaults?.size;
+  return {
+    ...typeof variant === "string" ? { defaultVariant: variant } : {},
+    ...typeof size === "string" ? { defaultSizeKey: size } : {}
+  };
+}
+var membersOf = createSliceMemo({
+  kinds: ["icon"],
+  compute: (_config) => /* @__PURE__ */ new Map()
+});
+function setMembers({ config: config2, path: path2, declared: declared2 }) {
+  const walked = membersOf(config2);
+  const hit = walked.get(path2);
+  if (hit) return hit;
+  const members2 = [];
+  const memberVariants = {};
+  for (const member of config2.members("icon", path2)) {
+    const leaf = member.path.startsWith(`${path2}/`) ? member.path.slice(path2.length + 1) : member.path;
+    members2.push(leaf);
+    const own2 = ownVariantsOf(member.body);
+    if (own2 && own2.length > 0 && !sameVariants({
+      own: own2,
+      declared: declared2
+    })) memberVariants[leaf] = own2;
+  }
+  const set2 = {
+    members: members2,
+    ...Object.keys(memberVariants).length > 0 ? { memberVariants } : {}
+  };
+  walked.set(path2, set2);
+  return set2;
+}
+function ownVariantsOf(body) {
+  const declared2 = body.variants;
+  if (!Array.isArray(declared2)) return void 0;
+  return declared2.filter((variant) => typeof variant === "string");
+}
+function sameVariants({ own: own2, declared: declared2 }) {
+  if (!declared2 || declared2.length !== own2.length) return false;
+  const set2 = new Set(declared2);
+  return own2.every((variant) => set2.has(variant));
+}
+function iconLibraries(config2) {
+  if (!config2) return NO_LIBRARIES;
+  return allLibrariesOf(config2);
+}
+var allLibrariesOf = createSliceMemo({
+  kinds: [
+    "icon",
+    "component",
+    "package"
+  ],
+  compute: (config2) => Icon.groups(config2).map(({ path: path2 }) => iconLibrary(config2, path2)).filter((library) => library !== void 0)
+});
+var boundLibrariesOf = createSliceMemo({
+  kinds: [
+    "component",
+    "icon",
+    "package"
+  ],
+  compute: (_config) => /* @__PURE__ */ new Map()
+});
+
 // ../config/dist/capture/captured-tree.js
 var CapturedNode = external_exports.lazy(() => external_exports.object({
   tag: external_exports.string().min(1),
@@ -87829,15 +88027,53 @@ function compound(selector3) {
 
 // ../config/dist/capture/class-grammar.js
 var VIEWPORT_UNIT = /\d(vh|vw|dvh|dvw|svh|svw|lvh|lvw|vmin|vmax)\b/;
+var COLOR_PROPERTY = /(^|-)(color|fill|stroke)$|^background$/;
+function isColorValue(value) {
+  const v = value.trim().toLowerCase();
+  if (/^(#|rgba?\(|hsla?\(|oklch\(|oklab\(|lab\(|lch\(|color\(|color-mix\()/.test(v)) return true;
+  if (/^(color|colour):/.test(v)) return true;
+  if (/^[-\d.]/.test(v) || /^(calc|min|max|clamp|var)\(/.test(v)) return false;
+  return /^[a-z]+$/.test(v) && v !== "auto" && v !== "none";
+}
 function normalizeCssValue(value) {
   return value.trim().replace(/\s+/g, " ").replace(/(^|[\s,(])0(?:px|rem|em|%)(?=$|[\s,)])/g, "$10").toLowerCase();
 }
 function classGrammar(config2) {
   const styleProps = /* @__PURE__ */ new Map();
-  for (const entity of config2.list("style-property")) for (const [leaf, cls] of stylePropClasses(config2, entity.path)) if (!styleProps.has(cls)) styleProps.set(cls, {
-    path: entity.path,
-    leaf
-  });
+  const arbitraryStems = /* @__PURE__ */ new Map();
+  for (const entity of config2.list("style-property")) {
+    for (const [leaf, cls] of stylePropClasses(config2, entity.path)) if (!styleProps.has(cls)) styleProps.set(cls, {
+      path: entity.path,
+      leaf
+    });
+    if (entity.toJSON().arbitrary) {
+      const stem = arbitraryClassName({
+        config: config2,
+        path: entity.path,
+        value: "[x]"
+      }).slice(0, -3);
+      arbitraryStems.set(stem, [...arbitraryStems.get(stem) ?? [], entity.path]);
+    }
+  }
+  const arbitraryMatch = (cls) => {
+    const open2 = cls.indexOf("[");
+    if (open2 <= 0) return void 0;
+    const close = cls.indexOf("]", open2);
+    if (close === -1) return void 0;
+    const rest = cls.slice(close + 1);
+    if (rest !== "" && !/^\/(?:\[[^\]]+\]|[\w.-]+)$/.test(rest)) return void 0;
+    const paths = arbitraryStems.get(cls.slice(0, open2)) ?? [];
+    const inner = cls.slice(open2 + 1, close);
+    if (!inner || paths.length === 0) return void 0;
+    return {
+      path: paths.length === 1 ? paths[0] : paths.find((each) => writesColor(each) === isColorValue(inner)) ?? paths[0],
+      leaf: `[${inner}]`
+    };
+  };
+  function writesColor(path2) {
+    const { properties = [] } = config2.resolve("style-property", path2)?.toJSON() ?? {};
+    return properties.some((property) => COLOR_PROPERTY.test(property));
+  }
   const composites = config2.list("composite").map((entity) => ({
     path: entity.path,
     cls: className(config2, "composite", entity.path)
@@ -87950,7 +88186,7 @@ function classGrammar(config2) {
     };
   };
   return {
-    styleProp: (cls) => styleProps.get(cls),
+    styleProp: (cls) => styleProps.get(cls) ?? arbitraryMatch(cls),
     stylePropsFor: (cssProperty2) => byCss.get(cssProperty2.toLowerCase()) ?? [],
     viewportLeaf(path2, leaf) {
       return (valuesOf(path2).get(leaf) ?? []).some((v) => VIEWPORT_UNIT.test(v));
@@ -88063,6 +88299,8 @@ function specFromCapture(options) {
   };
 }
 var FOLD = "data-uds-fold";
+var EMBED_SPACE_ATTR = "data-uds-embed";
+var COMPUTED_STYLE_ATTR = "data-uds-computed";
 var ORPHAN_LAYER = "data-uds-orphan-layer";
 function markOrphanLayers(tree) {
   const visit2 = (node2, open2) => {
@@ -88118,10 +88356,38 @@ var Converter = class {
   counter = 0;
   childCap;
   ruled = /* @__PURE__ */ new Map();
+  /** Each component that draws a glyph by name → the prop that names it. */
+  glyphDrawers;
+  /** Each breakpoint's class prefix (`lg`) → whether it applied at the capture's width, and its rank. */
+  breakpoints;
+  /** Each modifier's class prefix (`md`) → the prop key its bag is written under (`_md`). */
+  modifierKeys;
   constructor(options, grammar) {
     this.options = options;
     this.grammar = grammar;
     this.childCap = options.childCap ?? DEFAULT_CHILD_CAP;
+    const drawers = /* @__PURE__ */ new Map();
+    for (const library of iconLibraries(options.config)) {
+      const drawer = glyphComponentOf(options.config, library.path);
+      if (drawer) drawers.set(drawer.path, drawer.prop);
+    }
+    this.glyphDrawers = drawers;
+    const width = options.width ?? DEFAULT_CAPTURE_WIDTH;
+    const breakpoints = /* @__PURE__ */ new Map();
+    for (const modifier of options.config.list("modifier")) {
+      const { type, value } = modifier.toJSON();
+      if (type !== "media-query" || typeof value !== "string") continue;
+      const min2 = /min-width:\s*(\d+(?:\.\d+)?)px/.exec(value);
+      const max2 = /max-width:\s*(\d+(?:\.\d+)?)px/.exec(value);
+      if (!min2 && !max2) continue;
+      const active = (!min2 || width >= Number(min2[1])) && (!max2 || width <= Number(max2[1]));
+      breakpoints.set(modifier.leaf, {
+        active,
+        rank: min2 ? Number(min2[1]) : 0
+      });
+    }
+    this.breakpoints = breakpoints;
+    this.modifierKeys = new Map(options.config.list("modifier").map((modifier) => [modifier.leaf, `_${modifier.leaf}`]));
   }
   convertTop(el) {
     return this.convert(el);
@@ -88135,15 +88401,25 @@ var Converter = class {
     }
     return out;
   }
-  /** The components under `layer`, skipping every other layer `path` marks inside it. */
-  convertOutsideLayers(layer, path2) {
+  /**
+  * The components under `layer`, skipping every other layer `path` marks inside it. With
+  * `callerMarkup`, the layer is one a slot of elements lands on, so the unmarked markup in it is
+  * the caller's, kept as the plain tags it is, rather than the render's own.
+  */
+  convertOutsideLayers(layer, path2, callerMarkup = false) {
     const out = [];
+    const mixed = callerMarkup && Array.from(layer.childNodes).some((node2) => isElement(node2) && visible(node2));
     for (let i = 0; i < layer.childNodes.length; i += 1) {
       if (this.childCap > 0 && out.length >= this.childCap) break;
       const node2 = layer.childNodes[i];
-      if (!isElement(node2)) continue;
+      if (!isElement(node2)) {
+        const text = (node2.textContent ?? "").replace(/\s+/g, " ");
+        if (mixed && text.trim()) out.push(...this.plainTextRun(text, layer));
+        continue;
+      }
       if (node2.getAttribute("data-uds-component") === path2 && node2.getAttribute("data-uds-layer") !== "root") continue;
       if (node2.tagName.toLowerCase() === "svg" || isImage(node2) || node2.hasAttribute("data-uds-component") && node2.getAttribute("data-uds-layer") === "root") out.push(...this.convert(node2));
+      else if (visible(node2) && callerMarkup) out.push(...this.plain(node2));
       else if (visible(node2) && framesItself(node2)) out.push(...this.frame(node2));
       else if (visible(node2)) out.push(...this.pinFolded(node2, this.convertOutsideLayers(node2, path2)));
     }
@@ -88157,64 +88433,432 @@ var Converter = class {
       return key2 ? [key2] : [];
     }
     if (el.tagName.toLowerCase() === "svg") return this.icon(el);
-    if (isImage(el)) return this.image(el);
-    if (isField(el)) return this.field(el);
-    if (framesItself(el)) return this.frame(el);
-    return this.pinFolded(el, this.convertChildren(el));
+    if (el.hasAttribute(ORPHAN_LAYER)) return this.frame(el);
+    return this.plain(el);
   }
   /**
-  * The content of an unmarked wrapper the capture folded, with the wrapper's measured box written
-  * onto it when it is one element: the wrapper's sizing (a flex share, a fixed size) no longer reaches
-  * the child, so the child keeps the box it had.
+  * What an element inside a component holds, by the rule for a component's render: a nested
+  * component is itself, and an unmarked element folds into what it holds, or is a frame when it
+  * places itself, since it may be the render's own markup rather than the page's.
   */
-  pinFolded(el, keys) {
-    const size = el.getAttribute(FOLD)?.match(/^(\d+(?:\.\d+)?)x(\d+(?:\.\d+)?)$/);
-    if (!size || keys.length !== 1 || el.hasAttribute("data-uds-component")) return keys;
-    const element2 = this.elements[keys[0]];
-    const grammar = this.grammar.component(element2.type.replace(/^component:/, ""));
-    if (grammar) this.propsFromDeclarations([["width", `${size[1]}px`], ["height", `${size[2]}px`]], grammar, element2.props);
-    return keys;
+  convertInside(el) {
+    const out = [];
+    for (let i = 0; i < el.childNodes.length; i += 1) {
+      if (this.childCap > 0 && out.length >= this.childCap) break;
+      const node2 = el.childNodes[i];
+      if (!isElement(node2) || !visible(node2)) continue;
+      if (node2.tagName.toLowerCase() === "svg" || node2.hasAttribute("data-uds-component") && node2.getAttribute("data-uds-layer") === "root") out.push(...this.convert(node2));
+      else if (isImage(node2)) out.push(...this.image(node2));
+      else if (isField(node2)) out.push(...this.field(node2));
+      else if (framesItself(node2)) out.push(...this.frame(node2));
+      else out.push(...this.pinFolded(node2, this.convertInside(node2)));
+    }
+    return out;
   }
   /**
-  * An unmarked element with an inline style, which is what the page drew it with, as the canvas's
-  * frame component carrying that style. One with nothing inline only groups its children and is
-  * folded away, and an empty one that paints nothing of its own (a portal's container) places
-  * nothing.
+  * An unmarked element as the plain tag it is: an `img` keeps its source, a link its `href`, a field
+  * its type and placeholder, and its text stays inside it. Its styling is stored as classes, the way
+  * the canvas paints and the design panel edits a plain element: the classes it wears that the system
+  * names, then its own inline style and the styles its stylesheets gave it written as the system's
+  * classes (`16px` of gap is `gap-4`, an off-scale `13px` is `gap-[13px]`). What no style prop can
+  * hold stays as an inline style. A `div` or `span` that carries nothing only groups its children and
+  * folds away, as a wrapper the capture marked foldable does.
   */
-  frame(el) {
-    const children = this.convertChildren(el);
-    if (children.length === 0 && !paintsItself(el)) return [];
-    const role = canvasRole(this.options.config, "frame");
-    const grammar = role ? this.grammar.component(role.component) : void 0;
-    if (!role || !grammar) return children;
-    const props = this.orphanLayerProps(el, grammar);
-    this.propsFromInlineStyle(el, grammar, props);
-    if (Object.keys(props).length === 0) return children;
-    const key2 = this.key(role.component);
+  plain(el, convertKids = () => this.plainChildren(el)) {
+    const tag = el.tagName.toLowerCase();
+    if (FORBIDDEN_TAGS.has(tag)) return [];
+    if (el.hasAttribute(FOLD)) return this.pinFolded(el, convertKids());
+    if ([...inlineDeclarations(el), ...declarationsOf(el.getAttribute("data-uds-computed") ?? "")].find(([property]) => property === "display")?.[1].trim() === "contents") return convertKids();
+    const { className: className2, style, paints } = this.plainStyle(el);
+    const attrs = plainAttributes(el);
+    if (tag === "img" && !attrs.src) return [];
+    const children = VOID_TAGS.has(tag) ? [] : convertKids();
+    const text = children.length === 0 ? plainText(el) : "";
+    if (children.length === 0 && !text && !VOID_TAGS.has(tag) && !paints && !el.hasAttribute(EMBED_SPACE_ATTR)) return [];
+    if (!(className2 !== "" || Object.keys(style).length > 0 || Object.keys(attrs).length > 0) && GROUPING_TAGS.has(tag)) {
+      if (text) return this.plainTextRun(text);
+      return children;
+    }
+    const props = { ...attrs };
+    if (className2) props.className = className2;
+    if (Object.keys(style).length > 0) props.style = style;
+    if (text) props.children = text;
+    const key2 = this.key(tag);
     this.elements[key2] = {
-      type: `component:${role.component}`,
+      type: tag,
       props,
       ...children.length > 0 ? { children } : {}
     };
     return [key2];
   }
   /**
-  * The styles the config gives an orphaned layer, as the frame's props: the rules that always apply
-  * and the ones its classes say are on, in authored order. Only values the frame component declares,
-  * spelled as an author writes them, are kept.
+  * An inline SVG as itself: the `svg` and every shape in it, each with its attributes under the
+  * names React takes them by. Definitions it references (a clip path, a gradient) are left out with
+  * the references to them, since an id the capture copied may name nothing on the canvas.
   */
-  orphanLayerProps(el, frame2) {
-    const [path2, layer] = (el.getAttribute(ORPHAN_LAYER) ?? "").split("#");
-    if (!path2 || !layer) return {};
-    const active = {};
-    const own2 = this.grammar.component(path2);
-    for (const cls of classesOf(el)) Object.assign(active, own2?.conditions.get(cls));
-    const props = {};
-    const styles = Component.get(this.options.config, path2)?.styles ?? {};
-    for (const rule of Object.values(styles)) {
-      const when = rule?.when ?? {};
-      if (!Object.entries(when).every(([key2, value]) => active[key2] === value)) continue;
-      for (const [key2, value] of Object.entries(rule.layers?.[layer] ?? {})) {
+  plainSvg(svg) {
+    if (holdsMoreThan(svg, SVG_SHAPE_LIMIT)) {
+      const covered = /* @__PURE__ */ new Set();
+      const size = (attr) => {
+        const value = svg.getAttribute(attr);
+        return value && /^\d+(?:\.\d+)?$/.test(value) ? this.classForDeclaration(attr, `${value}px`, covered) : void 0;
+      };
+      const className2 = [size("width"), size("height")].filter((cls) => !!cls && cls !== "covered").join(" ");
+      const key2 = this.key("div");
+      this.elements[key2] = {
+        type: "div",
+        props: className2 ? { className: className2 } : {}
+      };
+      return key2;
+    }
+    const build2 = (el) => {
+      const tag = el.tagName.toLowerCase();
+      const props = { [VERBATIM_ATTRIBUTES]: true };
+      const styled = [];
+      for (const { name, value } of el.attributes) {
+        if (SVG_SKIPPED_ATTRIBUTES.test(name)) continue;
+        if (name === "class" || name === "style") continue;
+        if (name === "width" || name === "height") continue;
+        const prop = svgAttributeName(name);
+        if (this.options.config.resolve("style-property", prop)) {
+          styled.push([name, value]);
+          continue;
+        }
+        props[prop] = value;
+      }
+      const { className: className2, style } = this.plainStyle(el, styled);
+      if (className2) props.className = className2;
+      if (Object.keys(style).length > 0) props.style = style;
+      const children = [];
+      let text = "";
+      for (const node2 of el.childNodes) {
+        if (!isElement(node2)) {
+          text += node2.textContent ?? "";
+          continue;
+        }
+        if (SVG_SKIPPED_TAGS.has(node2.tagName.toLowerCase())) continue;
+        children.push(build2(node2));
+      }
+      if (children.length === 0 && text.trim()) props.children = text.trim();
+      const key2 = this.key(SVG_TAGS.get(tag) ?? tag);
+      this.elements[key2] = {
+        type: SVG_TAGS.get(tag) ?? tag,
+        props,
+        ...children.length > 0 ? { children } : {}
+      };
+      return key2;
+    };
+    return build2(svg);
+  }
+  /** A plain element's content: its elements, and each run of text between them as a `span`. */
+  plainChildren(el) {
+    if (!Array.from(el.childNodes).some((node2) => isElement(node2) && visible(node2))) return [];
+    const out = [];
+    for (let i = 0; i < el.childNodes.length; i += 1) {
+      if (this.childCap > 0 && out.length >= this.childCap) break;
+      const node2 = el.childNodes[i];
+      if (isElement(node2)) {
+        out.push(...this.convert(node2));
+        continue;
+      }
+      const text = (node2.textContent ?? "").replace(/\s+/g, " ");
+      if (text.trim()) out.push(...this.plainTextRun(text));
+    }
+    return out;
+  }
+  /**
+  * A run of text as a `span`. It keeps how its holder wraps (`white-space: nowrap` on a nav item),
+  * which the holder, a component that takes no such prop, may have no way to say itself.
+  */
+  plainTextRun(text, holder) {
+    const props = { children: text };
+    const wraps = declarationsOf(holder?.getAttribute("data-uds-computed") ?? "").find(([property]) => property === "white-space");
+    if (wraps) {
+      const cls = this.classForDeclaration("white-space", normalizeCssValue(wraps[1]), /* @__PURE__ */ new Set());
+      if (cls && cls !== "covered") props.className = cls;
+      else props.style = { whiteSpace: wraps[1] };
+    }
+    const key2 = this.key("span");
+    this.elements[key2] = {
+      type: "span",
+      props
+    };
+    return [key2];
+  }
+  /**
+  * A plain element's styling as the system's classes, and what none can hold as inline style. The
+  * page's own inline style painted over its classes, so it is read first and a class for a property it
+  * sets is dropped; the computed styles fill only what neither says.
+  */
+  plainStyle(el, attributes = []) {
+    const classes = [];
+    const style = {};
+    const covered = /* @__PURE__ */ new Set();
+    let paints = false;
+    const notePaint = (property) => {
+      if (PAINT_PROPERTY.test(property)) paints = true;
+    };
+    const written = /* @__PURE__ */ new Set();
+    const fromDeclarations = (declarations) => {
+      for (const [property, raw] of declarations.flatMap(gridAreaLines)) {
+        if (written.has(property) || written.has(LOGICAL_SIDES[property] ?? property)) continue;
+        let value = normalizeCssValue(raw);
+        const paintNone = value === "none" && (property === "fill" || property === "stroke");
+        if (!value || SKIP_INLINE_PROPERTY.has(property) || SKIP_INLINE_VALUE.has(value) && !paintNone) continue;
+        if (property === "position" && value === "fixed") value = "absolute";
+        if (VIEWPORT_VALUE.test(value) && !WHOLE_VIEWPORT.test(value)) value = frameUnits(value, this.options.width, this.options.height);
+        const cls = this.classForDeclaration(property, value, covered);
+        if (cls === "covered") continue;
+        notePaint(property);
+        if (cls) {
+          classes.push(cls);
+          continue;
+        }
+        let placed = false;
+        for (const [longhand, part] of gridLonghands({
+          property,
+          value
+        })) {
+          const longClass = this.classForDeclaration(longhand, part, covered);
+          if (longClass && longClass !== "covered") classes.push(longClass);
+          placed = placed || longClass !== void 0;
+        }
+        if (!placed && !(camelCase3(property) in style)) style[camelCase3(property)] = raw.trim();
+      }
+    };
+    fromDeclarations(inlineDeclarations(el));
+    fromDeclarations(attributes);
+    fromDeclarations(["width", "height"].flatMap((attr) => {
+      const value = el.getAttribute(attr);
+      return value && /^\d+(?:\.\d+)?$/.test(value) ? [[attr, `${value}px`]] : [];
+    }));
+    const read = classesOf(el).flatMap((cls) => {
+      const each = this.readModifiedClass(cls);
+      if (!each) return [];
+      if (each.modifiers.length === 0 && covered.has(each.style.path)) return [];
+      const { properties = [] } = this.options.config.resolve("style-property", each.style.path)?.toJSON() ?? {};
+      const atoms = atomsOf(properties);
+      if (atoms.size === 0) atoms.add(`prop:${each.style.path}`);
+      return [{
+        ...each,
+        properties,
+        atoms
+      }];
+    });
+    const winners = /* @__PURE__ */ new Map();
+    for (const each of read) for (const atom of each.atoms) {
+      const slot = `${each.modifiers.join(".")}|${atom}`;
+      const prior = winners.get(slot);
+      if (!prior || each.rank > prior.rank || each.rank === prior.rank && each.atoms.size < prior.atoms.size) winners.set(slot, each);
+    }
+    const painted = new Set(winners.values());
+    for (const each of read) {
+      if (!painted.has(each)) continue;
+      if (each.modifiers.length === 0) covered.add(each.style.path);
+      for (const property of each.properties) {
+        notePaint(property);
+        if (each.modifiers.length === 0) for (const longhand of longhandsOf(property)) written.add(longhand);
+      }
+      const owned = [...each.atoms].filter((atom) => winners.get(`${each.modifiers.join(".")}|${atom}`) === each);
+      classes.push(...owned.length < each.atoms.size ? this.narrowed(each, new Set(owned)) : [each.bare]);
+    }
+    fromDeclarations(declarationsOf(el.getAttribute("data-uds-computed") ?? ""));
+    return {
+      className: [...new Set(classes)].join(" "),
+      style,
+      paints
+    };
+  }
+  /**
+  * The system's class for one declaration: the class of the leaf whose value it is, or the bracket
+  * class of an off-scale value on a prop that takes one. `covered` when a prop for the property is
+  * already set, so the first source to set it wins; nothing when no prop writes the property.
+  */
+  classForDeclaration(property, value, covered) {
+    const logical = LOGICAL_SIDES[property];
+    const options = [...this.grammar.stylePropsFor(property), ...logical ? this.grammar.stylePropsFor(logical) : []];
+    for (const option of options) {
+      if (covered.has(option.path)) return "covered";
+      const css = option.negates ? negated(value) : value;
+      if (css === void 0) continue;
+      const leaf = equivalents({
+        property,
+        value: css
+      }).map((spelling) => option.leafFor(spelling)).find((found) => found !== void 0);
+      let cls;
+      if (WHOLE_VIEWPORT.test(css) && option.fullLeaf !== void 0) cls = stylePropClassName(this.options.config, option.path, option.fullLeaf);
+      else if (leaf !== void 0) cls = stylePropClassName(this.options.config, option.path, leaf);
+      else if (option.arbitrary) cls = arbitraryClassName({
+        config: this.options.config,
+        path: option.path,
+        value: `[${css.replaceAll(" ", "_")}]`
+      });
+      if (cls === void 0) continue;
+      covered.add(option.path);
+      return cls;
+    }
+  }
+  /**
+  * The content of an unmarked wrapper the capture folded, with the wrapper's measured box written
+  * onto it when it is one element: the wrapper's sizing (a flex share, a fixed size) no longer reaches
+  * the child, so the child keeps the box it had.
+  */
+  pinFolded(el, keys) {
+    const size = el.getAttribute(FOLD)?.match(/^(\d+(?:\.\d+)?)x(\d+(?:\.\d+)?)$/);
+    if (!size || keys.length !== 1 || el.hasAttribute("data-uds-component")) return keys;
+    const element2 = this.elements[keys[0]];
+    if (kindOf2(element2.type) !== "component") {
+      const covered = /* @__PURE__ */ new Set();
+      const sized = [this.classForDeclaration("width", `${size[1]}px`, covered), this.classForDeclaration("height", `${size[2]}px`, covered)].filter((cls) => !!cls && cls !== "covered");
+      const own2 = String(element2.props.className ?? "").split(/\s+/).filter((cls) => {
+        const read = cls ? this.readModifiedClass(cls) : void 0;
+        if (!read || read.modifiers.length > 0) return Boolean(cls);
+        const atoms = this.styleAtoms().get(read.style.path);
+        return !(atoms?.has("width") || atoms?.has("height"));
+      });
+      element2.props.className = [...own2, ...sized].join(" ");
+      return keys;
+    }
+    const grammar = this.grammar.component(element2.type.replace(/^component:/, ""));
+    if (grammar) this.propsFromDeclarations([["width", `${size[1]}px`], ["height", `${size[2]}px`]], grammar, element2.props);
+    return keys;
+  }
+  /**
+  * An unmarked element with an inline style, which is what the page drew it with, as the canvas's
+  * frame component carrying that style. One with nothing inline only groups its children and is
+  * folded away, and an empty one that paints nothing of its own (a portal's container) places
+  * nothing.
+  */
+  frame(el) {
+    const children = this.convertInside(el);
+    if (children.length === 0 && !paintsItself(el)) return [];
+    const role = canvasRole(this.options.config, "frame");
+    const grammar = role ? this.grammar.component(role.component) : void 0;
+    if (!role || !grammar) return children;
+    const props = this.orphanLayerProps(el, grammar);
+    this.propsFromInlineStyle(el, grammar, props);
+    if (Object.keys(props).length === 0) return children;
+    const key2 = this.key(role.component);
+    this.elements[key2] = {
+      type: `component:${role.component}`,
+      props,
+      ...children.length > 0 ? { children } : {}
+    };
+    return [key2];
+  }
+  /**
+  * The style props `classes` spell for a component with `grammar`, each class under a modifier
+  * prefix written into that modifier's bag (`md:hover:flex` → `_md._hover.display`). A class whose
+  * prefix names no modifier the config has, or whose prop the component does not take, is not read.
+  * A value already set is kept: the first class for a prop wins, as a stamped value does.
+  */
+  stylePropsFromClasses(classes, grammar, props) {
+    const ranks = /* @__PURE__ */ new Map();
+    for (const cls of classes) {
+      const read = this.readModifiedClass(cls);
+      if (!read) continue;
+      const prop = grammar.propForStyleProperty.get(read.style.path);
+      if (!prop) continue;
+      const slot = `${read.modifiers.join(".")}|${prop}`;
+      const before5 = ranks.get(slot);
+      if (before5 !== void 0 && before5 >= read.rank) continue;
+      ranks.set(slot, read.rank);
+      let bag = props;
+      for (const key2 of read.modifiers) {
+        const inner = bag[key2];
+        if (inner && typeof inner === "object" && !Array.isArray(inner)) bag = inner;
+        else if (inner === void 0) {
+          const next = {};
+          bag[key2] = next;
+          bag = next;
+        } else bag = {};
+      }
+      bag[prop] = this.frameValue(read.style.path, read.style.leaf);
+    }
+  }
+  atomsByStyle;
+  /** Each style property → the physical longhands it writes. */
+  styleAtoms() {
+    if (!this.atomsByStyle) this.atomsByStyle = new Map(this.options.config.list("style-property").map((prop) => {
+      const { properties = [] } = prop.toJSON();
+      return [prop.path, atomsOf(properties)];
+    }));
+    return this.atomsByStyle;
+  }
+  /**
+  * A shorthand class that a narrower one overrode on some sides (`p-5` under `px-16`), as the
+  * classes for the sides it still painted (`py-5`), so the canvas's stylesheet order cannot let it
+  * win the others back. The class as written when the system has no narrower class at its value.
+  */
+  narrowed(shorthand, owned) {
+    const config2 = this.options.config;
+    const options = /* @__PURE__ */ new Map();
+    for (const [path2, atoms] of this.styleAtoms()) {
+      if (path2 === shorthand.style.path || atoms.size === 0) continue;
+      if ([...atoms].every((each) => owned.has(each))) options.set(path2, atoms);
+    }
+    const left = new Set(owned);
+    const out = [];
+    for (const [path2, atoms] of [...options].sort((a, b) => b[1].size - a[1].size)) {
+      if (![...atoms].every((each) => left.has(each))) continue;
+      const cls = stylePropClassName(config2, path2, shorthand.style.leaf);
+      if (this.grammar.styleProp(cls)?.path !== path2) continue;
+      out.push(`${shorthand.prefix}${cls}`);
+      for (const each of atoms) left.delete(each);
+    }
+    return left.size === 0 ? out : [shorthand.bare];
+  }
+  /** A class as the modifier keys over it and the style prop it names, or nothing for one it doesn't. */
+  readModifiedClass(cls) {
+    const bracket = cls.indexOf("[");
+    const head = bracket === -1 ? cls : cls.slice(0, bracket);
+    const at = head.lastIndexOf(":");
+    const prefixes = at === -1 ? [] : head.slice(0, at).split(":");
+    const modifiers = [];
+    const kept = [];
+    let rank = 0;
+    for (const prefix2 of prefixes) {
+      const breakpoint = this.breakpoints.get(prefix2);
+      if (breakpoint) {
+        if (!breakpoint.active) return void 0;
+        rank = Math.max(rank, breakpoint.rank);
+        continue;
+      }
+      const key2 = this.modifierKeys.get(prefix2);
+      if (!key2) return void 0;
+      modifiers.push(key2);
+      kept.push(prefix2);
+    }
+    let leaf = at === -1 ? cls : cls.slice(at + 1);
+    const important = /^!|!$/.test(leaf);
+    if (important) leaf = leaf.replace(/^!|!$/, "");
+    if (important) rank += IMPORTANT_RANK;
+    const style = this.grammar.styleProp(leaf);
+    return style ? {
+      modifiers,
+      style,
+      rank,
+      bare: [...kept, leaf].join(":"),
+      prefix: kept.map((each) => `${each}:`).join("")
+    } : void 0;
+  }
+  /**
+  * The styles the config gives an orphaned layer, as the frame's props: the rules that always apply
+  * and the ones its classes say are on, in authored order. Only values the frame component declares,
+  * spelled as an author writes them, are kept.
+  */
+  orphanLayerProps(el, frame2) {
+    const [path2, layer] = (el.getAttribute(ORPHAN_LAYER) ?? "").split("#");
+    if (!path2 || !layer) return {};
+    const active = {};
+    const own2 = this.grammar.component(path2);
+    for (const cls of classesOf(el)) Object.assign(active, own2?.conditions.get(cls));
+    const props = {};
+    const styles = Component.get(this.options.config, path2)?.styles ?? {};
+    for (const rule of Object.values(styles)) {
+      const when = rule?.when ?? {};
+      if (!Object.entries(when).every(([key2, value]) => active[key2] === value)) continue;
+      for (const [key2, value] of Object.entries(rule.layers?.[layer] ?? {})) {
         if (!(key2 in frame2.declared)) continue;
         const authored = authoredValue(this.options.config, key2, value);
         if (typeof authored === "string" || typeof authored === "boolean") props[key2] = authored;
@@ -88323,7 +88967,8 @@ var Converter = class {
   image(img) {
     const src = img.getAttribute("src");
     const role = canvasRole(this.options.config, "image");
-    if (!src || !role) return [];
+    if (!src) return [];
+    if (!role) return this.plain(img);
     const props = { ...role.defaultProps };
     const grammar = this.grammar.component(role.component);
     if (grammar) {
@@ -88378,7 +89023,7 @@ var Converter = class {
     const answer = this.options.icons?.resolve(svgOf(svg));
     if (!answer) {
       this.unresolvedIcons += 1;
-      return [];
+      return [this.plainSvg(svg)];
     }
     const key2 = this.key(answer.component);
     this.elements[key2] = {
@@ -88396,8 +89041,16 @@ var Converter = class {
     const props = {};
     const stamped = stampedProps(el);
     if (grammar) this.propsFromClasses(el, grammar, props);
+    if (grammar) for (const [prop, raw] of Object.entries(grammar.declared)) {
+      if (stamped[prop] !== void 0) continue;
+      const declared3 = raw;
+      const attr = declared3?.type === "forward" && declared3.target?.__ref === "layer:root" && typeof declared3.into === "string" ? declared3.into : declared3?.type === "string" && ROOT_ATTRIBUTE_PROPS.includes(prop) ? prop : void 0;
+      const value = attr ? el.getAttribute(attr) : null;
+      if (value) props[prop] = value;
+    }
     Object.assign(props, stamped);
     if (grammar) this.propsFromInlineStyle(el, grammar, props, path2);
+    if (grammar) this.propsFromComputed(el, grammar, props, path2);
     const layerProps2 = stampedLayerProps({
       el,
       layers: this.layerNames(path2)
@@ -88411,9 +89064,14 @@ var Converter = class {
       if (answer) for (const [prop, value] of Object.entries(answer.props)) props[prop] ??= value;
       else if (Object.keys(stamped).length === 0) {
         this.unresolvedIcons += 1;
-        return;
+        return svg ? this.plainSvg(svg) : void 0;
       }
     }
+    const glyphProp = this.glyphDrawers.get(path2);
+    if (glyphProp && props[glyphProp] === void 0) {
+      const svg = el.tagName.toLowerCase() === "svg" ? el : el.querySelector("svg");
+      if (svg) return this.plainSvg(svg);
+    }
     const key2 = this.key(path2);
     const element2 = {
       type: `component:${path2}`,
@@ -88421,8 +89079,10 @@ var Converter = class {
     };
     const declared2 = grammar?.declared ?? {};
     const slots = {};
-    for (const layer of asArray(el.querySelectorAll("[data-uds-slot]"))) {
-      if (nearestRoot(layer) !== el || hiddenBetween(layer, el)) continue;
+    let rootSlotted = false;
+    const marked = [...el.hasAttribute("data-uds-slot") ? [el] : [], ...asArray(el.querySelectorAll("[data-uds-slot]"))];
+    for (const layer of marked) {
+      if (layer !== el && layer.getAttribute("data-uds-layer") === "root" || layer !== el && nearestRoot(layer) !== el || hiddenBetween(layer, el)) continue;
       const names = slotNames(layer).filter((slot) => !grammar || slot in declared2);
       const intoOf = (slot) => grammar?.layerProps.get(slot)?.into ?? "children";
       const ownChildren = names.filter((slot) => intoOf(slot) === "children");
@@ -88431,10 +89091,13 @@ var Converter = class {
         if (into === "children" && slot !== ownChildren.at(-1)) continue;
         const holder = into === "children" ? layer : slotLayerNamed(layer, into);
         if (!holder) continue;
-        const fills = holder === layer ? this.convertOutsideLayers(layer, path2) : this.convertChildren(holder);
+        const declaration = declared2[slot];
+        const callerMarkup = declaration?.type === "slot" && declaration.text !== true;
+        const fills = holder === layer ? this.convertOutsideLayers(layer, path2, callerMarkup) : this.convertChildren(holder);
+        if (layer === el && holder === layer) rootSlotted = true;
         if (fills.length > 0) slots[slot] = fills;
-        else if (holder !== layer) {
-          const text = collapse(ownText(holder));
+        else {
+          const text = collapse(holder === layer ? ownText(layer, /* @__PURE__ */ new Set()) : ownText(holder));
           if (text) props[slot] = text;
         }
       }
@@ -88476,7 +89139,7 @@ var Converter = class {
     }
     const textSlot = declared2.children;
     const holdsText = textSlot?.type === "slot" && textSlot.text === true;
-    const loose = this.looseContent({
+    const loose = rootSlotted ? [] : this.looseContent({
       el,
       claimed,
       takesGlyphs: !renders,
@@ -88509,9 +89172,24 @@ var Converter = class {
       if ("checked" in declared2) props.checked = true;
       else if ("selected" in declared2) props.selected = true;
     }
-    if (grammar) for (const prop of Object.keys(props)) {
-      if (prop in declared2 || prop === "aria-label" || prop === "layerProps") continue;
-      delete props[prop];
+    if (grammar) {
+      if (props.style !== void 0 && !("style" in declared2)) {
+        const bags = props["layerProps"] ?? {};
+        const root = bags.root ?? {};
+        bags.root = {
+          ...root,
+          style: {
+            ...Object.fromEntries(Object.entries(props.style).map(([property, value]) => [property, inlineCss(value)])),
+            ...root.style ?? {}
+          }
+        };
+        props[LAYER_PROPS] = bags;
+        delete props.style;
+      }
+      for (const prop of Object.keys(props)) {
+        if (prop in declared2 || prop === "aria-label" || prop === "layerProps") continue;
+        delete props[prop];
+      }
     }
     this.elements[key2] = element2;
     return key2;
@@ -88528,11 +89206,7 @@ var Converter = class {
         props[composite.prop] = composite.value;
         continue;
       }
-      const style = this.grammar.styleProp(cls);
-      if (style) {
-        const prop = grammar.propForStyleProperty.get(style.path);
-        if (prop && props[prop] === void 0) props[prop] = this.frameValue(style.path, style.leaf);
-      }
+      this.stylePropsFromClasses([cls], grammar, props);
     }
   }
   /**
@@ -88554,6 +89228,46 @@ var Converter = class {
   propsFromInlineStyle(el, grammar, props, path2) {
     this.propsFromDeclarations(inlineDeclarations(el), grammar, props, path2 === void 0 ? void 0 : this.ruledProperties(path2));
   }
+  /**
+  * The styles the page's own classes gave a component's root, from what the browser computed, for
+  * the CSS properties the component does not set itself: a stack's `display` and direction are its
+  * own, while the width and flex share an app's Tailwind gave it are the page's, and no prop said
+  * them. A property a rule, a default or a prop already read sets is left to that.
+  */
+  propsFromComputed(el, grammar, props, path2) {
+    const computed = el.getAttribute(COMPUTED_STYLE_ATTR);
+    if (!computed) return;
+    const own2 = new Set(this.ruledProperties(path2));
+    const { defaultProps = {} } = Component.get(this.options.config, path2) ?? {};
+    const named = new Set(Object.keys(props));
+    for (const [stylePath, prop] of grammar.propForStyleProperty) {
+      if (!named.has(prop)) continue;
+      for (const property of StyleProperty.get(this.options.config, stylePath)?.properties ?? []) for (const each of longhandsOf(property)) own2.add(each);
+    }
+    const fill = {};
+    const unheld = {};
+    for (const declaration of declarationsOf(computed)) {
+      const [property, value] = declaration;
+      if (own2.has(property) || own2.has(LOGICAL_SIDES[property] ?? property)) continue;
+      const before5 = Object.keys(fill).length;
+      this.propsFromDeclarations([declaration], grammar, fill);
+      if (Object.keys(fill).length === before5 && COMPONENT_INLINE_LAYOUT.has(property)) {
+        const arbitrary = this.grammar.stylePropsFor(property).some((option) => option.arbitrary);
+        unheld[camelCase3(property)] = arbitrary ? `[${normalizeCssValue(value).replaceAll(" ", "_")}]` : value;
+      }
+    }
+    for (const [prop, value] of Object.entries(fill)) {
+      if (props[prop] !== void 0 || defaultProps[prop] === value) continue;
+      props[prop] = value;
+    }
+    if (Object.keys(unheld).length > 0) {
+      const own3 = props.style ?? {};
+      props.style = {
+        ...unheld,
+        ...own3
+      };
+    }
+  }
   /** The CSS properties a component's own style rules write on its root layer. */
   ruledProperties(path2) {
     const known = this.ruled.get(path2);
@@ -88656,6 +89370,208 @@ var ARTBOARD = [
   ["isolation", "isolate"]
 ];
 var INPUT_LINE = [["display", "flex"], ["align-items", "center"]];
+function inlineCss(value) {
+  if (typeof value !== "string" || !/^\[.*\]$/.test(value)) return value;
+  return value.slice(1, -1).replace(/url\([^)]*\)|_/g, (span) => span === "_" ? " " : span);
+}
+function holdsMoreThan(el, limit) {
+  let count = 0;
+  const visit2 = (node2) => {
+    for (const child of node2.children) {
+      count += 1;
+      if (count > limit || visit2(child)) return true;
+    }
+    return false;
+  };
+  return visit2(el);
+}
+var SVG_SHAPE_LIMIT = 300;
+var FORBIDDEN_TAGS = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "noscript",
+  "template",
+  "iframe",
+  "object",
+  "embed",
+  "base",
+  "link",
+  "meta"
+]);
+var SIDES = [
+  "top",
+  "right",
+  "bottom",
+  "left"
+];
+var CORNERS = [
+  "top-left",
+  "top-right",
+  "bottom-right",
+  "bottom-left"
+];
+var IMPORTANT_RANK = 1e6;
+function atomsOf(properties) {
+  const physical = new Map(Object.entries(LOGICAL_SIDES).map(([side, logical]) => [logical, side]));
+  const atoms = /* @__PURE__ */ new Set();
+  for (const property of properties) for (const each of longhandsOf(property)) {
+    const side = physical.get(each) ?? each;
+    if (longhandsOf(side).length <= 1) atoms.add(side);
+  }
+  return atoms;
+}
+function longhandsOf(property) {
+  const boxed = /^(padding|margin)(-inline|-block)?$/.exec(property);
+  if (boxed) {
+    const [, box, axis] = boxed;
+    return [property, ...(axis === "-inline" ? ["left", "right"] : axis === "-block" ? ["top", "bottom"] : SIDES).flatMap((side) => [`${box}-${side}`, LOGICAL_SIDES[`${box}-${side}`] ?? ""])].filter(Boolean);
+  }
+  switch (property) {
+    case "inset":
+      return [property, ...SIDES];
+    case "gap":
+      return [
+        property,
+        "row-gap",
+        "column-gap"
+      ];
+    case "overflow":
+      return [
+        property,
+        "overflow-x",
+        "overflow-y"
+      ];
+    case "border-radius":
+      return [property, ...CORNERS.map((corner) => `border-${corner}-radius`)];
+    case "border-width":
+    case "border-color":
+    case "border-style": {
+      const part = property.slice(7);
+      return [property, ...SIDES.map((side) => `border-${side}-${part}`)];
+    }
+    default:
+      return [property];
+  }
+}
+var LOGICAL_SIDES = {
+  "padding-left": "padding-inline-start",
+  "padding-right": "padding-inline-end",
+  "margin-left": "margin-inline-start",
+  "margin-right": "margin-inline-end",
+  "border-left-width": "border-inline-start-width",
+  "border-right-width": "border-inline-end-width",
+  "border-left-color": "border-inline-start-color",
+  "border-right-color": "border-inline-end-color",
+  left: "inset-inline-start",
+  right: "inset-inline-end",
+  "border-top-left-radius": "border-start-start-radius",
+  "border-top-right-radius": "border-start-end-radius",
+  "border-bottom-left-radius": "border-end-start-radius",
+  "border-bottom-right-radius": "border-end-end-radius"
+};
+var VERBATIM_ATTRIBUTES = "__verbatimAttributes";
+var SVG_SKIPPED_ATTRIBUTES = /^(on|data-|id$|clip-path$|mask$|filter$|xlink:href$|href$)/;
+var SVG_SKIPPED_TAGS = /* @__PURE__ */ new Set([
+  "defs",
+  "clippath",
+  "mask",
+  "lineargradient",
+  "radialgradient",
+  "filter",
+  "pattern",
+  "symbol",
+  "script",
+  "style",
+  "title",
+  "desc",
+  "use"
+]);
+var SVG_TAGS = /* @__PURE__ */ new Map([["foreignobject", "foreignObject"]]);
+function svgAttributeName(name) {
+  if (name === "viewbox") return "viewBox";
+  if (name.startsWith("aria-") || name === "role") return name;
+  if (name === "xmlns" || name === "xmlns:xlink") return name === "xmlns" ? "xmlns" : "xmlnsXlink";
+  return name.replace(/[-:]([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+var COMPONENT_INLINE_LAYOUT = /* @__PURE__ */ new Set([
+  "grid-template-columns",
+  "grid-template-rows",
+  "grid-column",
+  "grid-row",
+  "white-space",
+  "aspect-ratio",
+  "flex-basis",
+  "flex-grow",
+  "flex-shrink",
+  "max-width",
+  "min-width"
+]);
+var DEFAULT_CAPTURE_WIDTH = 1600;
+var ROOT_ATTRIBUTE_PROPS = [
+  "src",
+  "alt",
+  "href",
+  "title",
+  "placeholder"
+];
+var PAINT_PROPERTY = /^(background|border-(top-|right-|bottom-|left-)?(width|color)|box-shadow|outline)/;
+var GROUPING_TAGS = /* @__PURE__ */ new Set(["div", "span"]);
+var VOID_TAGS = /* @__PURE__ */ new Set([
+  "img",
+  "input",
+  "br",
+  "hr",
+  "wbr",
+  "area",
+  "col",
+  "source",
+  "track"
+]);
+var PLAIN_ATTRIBUTES = {
+  href: "href",
+  src: "src",
+  alt: "alt",
+  title: "title",
+  role: "role",
+  type: "type",
+  placeholder: "placeholder",
+  name: "name",
+  target: "target",
+  rel: "rel",
+  colspan: "colSpan",
+  rowspan: "rowSpan",
+  for: "htmlFor"
+};
+function plainAttributes(el) {
+  const out = {};
+  const tag = el.tagName.toLowerCase();
+  for (const [attr, prop] of Object.entries(PLAIN_ATTRIBUTES)) {
+    const value = el.getAttribute(attr);
+    if (value === null || value === void 0) continue;
+    if ((attr === "href" || attr === "src") && /^\s*javascript:/i.test(value)) continue;
+    out[prop] = value;
+  }
+  for (const { name, value } of el.attributes) if (name.startsWith("aria-")) out[name] = value;
+  if (tag === "input" || tag === "textarea") {
+    const value = tag === "textarea" ? el.textContent ?? "" : el.getAttribute("value");
+    if (value) out.defaultValue = value;
+  }
+  return out;
+}
+function plainText(el) {
+  if (isField(el)) return "";
+  let text = "";
+  const read = (node2) => {
+    for (const child of node2.childNodes) if (child.nodeType === 3) text += child.textContent ?? "";
+    else if (child.nodeType === 1 && visible(child)) read(child);
+  };
+  read(el);
+  return text.replace(/\s+/g, " ").trim();
+}
+function camelCase3(property) {
+  if (property.startsWith("--")) return property;
+  return property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
 function isImage(el) {
   return el.tagName.toLowerCase() === "img" && !el.hasAttribute("data-uds-component");
 }
@@ -88721,8 +89637,11 @@ function paintsItself(el) {
   });
 }
 function inlineDeclarations(el) {
+  return declarationsOf(el.getAttribute("style") ?? "");
+}
+function declarationsOf(text) {
   const out = [];
-  for (const declaration of (el.getAttribute("style") ?? "").split(";")) {
+  for (const declaration of text.split(";")) {
     const at = declaration.indexOf(":");
     if (at < 0) continue;
     const property = declaration.slice(0, at).trim().toLowerCase();
@@ -88741,6 +89660,8 @@ function negated(value) {
 }
 function equivalents({ property, value }) {
   if ((property === "grid-column" || property === "grid-row") && /^span \d+$/.test(value)) return [value, `${value} / ${value}`];
+  const px = /^(-?(?:\d+(?:\.\d+)?|\.\d+))px$/.exec(value);
+  if (px) return [value, `${Number(px[1]) / 16}rem`];
   return [value];
 }
 function stampedLayerProps({ el, layers }) {
@@ -88882,195 +89803,6 @@ function asArray(list) {
   return Array.from(list);
 }
 
-// ../config/dist/entities/system/Icon.js
-var iconVariantAs = external_exports.union([external_exports.strictObject({ prop: external_exports.string().min(1) }), external_exports.strictObject({ export: external_exports.record(external_exports.string().min(1), external_exports.string().min(1)) })]);
-var Icon = defineEntity({
-  kind: "icon",
-  label: "Icon",
-  labelPlural: "Icons",
-  fields: iconMemberMetadata,
-  groupFields: external_exports.strictObject({
-    /** The package the glyphs come from — a REF to the `Package` item, which owns the module
-    *  specifier (its path) and the pinned version. A generated module imports the glyphs it renders
-    *  from it, and a render that imports a member of it is placing a glyph of this set. */
-    package: Package.optional().describe("The npm package the set comes from."),
-    /** Where member metadata comes from and how to read it — `{ from, format }`. The build resolves
-    *  the source and bakes each member's fields; see `icon-metadata.ts`. */
-    metadata: iconMetadataDeclaration.optional().describe("Catalogue metadata read from the package."),
-    /** Named sizes the set ships (`sm: 16`).
-    *  @deprecated How a glyph is sized is the icon tool's component's business: the icon tool's component declares its own `size` and `variant` props, and every surface reads those. TODO: remove with a migration once no surface reads the library's copy. */
-    sizes: external_exports.record(external_exports.string(), external_exports.number()).optional().describe("Deprecated. The icon tool's component declares its own `size` and `variant` props."),
-    /** Weights/styles the set ships (`regular`, `fill`).
-    *  @deprecated Which styles a glyph takes is the icon tool's component's business: the icon tool's component declares its own `size` and `variant` props, and every surface reads those. TODO: remove with a migration once no surface reads the library's copy. */
-    variants: external_exports.array(external_exports.string()).optional().describe("Deprecated. The icon tool's component declares its own `size` and `variant` props."),
-    /** How a variant reaches the glyph; see {@link iconVariantAs}. Absent, a variant is dropped at
-    *  render.
-    *  @deprecated Only the framework's raw-draw path read it; the icon tool's component passes a
-    *  variant the way its package wants, and a set whose styles are separate exports lists them as
-    *  members. TODO: remove with `sizes` and `variants`. */
-    variantAs: iconVariantAs.optional().describe("Deprecated. The icon tool's component passes a variant the way its package wants.")
-  }),
-  groupComputed: {
-    /** The glyphs the set ships, by leaf name. */
-    members: ({ config: config2, path: path2 }) => config2.members("icon", path2).map((member) => member.path.startsWith(`${path2}/`) ? member.path.slice(path2.length + 1) : member.path),
-    /** The module the glyphs import from: the named package's path. `pathOf` drops a source
-    *  qualifier, so a borrowed set's module is still the bare specifier. */
-    module: ({ meta: meta3 }) => isRef2(meta3.package) ? pathOf2(meta3.package) : void 0,
-    /** The version the named package pins, resolved through the ref in whichever config holds the
-    *  package row. */
-    version: ({ config: config2, meta: meta3 }) => {
-      if (!isRef2(meta3.package)) return void 0;
-      const pinned = config2.resolveRef(meta3.package)?.toJSON();
-      return typeof pinned?.version === "string" ? pinned.version : void 0;
-    }
-  },
-  groupInputs: {
-    /**
-    * The package's module namespace. The set's members are its glyph exports, named by the rule
-    * the metadata format declares (`glyphExportRule`), so an alias pair is one member and the
-    * package's infrastructure exports are none; `items` lays facts over members that exist, and a
-    * key naming no member is refused so a typo cannot invent a glyph. Each member's identity is
-    * recorded by reference, so an authored glyph (`name={StarIcon}`) is matched to its member by
-    * the object rather than by anything the component says about itself, and an alias resolves to
-    * the member it is. Read once while the config file is evaluated and never stored.
-    */
-    glyphs: ({ input: input2, body }) => {
-      if (!isRef2(body.package)) throw new Error("Icon.group: `glyphs` needs `package` on the same group, since a glyph is identified as an export of that module.");
-      const format = iconMetadataFormat.safeParse(body.metadata?.format);
-      const members2 = glyphMembersOf({
-        namespace: input2,
-        format: format.success ? format.data : void 0
-      });
-      const overlay = body.items ?? {};
-      const unknown2 = Object.keys(overlay).filter((name) => !members2.includes(name));
-      if (unknown2.length > 0) throw new Error(`Icon.group: \`items\` names ${spellValues(unknown2)}, which ${unknown2.length === 1 ? "is not a glyph export" : "are not glyph exports"} of \`glyphs\`${members2.length === 0 ? " (the namespace has no glyph components; the package may not be installed)" : ""}. \`items\` lays facts over the members the package exports; it cannot add one.`);
-      recordGlyphIdentities({
-        namespace: input2,
-        names: members2,
-        specifier: pathOf2(body.package)
-      });
-      return { items: Object.fromEntries(members2.map((name) => [name, overlay[name] ?? {}])) };
-    }
-  },
-  /**
-  * A value bound to a library may be the glyph component itself, or the `package:` export ref the
-  * open-bag pass turned it into. Either is answered as the member name when the export is one of
-  * this library's and comes from the module its `package` names.
-  */
-  authoredValue: ({ config: config2, target: target2, leaves: leaves2 }) => glyphOfLibrary(libraryGlyphFacts({
-    config: config2,
-    target: target2,
-    leaves: leaves2
-  })),
-  invariants: (config2) => iconDomainInvariants(config2)
-});
-
-// ../config/dist/entities/system/icon-library.js
-var EMPTY_CATEGORIES = Object.freeze([]);
-var EMPTY_SIZES = Object.freeze({});
-var EMPTY_VARIANTS = Object.freeze([]);
-function iconLibrary(config2, path2) {
-  if (!config2) return void 0;
-  const cache = librariesOf(config2);
-  if (cache.has(path2)) return cache.get(path2);
-  const library = readIconLibrary(config2, path2);
-  cache.set(path2, library);
-  return library;
-}
-var librariesOf = createSliceMemo({
-  kinds: [
-    "icon",
-    "component",
-    "package"
-  ],
-  compute: (_config) => /* @__PURE__ */ new Map()
-});
-function readIconLibrary(config2, path2) {
-  const group = Icon.groups(config2).find((entry) => entry.path === path2);
-  if (!group) return void 0;
-  const { items: _items, sizes, variants: variants2, ...meta3 } = group.meta;
-  const set2 = setMembers({
-    config: config2,
-    path: path2,
-    declared: variants2
-  });
-  return {
-    ...meta3,
-    path: path2,
-    members: set2.members,
-    sizes: sizes ?? EMPTY_SIZES,
-    variants: variants2 ?? EMPTY_VARIANTS,
-    ...set2.memberVariants ? { memberVariants: set2.memberVariants } : {},
-    ...componentDefaults({
-      config: config2,
-      library: path2
-    })
-  };
-}
-function componentDefaults({ config: config2, library }) {
-  const bound = glyphComponentOf(config2, library);
-  if (!bound) return {};
-  const defaults = Component.get(config2, bound.path)?.defaultProps;
-  const variant = defaults?.variant;
-  const size = defaults?.size;
-  return {
-    ...typeof variant === "string" ? { defaultVariant: variant } : {},
-    ...typeof size === "string" ? { defaultSizeKey: size } : {}
-  };
-}
-var membersOf = createSliceMemo({
-  kinds: ["icon"],
-  compute: (_config) => /* @__PURE__ */ new Map()
-});
-function setMembers({ config: config2, path: path2, declared: declared2 }) {
-  const walked = membersOf(config2);
-  const hit = walked.get(path2);
-  if (hit) return hit;
-  const members2 = [];
-  const memberVariants = {};
-  for (const member of config2.members("icon", path2)) {
-    const leaf = member.path.startsWith(`${path2}/`) ? member.path.slice(path2.length + 1) : member.path;
-    members2.push(leaf);
-    const own2 = ownVariantsOf(member.body);
-    if (own2 && own2.length > 0 && !sameVariants({
-      own: own2,
-      declared: declared2
-    })) memberVariants[leaf] = own2;
-  }
-  const set2 = {
-    members: members2,
-    ...Object.keys(memberVariants).length > 0 ? { memberVariants } : {}
-  };
-  walked.set(path2, set2);
-  return set2;
-}
-function ownVariantsOf(body) {
-  const declared2 = body.variants;
-  if (!Array.isArray(declared2)) return void 0;
-  return declared2.filter((variant) => typeof variant === "string");
-}
-function sameVariants({ own: own2, declared: declared2 }) {
-  if (!declared2 || declared2.length !== own2.length) return false;
-  const set2 = new Set(declared2);
-  return own2.every((variant) => set2.has(variant));
-}
-var allLibrariesOf = createSliceMemo({
-  kinds: [
-    "icon",
-    "component",
-    "package"
-  ],
-  compute: (config2) => Icon.groups(config2).map(({ path: path2 }) => iconLibrary(config2, path2)).filter((library) => library !== void 0)
-});
-var boundLibrariesOf = createSliceMemo({
-  kinds: [
-    "component",
-    "icon",
-    "package"
-  ],
-  compute: (_config) => /* @__PURE__ */ new Map()
-});
-
 // ../config/dist/entities/canvas/node-patches.js
 function attachedSystem(config2) {
   const [source] = config2.list("system-source");