uivisor 0.1.10 → 0.2.0

package/dist/overlay/index.js

@@ -411,7 +411,8 @@ var ICONS = {
   tablet: sv('<rect x="3.3" y="2.2" width="9.4" height="11.6" rx="1.6"/><path d="M7 11.7h2"/>'),
   desktop: sv('<rect x="1.8" y="2.8" width="12.4" height="8" rx="1"/><path d="M5.8 14h4.4 M8 10.8v3.2"/>'),
   live: sv('<circle cx="8" cy="8" r="2"/><path d="M4.6 4.6a4.8 4.8 0 0 0 0 6.8 M11.4 4.6a4.8 4.8 0 0 1 0 6.8"/>'),
-  all: sv('<path d="M8 2.5v11 M3.2 5.2l9.6 5.6 M12.8 5.2l-9.6 5.6"/>')
+  all: sv('<path d="M8 2.5v11 M3.2 5.2l9.6 5.6 M12.8 5.2l-9.6 5.6"/>'),
+  grip: '<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor"><circle cx="6" cy="4" r="1.05"/><circle cx="6" cy="8" r="1.05"/><circle cx="6" cy="12" r="1.05"/><circle cx="10" cy="4" r="1.05"/><circle cx="10" cy="8" r="1.05"/><circle cx="10" cy="12" r="1.05"/></svg>'
 };
 var SECTIONS = [
   {
@@ -736,6 +737,609 @@ function collectVarNames(rule, out) {
   if (inner) for (const r of Array.from(inner)) collectVarNames(r, out);
 }
 
+// src/overlay/cssData.ts
+var CSS_PROPERTY_DATA = [
+  { "property": "display", "category": "Layout", "type": "enum", "keywords": ["block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "flow-root", "none", "contents", "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-cell", "table-column-group", "table-column", "table-caption", "list-item", "ruby"] },
+  { "property": "position", "category": "Layout", "type": "enum", "keywords": ["static", "relative", "absolute", "fixed", "sticky"] },
+  { "property": "top", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
+  { "property": "right", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
+  { "property": "bottom", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
+  { "property": "left", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
+  { "property": "inset", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "shorthand": true },
+  { "property": "inset-block", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "shorthand": true },
+  { "property": "inset-inline", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "shorthand": true },
+  { "property": "inset-block-start", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
+  { "property": "inset-block-end", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
+  { "property": "inset-inline-start", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
+  { "property": "inset-inline-end", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
+  { "property": "float", "category": "Layout", "type": "enum", "keywords": ["left", "right", "none", "inline-start", "inline-end"] },
+  { "property": "clear", "category": "Layout", "type": "enum", "keywords": ["none", "left", "right", "both", "inline-start", "inline-end"] },
+  { "property": "visibility", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "collapse"], "inherited": true },
+  { "property": "z-index", "category": "Layout", "type": "integer", "keywords": ["auto"] },
+  { "property": "box-sizing", "category": "Layout", "type": "enum", "keywords": ["content-box", "border-box"] },
+  { "property": "overflow", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"], "shorthand": true },
+  { "property": "overflow-x", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
+  { "property": "overflow-y", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
+  { "property": "overflow-block", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
+  { "property": "overflow-inline", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
+  { "property": "overflow-clip-margin", "category": "Layout", "type": "length", "keywords": ["content-box", "padding-box", "border-box"], "units": ["px", "em", "rem"] },
+  { "property": "isolation", "category": "Layout", "type": "enum", "keywords": ["auto", "isolate"] },
+  { "property": "contain", "category": "Layout", "type": "enum", "keywords": ["none", "strict", "content", "size", "inline-size", "layout", "style", "paint"] },
+  { "property": "content-visibility", "category": "Layout", "type": "enum", "keywords": ["visible", "auto", "hidden"] },
+  { "property": "contain-intrinsic-size", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"], "shorthand": true },
+  { "property": "contain-intrinsic-width", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
+  { "property": "contain-intrinsic-height", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
+  { "property": "contain-intrinsic-block-size", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
+  { "property": "contain-intrinsic-inline-size", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
+  { "property": "order", "category": "Layout", "type": "integer" },
+  { "property": "flex", "category": "Flexbox", "type": "shorthand", "shorthand": true },
+  { "property": "flex-grow", "category": "Flexbox", "type": "number" },
+  { "property": "flex-shrink", "category": "Flexbox", "type": "number" },
+  { "property": "flex-basis", "category": "Flexbox", "type": "length", "keywords": ["auto", "content", "max-content", "min-content", "fit-content"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "flex-direction", "category": "Flexbox", "type": "enum", "keywords": ["row", "row-reverse", "column", "column-reverse"] },
+  { "property": "flex-wrap", "category": "Flexbox", "type": "enum", "keywords": ["nowrap", "wrap", "wrap-reverse"] },
+  { "property": "flex-flow", "category": "Flexbox", "type": "shorthand", "keywords": ["row", "row-reverse", "column", "column-reverse", "nowrap", "wrap", "wrap-reverse"], "shorthand": true },
+  { "property": "justify-content", "category": "Flexbox", "type": "enum", "keywords": ["normal", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right", "stretch", "safe", "unsafe"] },
+  { "property": "align-items", "category": "Flexbox", "type": "enum", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "safe", "unsafe", "anchor-center"] },
+  { "property": "align-content", "category": "Flexbox", "type": "enum", "keywords": ["normal", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "stretch", "start", "end", "baseline", "first baseline", "last baseline", "safe", "unsafe"] },
+  { "property": "align-self", "category": "Flexbox", "type": "enum", "keywords": ["auto", "normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "safe", "unsafe", "anchor-center"] },
+  { "property": "justify-self", "category": "Flexbox", "type": "enum", "keywords": ["auto", "normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "left", "right", "safe", "unsafe", "anchor-center"] },
+  { "property": "justify-items", "category": "Flexbox", "type": "enum", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "left", "right", "legacy", "safe", "unsafe", "anchor-center"] },
+  { "property": "place-content", "category": "Flexbox", "type": "shorthand", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right", "baseline", "first baseline", "last baseline"], "shorthand": true },
+  { "property": "place-items", "category": "Flexbox", "type": "shorthand", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "left", "right", "legacy"], "shorthand": true },
+  { "property": "place-self", "category": "Flexbox", "type": "shorthand", "keywords": ["auto", "normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end"], "shorthand": true },
+  { "property": "gap", "category": "Flexbox", "type": "shorthand", "keywords": ["normal"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
+  { "property": "row-gap", "category": "Flexbox", "type": "length", "keywords": ["normal"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "column-gap", "category": "Flexbox", "type": "length", "keywords": ["normal"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "grid", "category": "Grid", "type": "shorthand", "shorthand": true },
+  { "property": "grid-template", "category": "Grid", "type": "shorthand", "shorthand": true },
+  { "property": "grid-template-columns", "category": "Grid", "type": "string", "keywords": ["none", "min-content", "max-content", "auto", "subgrid", "masonry"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
+  { "property": "grid-template-rows", "category": "Grid", "type": "string", "keywords": ["none", "min-content", "max-content", "auto", "subgrid", "masonry"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
+  { "property": "grid-template-areas", "category": "Grid", "type": "string", "keywords": ["none"] },
+  { "property": "grid-auto-columns", "category": "Grid", "type": "length", "keywords": ["auto", "min-content", "max-content"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
+  { "property": "grid-auto-rows", "category": "Grid", "type": "length", "keywords": ["auto", "min-content", "max-content"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
+  { "property": "grid-auto-flow", "category": "Grid", "type": "enum", "keywords": ["row", "column", "dense"] },
+  { "property": "grid-column", "category": "Grid", "type": "shorthand", "keywords": ["auto", "span"], "shorthand": true },
+  { "property": "grid-row", "category": "Grid", "type": "shorthand", "keywords": ["auto", "span"], "shorthand": true },
+  { "property": "grid-column-start", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
+  { "property": "grid-column-end", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
+  { "property": "grid-row-start", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
+  { "property": "grid-row-end", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
+  { "property": "grid-area", "category": "Grid", "type": "shorthand", "keywords": ["auto", "span"], "shorthand": true },
+  { "property": "margin", "category": "Spacing", "type": "shorthand", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin", "shorthand": true },
+  { "property": "margin-top", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "margin-right", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "margin-bottom", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "margin-left", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "margin-block", "category": "Spacing", "type": "shorthand", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin", "shorthand": true },
+  { "property": "margin-block-start", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "margin-block-end", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "margin-inline", "category": "Spacing", "type": "shorthand", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin", "shorthand": true },
+  { "property": "margin-inline-start", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "margin-inline-end", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "padding", "category": "Spacing", "type": "shorthand", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding", "shorthand": true },
+  { "property": "padding-top", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "padding-right", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "padding-bottom", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "padding-left", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "padding-block", "category": "Spacing", "type": "shorthand", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding", "shorthand": true },
+  { "property": "padding-block-start", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "padding-block-end", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "padding-inline", "category": "Spacing", "type": "shorthand", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding", "shorthand": true },
+  { "property": "padding-inline-start", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "padding-inline-end", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "width", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "height", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "min-width", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "max-width", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "min-height", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "max-height", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "aspect-ratio", "category": "Sizing", "type": "number", "keywords": ["auto"] },
+  { "property": "block-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "inline-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "min-block-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "max-block-size", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "min-inline-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "max-inline-size", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "object-fit", "category": "Sizing", "type": "enum", "keywords": ["fill", "contain", "cover", "none", "scale-down"] },
+  { "property": "object-position", "category": "Sizing", "type": "length", "keywords": ["left", "right", "top", "bottom", "center"], "units": ["px", "%", "em", "rem"] },
+  { "property": "border", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-width", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-style", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-color", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-top", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-right", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-bottom", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-left", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-top-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
+  { "property": "border-right-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
+  { "property": "border-bottom-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
+  { "property": "border-left-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
+  { "property": "border-top-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
+  { "property": "border-right-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
+  { "property": "border-bottom-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
+  { "property": "border-left-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
+  { "property": "border-top-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
+  { "property": "border-right-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
+  { "property": "border-bottom-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
+  { "property": "border-left-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
+  { "property": "border-block", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-block-start", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-block-end", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-inline", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-inline-start", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-inline-end", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-block-width", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-inline-width", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-block-style", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-inline-style", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-block-color", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-inline-color", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-block-start-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "border-block-end-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "border-inline-start-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "border-inline-end-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "border-block-start-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
+  { "property": "border-block-end-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
+  { "property": "border-inline-start-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
+  { "property": "border-inline-end-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
+  { "property": "border-block-start-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
+  { "property": "border-block-end-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
+  { "property": "border-inline-start-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
+  { "property": "border-inline-end-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
+  { "property": "border-radius", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-top-left-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
+  { "property": "border-top-right-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
+  { "property": "border-bottom-right-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
+  { "property": "border-bottom-left-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
+  { "property": "border-start-start-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "border-start-end-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "border-end-start-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "border-end-end-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "border-image", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "border-image-source", "category": "Border", "type": "image", "keywords": ["none"] },
+  { "property": "border-image-slice", "category": "Border", "type": "number", "keywords": ["fill"], "units": ["%"] },
+  { "property": "border-image-width", "category": "Border", "type": "number", "keywords": ["auto"], "units": ["px", "%", "em", "rem"] },
+  { "property": "border-image-outset", "category": "Border", "type": "number", "units": ["px", "em", "rem"] },
+  { "property": "border-image-repeat", "category": "Border", "type": "enum", "keywords": ["stretch", "repeat", "round", "space"] },
+  { "property": "outline", "category": "Border", "type": "shorthand", "shorthand": true },
+  { "property": "outline-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "outline-style", "category": "Border", "type": "enum", "keywords": ["auto", "none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
+  { "property": "outline-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "invert"] },
+  { "property": "outline-offset", "category": "Border", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "background", "category": "Background", "type": "shorthand", "shorthand": true },
+  { "property": "background-color", "category": "Background", "type": "color" },
+  { "property": "background-image", "category": "Background", "type": "image" },
+  { "property": "background-position", "category": "Background", "type": "shorthand", "keywords": ["top", "right", "bottom", "left", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
+  { "property": "background-position-x", "category": "Background", "type": "length", "keywords": ["left", "right", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "background-position-y", "category": "Background", "type": "length", "keywords": ["top", "bottom", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "background-size", "category": "Background", "type": "shorthand", "keywords": ["auto", "cover", "contain"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
+  { "property": "background-repeat", "category": "Background", "type": "enum", "keywords": ["repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round"] },
+  { "property": "background-attachment", "category": "Background", "type": "enum", "keywords": ["scroll", "fixed", "local"] },
+  { "property": "background-clip", "category": "Background", "type": "enum", "keywords": ["border-box", "padding-box", "content-box", "text"] },
+  { "property": "background-origin", "category": "Background", "type": "enum", "keywords": ["border-box", "padding-box", "content-box"] },
+  { "property": "background-blend-mode", "category": "Background", "type": "enum", "keywords": ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"] },
+  { "property": "color", "category": "Typography", "type": "color", "inherited": true },
+  { "property": "opacity", "category": "Typography", "type": "number" },
+  { "property": "font", "category": "Typography", "type": "shorthand", "inherited": true, "shorthand": true },
+  { "property": "font-family", "category": "Typography", "type": "string", "inherited": true },
+  { "property": "font-size", "category": "Typography", "type": "length", "keywords": ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "larger", "smaller"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "inherited": true },
+  { "property": "font-size-adjust", "category": "Typography", "type": "number", "keywords": ["none", "ex-height", "cap-height", "ch-width", "ic-width", "ic-height", "from-font"], "inherited": true },
+  { "property": "font-weight", "category": "Typography", "type": "integer", "keywords": ["normal", "bold", "bolder", "lighter"], "inherited": true },
+  { "property": "font-style", "category": "Typography", "type": "enum", "keywords": ["normal", "italic", "oblique"], "inherited": true },
+  { "property": "font-variant", "category": "Typography", "type": "shorthand", "keywords": ["normal", "none", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", "titling-caps", "ordinal", "slashed-zero", "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums", "diagonal-fractions", "stacked-fractions"], "inherited": true, "shorthand": true },
+  { "property": "font-variant-caps", "category": "Typography", "type": "enum", "keywords": ["normal", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", "titling-caps"], "inherited": true },
+  { "property": "font-variant-numeric", "category": "Typography", "type": "enum", "keywords": ["normal", "ordinal", "slashed-zero", "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums", "diagonal-fractions", "stacked-fractions"], "inherited": true },
+  { "property": "font-variant-ligatures", "category": "Typography", "type": "enum", "keywords": ["normal", "none", "common-ligatures", "no-common-ligatures", "discretionary-ligatures", "no-discretionary-ligatures", "historical-ligatures", "no-historical-ligatures", "contextual", "no-contextual"], "inherited": true },
+  { "property": "font-variant-east-asian", "category": "Typography", "type": "enum", "keywords": ["normal", "ruby", "jis78", "jis83", "jis90", "jis04", "simplified", "traditional", "full-width", "proportional-width"], "inherited": true },
+  { "property": "font-variant-position", "category": "Typography", "type": "enum", "keywords": ["normal", "sub", "super"], "inherited": true },
+  { "property": "font-stretch", "category": "Typography", "type": "percentage", "keywords": ["normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"], "units": ["%"], "inherited": true },
+  { "property": "font-feature-settings", "category": "Typography", "type": "string", "keywords": ["normal"], "inherited": true },
+  { "property": "font-variation-settings", "category": "Typography", "type": "string", "keywords": ["normal"], "inherited": true },
+  { "property": "font-kerning", "category": "Typography", "type": "enum", "keywords": ["auto", "normal", "none"], "inherited": true },
+  { "property": "font-optical-sizing", "category": "Typography", "type": "enum", "keywords": ["auto", "none"], "inherited": true },
+  { "property": "font-synthesis", "category": "Typography", "type": "enum", "keywords": ["none", "weight", "style", "small-caps", "position"], "inherited": true, "shorthand": true },
+  { "property": "line-height", "category": "Typography", "type": "number", "keywords": ["normal"], "units": ["px", "%", "em", "rem"], "inherited": true },
+  { "property": "letter-spacing", "category": "Typography", "type": "length", "keywords": ["normal"], "units": ["px", "em", "rem", "ch"], "inherited": true },
+  { "property": "word-spacing", "category": "Typography", "type": "length", "keywords": ["normal"], "units": ["px", "%", "em", "rem"], "inherited": true },
+  { "property": "text-align", "category": "Typography", "type": "enum", "keywords": ["start", "end", "left", "right", "center", "justify", "match-parent", "justify-all"], "inherited": true },
+  { "property": "text-align-last", "category": "Typography", "type": "enum", "keywords": ["auto", "start", "end", "left", "right", "center", "justify"], "inherited": true },
+  { "property": "text-justify", "category": "Typography", "type": "enum", "keywords": ["auto", "none", "inter-word", "inter-character"], "inherited": true },
+  { "property": "text-decoration", "category": "Typography", "type": "shorthand", "shorthand": true },
+  { "property": "text-decoration-line", "category": "Typography", "type": "enum", "keywords": ["none", "underline", "overline", "line-through", "blink"] },
+  { "property": "text-decoration-color", "category": "Typography", "type": "color" },
+  { "property": "text-decoration-style", "category": "Typography", "type": "enum", "keywords": ["solid", "double", "dotted", "dashed", "wavy"] },
+  { "property": "text-decoration-thickness", "category": "Typography", "type": "length", "keywords": ["auto", "from-font"], "units": ["px", "%", "em", "rem"] },
+  { "property": "text-decoration-skip-ink", "category": "Typography", "type": "enum", "keywords": ["auto", "none", "all"], "inherited": true },
+  { "property": "text-underline-offset", "category": "Typography", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem"], "inherited": true },
+  { "property": "text-underline-position", "category": "Typography", "type": "enum", "keywords": ["auto", "from-font", "under", "left", "right"], "inherited": true },
+  { "property": "text-emphasis", "category": "Typography", "type": "shorthand", "inherited": true, "shorthand": true },
+  { "property": "text-emphasis-style", "category": "Typography", "type": "enum", "keywords": ["none", "filled", "open", "dot", "circle", "double-circle", "triangle", "sesame"], "inherited": true },
+  { "property": "text-emphasis-color", "category": "Typography", "type": "color", "inherited": true },
+  { "property": "text-emphasis-position", "category": "Typography", "type": "enum", "keywords": ["over", "under", "left", "right"], "inherited": true },
+  { "property": "text-transform", "category": "Typography", "type": "enum", "keywords": ["none", "capitalize", "uppercase", "lowercase", "full-width", "full-size-kana"], "inherited": true },
+  { "property": "text-indent", "category": "Typography", "type": "length", "keywords": ["hanging", "each-line"], "units": ["px", "%", "em", "rem"], "inherited": true },
+  { "property": "text-overflow", "category": "Typography", "type": "enum", "keywords": ["clip", "ellipsis"] },
+  { "property": "text-shadow", "category": "Typography", "type": "string", "keywords": ["none"], "inherited": true },
+  { "property": "white-space", "category": "Typography", "type": "enum", "keywords": ["normal", "nowrap", "pre", "pre-wrap", "pre-line", "break-spaces"], "inherited": true },
+  { "property": "white-space-collapse", "category": "Typography", "type": "enum", "keywords": ["collapse", "preserve", "preserve-breaks", "preserve-spaces", "break-spaces"], "inherited": true },
+  { "property": "text-wrap", "category": "Typography", "type": "enum", "keywords": ["wrap", "nowrap", "balance", "pretty", "stable"], "inherited": true },
+  { "property": "text-wrap-mode", "category": "Typography", "type": "enum", "keywords": ["wrap", "nowrap"], "inherited": true },
+  { "property": "text-wrap-style", "category": "Typography", "type": "enum", "keywords": ["auto", "balance", "pretty", "stable"], "inherited": true },
+  { "property": "word-break", "category": "Typography", "type": "enum", "keywords": ["normal", "break-all", "keep-all", "break-word", "auto-phrase"], "inherited": true },
+  { "property": "line-break", "category": "Typography", "type": "enum", "keywords": ["auto", "loose", "normal", "strict", "anywhere"], "inherited": true },
+  { "property": "overflow-wrap", "category": "Typography", "type": "enum", "keywords": ["normal", "break-word", "anywhere"], "inherited": true },
+  { "property": "hyphens", "category": "Typography", "type": "enum", "keywords": ["none", "manual", "auto"], "inherited": true },
+  { "property": "hyphenate-character", "category": "Typography", "type": "string", "keywords": ["auto"], "inherited": true },
+  { "property": "direction", "category": "Typography", "type": "enum", "keywords": ["ltr", "rtl"], "inherited": true },
+  { "property": "unicode-bidi", "category": "Typography", "type": "enum", "keywords": ["normal", "embed", "isolate", "bidi-override", "isolate-override", "plaintext"] },
+  { "property": "writing-mode", "category": "Typography", "type": "enum", "keywords": ["horizontal-tb", "vertical-rl", "vertical-lr", "sideways-rl", "sideways-lr"], "inherited": true },
+  { "property": "text-orientation", "category": "Typography", "type": "enum", "keywords": ["mixed", "upright", "sideways"], "inherited": true },
+  { "property": "text-combine-upright", "category": "Typography", "type": "enum", "keywords": ["none", "all", "digits"], "inherited": true },
+  { "property": "vertical-align", "category": "Typography", "type": "length", "keywords": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"], "units": ["px", "%", "em", "rem"] },
+  { "property": "tab-size", "category": "Typography", "type": "number", "units": ["px", "em", "rem"], "inherited": true },
+  { "property": "quotes", "category": "Typography", "type": "string", "keywords": ["none", "auto"], "inherited": true },
+  { "property": "hanging-punctuation", "category": "Typography", "type": "enum", "keywords": ["none", "first", "last", "force-end", "allow-end"], "inherited": true },
+  { "property": "text-rendering", "category": "Typography", "type": "enum", "keywords": ["auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision"], "inherited": true },
+  { "property": "-webkit-text-stroke", "category": "Typography", "type": "shorthand", "shorthand": true },
+  { "property": "-webkit-text-stroke-width", "category": "Typography", "type": "length", "units": ["px", "em", "rem"] },
+  { "property": "-webkit-text-stroke-color", "category": "Typography", "type": "color" },
+  { "property": "-webkit-text-fill-color", "category": "Typography", "type": "color" },
+  { "property": "-webkit-line-clamp", "category": "Typography", "type": "integer", "keywords": ["none"] },
+  { "property": "caret-color", "category": "Typography", "type": "color", "keywords": ["auto"], "inherited": true },
+  { "property": "box-shadow", "category": "Effects", "type": "string", "keywords": ["none"] },
+  { "property": "filter", "category": "Effects", "type": "string", "keywords": ["none"] },
+  { "property": "backdrop-filter", "category": "Effects", "type": "string", "keywords": ["none"] },
+  { "property": "mix-blend-mode", "category": "Effects", "type": "enum", "keywords": ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "plus-darker", "plus-lighter"] },
+  { "property": "clip-path", "category": "Effects", "type": "string", "keywords": ["none", "border-box", "padding-box", "content-box", "margin-box", "fill-box", "stroke-box", "view-box"] },
+  { "property": "mask", "category": "Effects", "type": "shorthand", "shorthand": true },
+  { "property": "mask-image", "category": "Effects", "type": "image", "keywords": ["none"] },
+  { "property": "mask-mode", "category": "Effects", "type": "enum", "keywords": ["alpha", "luminance", "match-source"] },
+  { "property": "mask-repeat", "category": "Effects", "type": "enum", "keywords": ["repeat", "repeat-x", "repeat-y", "space", "round", "no-repeat"] },
+  { "property": "mask-position", "category": "Effects", "type": "length", "keywords": ["top", "bottom", "left", "right", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "mask-clip", "category": "Effects", "type": "enum", "keywords": ["border-box", "padding-box", "content-box", "fill-box", "stroke-box", "view-box", "no-clip"] },
+  { "property": "mask-origin", "category": "Effects", "type": "enum", "keywords": ["border-box", "padding-box", "content-box", "fill-box", "stroke-box", "view-box"] },
+  { "property": "mask-size", "category": "Effects", "type": "length", "keywords": ["auto", "cover", "contain"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "mask-composite", "category": "Effects", "type": "enum", "keywords": ["add", "subtract", "intersect", "exclude"] },
+  { "property": "mask-type", "category": "Effects", "type": "enum", "keywords": ["luminance", "alpha"] },
+  { "property": "cursor", "category": "Effects", "type": "enum", "keywords": ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out"], "inherited": true },
+  { "property": "accent-color", "category": "Effects", "type": "color", "keywords": ["auto"], "inherited": true },
+  { "property": "color-scheme", "category": "Effects", "type": "enum", "keywords": ["normal", "light", "dark", "only"], "inherited": true },
+  { "property": "transform", "category": "Transform", "type": "string" },
+  { "property": "transform-origin", "category": "Transform", "type": "string" },
+  { "property": "transform-style", "category": "Transform", "type": "enum", "keywords": ["flat", "preserve-3d"] },
+  { "property": "transform-box", "category": "Transform", "type": "enum", "keywords": ["content-box", "border-box", "fill-box", "stroke-box", "view-box"] },
+  { "property": "translate", "category": "Transform", "type": "string" },
+  { "property": "rotate", "category": "Transform", "type": "string" },
+  { "property": "scale", "category": "Transform", "type": "string" },
+  { "property": "perspective", "category": "Transform", "type": "length", "keywords": ["none"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
+  { "property": "perspective-origin", "category": "Transform", "type": "string" },
+  { "property": "backface-visibility", "category": "Transform", "type": "enum", "keywords": ["visible", "hidden"] },
+  { "property": "transition", "category": "Animation", "type": "shorthand", "shorthand": true },
+  { "property": "transition-property", "category": "Animation", "type": "enum", "keywords": ["none", "all"] },
+  { "property": "transition-duration", "category": "Animation", "type": "time", "units": ["s", "ms"] },
+  { "property": "transition-timing-function", "category": "Animation", "type": "enum", "keywords": ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps", "cubic-bezier"] },
+  { "property": "transition-delay", "category": "Animation", "type": "time", "units": ["s", "ms"] },
+  { "property": "transition-behavior", "category": "Animation", "type": "enum", "keywords": ["normal", "allow-discrete"] },
+  { "property": "animation", "category": "Animation", "type": "shorthand", "shorthand": true },
+  { "property": "animation-name", "category": "Animation", "type": "enum", "keywords": ["none"] },
+  { "property": "animation-duration", "category": "Animation", "type": "time", "units": ["s", "ms"] },
+  { "property": "animation-timing-function", "category": "Animation", "type": "enum", "keywords": ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps", "cubic-bezier"] },
+  { "property": "animation-delay", "category": "Animation", "type": "time", "units": ["s", "ms"] },
+  { "property": "animation-iteration-count", "category": "Animation", "type": "number", "keywords": ["infinite"] },
+  { "property": "animation-direction", "category": "Animation", "type": "enum", "keywords": ["normal", "reverse", "alternate", "alternate-reverse"] },
+  { "property": "animation-fill-mode", "category": "Animation", "type": "enum", "keywords": ["none", "forwards", "backwards", "both"] },
+  { "property": "animation-play-state", "category": "Animation", "type": "enum", "keywords": ["running", "paused"] },
+  { "property": "animation-composition", "category": "Animation", "type": "enum", "keywords": ["replace", "add", "accumulate"] },
+  { "property": "will-change", "category": "Animation", "type": "enum", "keywords": ["auto", "scroll-position", "contents"] },
+  { "property": "content", "category": "Misc", "type": "string" },
+  { "property": "list-style", "category": "Misc", "type": "shorthand", "inherited": true, "shorthand": true },
+  { "property": "list-style-type", "category": "Misc", "type": "enum", "keywords": ["disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-latin", "upper-latin", "lower-alpha", "upper-alpha", "armenian", "georgian", "cjk-decimal", "cjk-ideographic", "hebrew", "hiragana", "hiragana-iroha", "katakana", "katakana-iroha", "arabic-indic", "bengali", "cambodian", "khmer", "devanagari", "gujarati", "gurmukhi", "kannada", "lao", "malayalam", "myanmar", "oriya", "persian", "tamil", "telugu", "thai", "tibetan", "japanese-formal", "japanese-informal", "korean-hangul-formal", "korean-hanja-formal", "korean-hanja-informal", "simp-chinese-formal", "simp-chinese-informal", "trad-chinese-formal", "trad-chinese-informal", "disclosure-open", "disclosure-closed", "none"], "inherited": true },
+  { "property": "list-style-position", "category": "Misc", "type": "enum", "keywords": ["inside", "outside"], "inherited": true },
+  { "property": "list-style-image", "category": "Misc", "type": "image", "inherited": true },
+  { "property": "scroll-behavior", "category": "Misc", "type": "enum", "keywords": ["auto", "smooth"] },
+  { "property": "scroll-snap-type", "category": "Misc", "type": "enum", "keywords": ["none", "x", "y", "block", "inline", "both", "mandatory", "proximity"] },
+  { "property": "scroll-snap-align", "category": "Misc", "type": "enum", "keywords": ["none", "start", "end", "center"] },
+  { "property": "scroll-snap-stop", "category": "Misc", "type": "enum", "keywords": ["normal", "always"] },
+  { "property": "scroll-margin", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
+  { "property": "scroll-margin-top", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "scroll-margin-right", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "scroll-margin-bottom", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "scroll-margin-left", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "scroll-margin-block", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
+  { "property": "scroll-margin-inline", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
+  { "property": "scroll-margin-block-start", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "scroll-margin-block-end", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "scroll-margin-inline-start", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "scroll-margin-inline-end", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
+  { "property": "scroll-padding", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
+  { "property": "scroll-padding-top", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "scroll-padding-right", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "scroll-padding-bottom", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "scroll-padding-left", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "scroll-padding-block", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
+  { "property": "scroll-padding-inline", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
+  { "property": "scroll-padding-block-start", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "scroll-padding-block-end", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "scroll-padding-inline-start", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "scroll-padding-inline-end", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
+  { "property": "overscroll-behavior", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"], "shorthand": true },
+  { "property": "overscroll-behavior-x", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
+  { "property": "overscroll-behavior-y", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
+  { "property": "overscroll-behavior-block", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
+  { "property": "overscroll-behavior-inline", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
+  { "property": "user-select", "category": "Misc", "type": "enum", "keywords": ["auto", "text", "none", "all", "contain"] },
+  { "property": "pointer-events", "category": "Misc", "type": "enum", "keywords": ["auto", "none", "visiblePainted", "visibleFill", "visibleStroke", "visible", "painted", "fill", "stroke", "all"], "inherited": true },
+  { "property": "touch-action", "category": "Misc", "type": "enum", "keywords": ["auto", "none", "pan-x", "pan-left", "pan-right", "pan-y", "pan-up", "pan-down", "pinch-zoom", "manipulation"] },
+  { "property": "resize", "category": "Misc", "type": "enum", "keywords": ["none", "both", "horizontal", "vertical", "block", "inline"] },
+  { "property": "appearance", "category": "Misc", "type": "enum", "keywords": ["none", "auto", "base-select", "menulist-button", "textfield", "button", "searchfield", "textarea", "checkbox", "radio", "menulist", "listbox", "meter", "progress-bar", "push-button", "slider-horizontal", "square-button"] },
+  { "property": "table-layout", "category": "Misc", "type": "enum", "keywords": ["auto", "fixed"] },
+  { "property": "border-collapse", "category": "Misc", "type": "enum", "keywords": ["separate", "collapse"], "inherited": true },
+  { "property": "border-spacing", "category": "Misc", "type": "length", "units": ["px", "em", "rem"], "inherited": true },
+  { "property": "caption-side", "category": "Misc", "type": "enum", "keywords": ["top", "bottom", "block-start", "block-end", "inline-start", "inline-end"], "inherited": true },
+  { "property": "empty-cells", "category": "Misc", "type": "enum", "keywords": ["show", "hide"], "inherited": true },
+  { "property": "caret", "category": "Misc", "type": "shorthand", "inherited": true, "shorthand": true },
+  { "property": "caret-shape", "category": "Misc", "type": "enum", "keywords": ["auto", "bar", "block", "underscore"], "inherited": true },
+  { "property": "scrollbar-width", "category": "Misc", "type": "enum", "keywords": ["auto", "thin", "none"] },
+  { "property": "scrollbar-color", "category": "Misc", "type": "color", "inherited": true },
+  { "property": "scrollbar-gutter", "category": "Misc", "type": "enum", "keywords": ["auto", "stable", "both-edges"] },
+  { "property": "image-rendering", "category": "Misc", "type": "enum", "keywords": ["auto", "smooth", "high-quality", "crisp-edges", "pixelated"], "inherited": true },
+  { "property": "counter-reset", "category": "Misc", "type": "string" },
+  { "property": "counter-increment", "category": "Misc", "type": "string" },
+  { "property": "counter-set", "category": "Misc", "type": "string" },
+  { "property": "all", "category": "Misc", "type": "enum", "keywords": ["initial", "inherit", "unset", "revert", "revert-layer"], "shorthand": true },
+  { "property": "forced-color-adjust", "category": "Misc", "type": "enum", "keywords": ["auto", "none", "preserve-parent-color"], "inherited": true },
+  { "property": "print-color-adjust", "category": "Misc", "type": "enum", "keywords": ["economy", "exact"], "inherited": true }
+];
+
+// src/overlay/cssRegistry.ts
+var COMMON = /* @__PURE__ */ new Set([
+  // Layout
+  "display",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "float",
+  "clear",
+  "z-index",
+  "box-sizing",
+  "visibility",
+  "overflow",
+  "overflow-x",
+  "overflow-y",
+  "opacity",
+  // Flexbox
+  "flex",
+  "flex-direction",
+  "flex-wrap",
+  "justify-content",
+  "align-items",
+  "align-content",
+  "align-self",
+  "justify-self",
+  "flex-grow",
+  "flex-shrink",
+  "flex-basis",
+  "order",
+  "gap",
+  "row-gap",
+  "column-gap",
+  // Grid
+  "grid-template-columns",
+  "grid-template-rows",
+  "grid-auto-flow",
+  "grid-auto-columns",
+  "grid-auto-rows",
+  "grid-column",
+  "grid-row",
+  "grid-area",
+  "justify-items",
+  "place-items",
+  // Spacing
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "padding",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  // Sizing
+  "width",
+  "height",
+  "min-width",
+  "max-width",
+  "min-height",
+  "max-height",
+  "aspect-ratio",
+  "object-fit",
+  "object-position",
+  // Border
+  "border",
+  "border-width",
+  "border-style",
+  "border-color",
+  "border-top-width",
+  "border-right-width",
+  "border-bottom-width",
+  "border-left-width",
+  "border-radius",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-right-radius",
+  "border-bottom-left-radius",
+  "outline",
+  "outline-width",
+  "outline-style",
+  "outline-color",
+  "outline-offset",
+  // Background
+  "background",
+  "background-color",
+  "background-image",
+  "background-size",
+  "background-position",
+  "background-repeat",
+  "background-attachment",
+  "background-clip",
+  // Typography
+  "color",
+  "font",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "font-style",
+  "font-variant",
+  "line-height",
+  "letter-spacing",
+  "word-spacing",
+  "text-align",
+  "text-decoration",
+  "text-decoration-line",
+  "text-decoration-color",
+  "text-transform",
+  "text-indent",
+  "text-overflow",
+  "white-space",
+  "text-shadow",
+  "direction",
+  "vertical-align",
+  // Effects
+  "box-shadow",
+  "filter",
+  "backdrop-filter",
+  "mix-blend-mode",
+  "clip-path",
+  "cursor",
+  "mask",
+  // Transform
+  "transform",
+  "transform-origin",
+  "transform-style",
+  "perspective",
+  "backface-visibility",
+  "translate",
+  "rotate",
+  "scale",
+  // Animation
+  "transition",
+  "transition-property",
+  "transition-duration",
+  "transition-timing-function",
+  "transition-delay",
+  "animation",
+  "animation-name",
+  "animation-duration",
+  "animation-timing-function",
+  "animation-delay",
+  "animation-iteration-count",
+  "animation-direction",
+  "animation-fill-mode",
+  "will-change",
+  // Misc
+  "content",
+  "list-style",
+  "list-style-type",
+  "list-style-position",
+  "user-select",
+  "pointer-events",
+  "scroll-behavior",
+  "resize",
+  "caret-color",
+  "accent-color",
+  "appearance"
+]);
+var CATEGORY_ORDER = [
+  "Layout",
+  "Flexbox",
+  "Grid",
+  "Spacing",
+  "Sizing",
+  "Border",
+  "Background",
+  "Typography",
+  "Effects",
+  "Transform",
+  "Animation",
+  "Misc"
+];
+var DEFAULT_UNITS = ["px", "%", "em", "rem", "vh", "vw", "ch"];
+function categoryFor(p) {
+  if (/^grid/.test(p)) return "Grid";
+  if (/^(flex|justify|align|order|place)/.test(p)) return "Flexbox";
+  if (/^(margin|padding|gap|row-gap|column-gap)/.test(p)) return "Spacing";
+  if (/^(width|height|min-|max-|aspect-ratio|inline-size|block-size|object-)/.test(p)) return "Sizing";
+  if (/^(border|outline)/.test(p)) return "Border";
+  if (/^background/.test(p)) return "Background";
+  if (/^(font|text|color$|line-height|letter|word|white-space|writing|direction|vertical-align|tab-size|hyphens|quotes|list-style)/.test(p))
+    return "Typography";
+  if (/^(transition|animation|will-change)/.test(p)) return "Animation";
+  if (/^(transform|translate|rotate|scale|perspective|backface)/.test(p)) return "Transform";
+  if (/^(opacity|box-shadow|filter|backdrop|mix-blend|clip-path|mask|cursor)/.test(p)) return "Effects";
+  if (/^(display|position|top|right|bottom|left|inset|float|clear|visibility|z-index|box-sizing|overflow|isolation|contain)/.test(p))
+    return "Layout";
+  return "Misc";
+}
+function typeForValue(p, v) {
+  const s = (v || "").trim();
+  if (/color/.test(p) || /^(rgb|rgba|hsl|hsla|#|currentcolor|transparent)\b/i.test(s)) return "color";
+  if (/^-?\d*\.?\d+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|q)$/i.test(s)) return "length";
+  if (/^-?\d*\.?\d+(s|ms)$/i.test(s)) return "time";
+  if (/^-?\d*\.?\d+(deg|rad|grad|turn)$/i.test(s)) return "angle";
+  if (/^(url\(|linear-gradient|radial-gradient|conic-gradient)/i.test(s)) return "image";
+  if (/(^|-)color$/.test(p)) return "color";
+  if (/(width|height|size|^inset|margin|padding|gap|^top$|^left$|^right$|^bottom$|spacing|indent|offset|radius|translate|^scroll-padding|^scroll-margin)/.test(p))
+    return "length";
+  if (/^-?\d+$/.test(s)) return "integer";
+  if (/^-?\d*\.?\d+$/.test(s)) return "number";
+  return "string";
+}
+var _registry = null;
+function cssRegistry() {
+  if (_registry) return _registry;
+  const byProp = /* @__PURE__ */ new Map();
+  for (const m of CSS_PROPERTY_DATA) {
+    byProp.set(m.property, {
+      ...m,
+      units: m.units && m.units.length ? m.units : m.type === "length" ? DEFAULT_UNITS : void 0,
+      common: COMMON.has(m.property)
+    });
+  }
+  try {
+    if (typeof document !== "undefined") {
+      const cs = getComputedStyle(document.documentElement);
+      for (let i = 0; i < cs.length; i++) {
+        const p = cs[i];
+        if (!p || p.startsWith("--") || byProp.has(p)) continue;
+        const type = typeForValue(p, cs.getPropertyValue(p));
+        byProp.set(p, { property: p, category: categoryFor(p), type, units: type === "length" ? DEFAULT_UNITS : void 0 });
+      }
+    }
+  } catch {
+  }
+  const groups = /* @__PURE__ */ new Map();
+  for (const [prop, m] of byProp) {
+    const cat = m.category || "Misc";
+    const arr = groups.get(cat) ?? [];
+    arr.push(prop);
+    groups.set(cat, arr);
+  }
+  const orderedNames = [
+    ...CATEGORY_ORDER.filter((c) => groups.has(c)),
+    ...[...groups.keys()].filter((c) => !CATEGORY_ORDER.includes(c)).sort()
+  ];
+  const categories = orderedNames.map((name) => ({ name, props: groups.get(name).slice().sort() }));
+  _registry = { byProp, categories };
+  return _registry;
+}
+function cssMeta(property) {
+  return cssRegistry().byProp.get(property);
+}
+
 // src/overlay/mechanism.ts
 var TW_UTILITY = /^-?(?:p|m|px|py|pt|pr|pb|pl|mx|my|mt|mr|mb|ml|gap|w|h|min-w|max-w|min-h|max-h|text|bg|border|rounded|flex|grid|gap-x|gap-y|items|justify|self|place|font|leading|tracking|space|inline|block|inline-block|hidden|table|absolute|relative|fixed|sticky|static|top|bottom|left|right|inset|z|shadow|opacity|transition|duration|ease|scale|rotate|translate|cursor|overflow|object|aspect|order|col|row|basis|grow|shrink|divide|ring|outline)(?:-|$)/;
 var TW_VARIANT = /^(?:sm|md|lg|xl|2xl|hover|focus|focus-visible|focus-within|active|visited|disabled|dark|group|group-hover|peer|first|last|odd|even|motion-safe|motion-reduce|print|rtl|ltr)::?|^(?:sm|md|lg|xl|2xl|hover|focus|active|disabled|dark|group-hover):/;
@@ -942,8 +1546,9 @@ function renderPrompt(records) {
         }
         if (c.after.designToken || c.after.token && /^(text|bg|border|rounded|shadow)-(?!\[)/.test(c.after.token))
           anyDesignToken = true;
+        const from = (c.before.computed ?? "").trim();
         lines.push(
-          `    - ${c.property}: ${c.before.computed} \u2192 ${c.after.computed}${suggestion}`
+          from ? `    - ${c.property}: ${from} \u2192 ${c.after.computed}${suggestion}` : `    - ${c.property}: set to ${c.after.computed}${suggestion}`
         );
       }
     }
@@ -1189,24 +1794,34 @@ var CSS = (
 
 .uiv-panel {
   position: fixed; right: 16px; bottom: 72px; z-index: 2147483647;
-  width: 328px; max-height: 80vh; overflow: auto;
-  background: #18181b; color: #e4e4e7; border: 1px solid #3f3f46;
-  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.45);
+  width: 360px; max-height: 84vh; overflow: auto;
+  background: #141416; color: #e4e4e7; border: 1px solid #2a2a2e;
+  border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
   font-size: 12px; display: none;
 }
 .uiv-panel.show { display: block; }
 
 .uiv-head {
-  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
-  border-bottom: 1px solid #27272a; position: sticky; top: 0; background: #18181b;
+  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
+  border-bottom: 1px solid #242428; position: sticky; top: 0; z-index: 5; background: #141416;
 }
-.uiv-head b { font-size: 13px; color: #fff; letter-spacing: .3px; }
-.uiv-bp { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 999px;
+.uiv-head b { font-size: 13px; color: #fafafa; letter-spacing: .2px; }
+.uiv-bp { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 999px;
   background: #312e81; color: #c7d2fe; font-weight: 600; }
 .uiv-x { cursor: pointer; color: #71717a; padding: 2px 4px; }
 .uiv-x:hover { color: #fff; }
 
-.uiv-sec { padding: 10px 12px; border-bottom: 1px solid #27272a; }
+.uiv-sec { padding: 11px 13px; border-bottom: 1px solid #1f1f22; }
+
+/* ---- Framer-style top alignment toolbar ---- */
+.uiv-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 13px;
+  border-bottom: 1px solid #1f1f22; }
+.uiv-tgroup { display: flex; gap: 2px; }
+.uiv-tbtn { display: flex; align-items: center; justify-content: center; width: 26px; height: 22px;
+  border-radius: 5px; background: transparent; border: 1px solid transparent; color: #8b8b94; cursor: pointer; }
+.uiv-tbtn:hover { background: #1f1f23; color: #e4e4e7; }
+.uiv-tbtn.on { background: #312e81; border-color: #4f46e5; color: #fff; }
+.uiv-tsep { width: 1px; height: 16px; background: #2a2a2e; }
 .uiv-empty { color: #71717a; padding: 18px 12px; text-align: center; }
 
 .uiv-meta { line-height: 1.5; }
@@ -1318,8 +1933,8 @@ var CSS = (
 .uiv-ctl > .cfield { min-width: 0; }
 
 /* numeric field with a scrub handle on the left */
-.uiv-num { display: flex; align-items: stretch; background: #27272a;
-  border: 1px solid #3f3f46; border-radius: 7px; overflow: hidden; }
+.uiv-num { display: flex; align-items: stretch; background: #1c1c20;
+  border: 1px solid #313138; border-radius: 7px; overflow: hidden; }
 .uiv-num.changed { border-color: #4ade80; }
 .uiv-num.changed input { color: #4ade80; } /* uivisor-edited value \u2192 green */
 .uiv-sel.changed, .uiv-color.changed { border-color: #4ade80; }
@@ -1344,7 +1959,7 @@ var CSS = (
 
 .uiv-expand { display: flex; align-items: center; justify-content: center;
   width: 26px; height: 28px; border-radius: 7px; cursor: pointer;
-  background: #27272a; border: 1px solid #3f3f46; color: #8b8b94; }
+  background: #1c1c20; border: 1px solid #313138; color: #8b8b94; }
 .uiv-expand:hover { color: #fff; background: #3f3f46; }
 .uiv-expand.on { color: #c7d2fe; border-color: #4f46e5; background: #312e81; }
 
@@ -1353,13 +1968,13 @@ var CSS = (
 
 /* Weight dropdown only \u2014 must NOT match the unit <select> inside dim fields. */
 .uiv-ctl select.uiv-sel {
-  width: 100%; background: #27272a; border: 1px solid #3f3f46; color: #fff;
+  width: 100%; background: #1c1c20; border: 1px solid #313138; color: #fff;
   border-radius: 7px; padding: 6px 7px; font-size: 12px; outline: none;
 }
 .uiv-ctl select.uiv-sel:focus { border-color: #6366f1; }
 .uiv-ctl input[type=color] { width: 100%; height: 28px; padding: 2px; cursor: pointer;
-  background: #27272a; border: 1px solid #3f3f46; border-radius: 7px; }
-.uiv-ctl input.uiv-text { width: 100%; background: #27272a; border: 1px solid #3f3f46;
+  background: #1c1c20; border: 1px solid #313138; border-radius: 7px; }
+.uiv-ctl input.uiv-text { width: 100%; background: #1c1c20; border: 1px solid #313138;
   color: #fff; border-radius: 7px; padding: 6px 7px; font-size: 12px; outline: none; }
 .uiv-ctl input.uiv-text:focus { border-color: #6366f1; }
 .uiv-ctl input.uiv-text.changed { border-color: #4ade80; color: #4ade80; }
@@ -1383,7 +1998,7 @@ var CSS = (
 .uiv-btn.primary:hover { background: #4338ca; }
 .uiv-btn.ghost { flex: 0 0 auto; }
 /* floating read-only "all styles" block, docked bottom-right, left of the panel */
-.uiv-info { position: fixed; right: 352px; bottom: 16px; z-index: 2147483646;
+.uiv-info { position: fixed; right: 384px; bottom: 16px; z-index: 2147483646;
   width: 216px; max-height: 52vh; overflow: auto; display: none;
   background: rgba(24,24,27,0.86); color: #e4e4e7;
   border: 1px solid #3f3f46; border-radius: 10px; padding: 8px 10px;
@@ -1392,6 +2007,76 @@ var CSS = (
 .uiv-info-h { font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
   color: #8b8b94; font-weight: 600; margin-bottom: 6px; }
 .uiv-info-sub { color: #52525b; }
+/* ---- box-model widget (nested margin / padding, Figma/Framer style) ----
+   Bands are sized so the side inputs NEVER overlap the inner content box:
+   vertical band 26px (> input 18px), horizontal band 46px (> input 36px). */
+.uiv-bm { position: relative; height: 148px; margin: 2px 0 9px;
+  background: #1b1b1f; border: 1px solid #2f2f35; border-radius: 9px; }
+.uiv-bm-pad { position: absolute; top: 26px; bottom: 26px; left: 46px; right: 46px;
+  background: #26262c; border: 1px solid #3a3a42; border-radius: 7px; }
+.uiv-bm-content { position: absolute; z-index: 0; top: 26px; bottom: 26px; left: 46px; right: 46px;
+  background: #34343c; border-radius: 5px; }
+.uiv-bm-tag { position: absolute; z-index: 1; top: 4px; left: 8px; font-size: 7.5px; font-weight: 700;
+  letter-spacing: .5px; color: #6b6b73; pointer-events: none; }
+.uiv-bm-i { position: absolute; z-index: 3; width: 36px; height: 18px; padding: 0; box-sizing: border-box;
+  background: #0e0e11; border: 1px solid #34343c; border-radius: 5px;
+  color: #d4d4d8; text-align: center; text-align-last: center; line-height: 16px; font-size: 10px;
+  outline: none; cursor: ew-resize; font-family: ui-monospace, monospace; -moz-appearance: textfield; }
+.uiv-bm-i::-webkit-outer-spin-button, .uiv-bm-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.uiv-bm-i:hover { border-color: #52525b; }
+.uiv-bm-i:focus { cursor: text; border-color: #6366f1; }
+.uiv-bm-i.bm-top { top: 4px; left: 50%; transform: translateX(-50%); }
+.uiv-bm-i.bm-bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
+.uiv-bm-i.bm-left { left: 5px; top: 50%; transform: translateY(-50%); }
+.uiv-bm-i.bm-right { right: 5px; top: 50%; transform: translateY(-50%); }
+.uiv-bm-i.st-file { color: #e4e4e7; }
+.uiv-bm-i.st-edited { color: #4ade80; }
+.uiv-bm-i.st-inherit { color: #38bdf8; }
+.uiv-bm-i.st-auto { color: #6b7280; }
+/* spacing-token dropdown \u2014 opens when a side value is focused/clicked */
+.uiv-bm-pop { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
+  margin: -3px 0 8px; padding: 8px; background: #1c1c20; border: 1px solid #34343c;
+  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
+.uiv-bm-pop[hidden] { display: none; }
+.uiv-bm-poplabel { width: 100%; font-size: 9px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: .4px; color: #6b6b73; font-family: ui-monospace, monospace; }
+.uiv-bm-chip { background: #1e1b4b55; border: 1px solid #4338ca; color: #c7d2fe; border-radius: 6px;
+  padding: 3px 8px; font-size: 10px; cursor: pointer; font-family: ui-monospace, monospace; }
+.uiv-bm-chip:hover { background: #4f46e5; border-color: #6366f1; color: #fff; }
+
+/* ---- All CSS inspector (search + categories + generic smart inputs) ---- */
+.uiv-csssearch { width: 100%; background: #0f0f12; border: 1px solid #3f3f46; color: #e4e4e7;
+  border-radius: 7px; padding: 7px 9px; font-size: 12px; outline: none; font-family: ui-monospace, monospace; }
+.uiv-csssearch:focus { border-color: #6366f1; }
+.uiv-csssearch::placeholder { color: #6b6b73; }
+.uiv-catacc .uiv-catn { color: #52525b; font-weight: 700; margin-left: auto; }
+.uiv-showall { background: none; border: 0; color: #818cf8; cursor: pointer;
+  font-size: 10px; padding: 2px 0 4px; font-weight: 600; }
+.uiv-showall:hover { color: #a5b4fc; }
+.uiv-gctl { grid-template-columns: 108px 1fr; gap: 8px; margin-bottom: 5px; }
+.uiv-gplabel { font-family: ui-monospace, monospace; font-size: 10px; color: #a1a1aa;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.uiv-gsel { width: 100%; background: #1c1c20; border: 1px solid #313138; color: #fff;
+  border-radius: 7px; padding: 5px 6px; font-size: 11px; outline: none; font-family: ui-monospace, monospace; }
+.uiv-gsel:focus { border-color: #6366f1; }
+.uiv-gnum { display: flex; align-items: stretch; background: #1c1c20; border: 1px solid #313138;
+  border-radius: 7px; overflow: hidden; }
+.uiv-gnum:focus-within { border-color: #6366f1; }
+.uiv-gtext { flex: 1; min-width: 0; background: #1c1c20; border: 1px solid #313138; color: #fff;
+  border-radius: 7px; padding: 5px 7px; font-size: 11px; outline: none; font-family: ui-monospace, monospace; }
+.uiv-gnum .uiv-gtext { border: none; border-radius: 0; background: transparent; padding-left: 2px; }
+.uiv-gtext:focus { border-color: #6366f1; }
+.uiv-gtext::placeholder { color: #6b6b73; }
+.uiv-gcolorwrap { display: flex; gap: 5px; align-items: center; }
+.uiv-gcolor { width: 28px; height: 26px; padding: 2px; flex: 0 0 auto; background: #1c1c20;
+  border: 1px solid #313138; border-radius: 7px; cursor: pointer; }
+.uiv-gtextc { flex: 1; }
+.uiv-gctl.st-file .uiv-gtext, .uiv-gctl.st-file .uiv-gsel { color: #e4e4e7; }
+.uiv-gctl.st-edited .uiv-gtext, .uiv-gctl.st-edited .uiv-gsel { color: #4ade80; }
+.uiv-gctl.st-edited .uiv-gnum, .uiv-gctl.st-edited .uiv-gsel { border-color: #4ade80; }
+.uiv-gctl.st-inherit .uiv-gtext, .uiv-gctl.st-inherit .uiv-gsel { color: #38bdf8; }
+.uiv-gctl.st-auto .uiv-gtext, .uiv-gctl.st-auto .uiv-gsel { color: #6b7280; }
+
 .uiv-toast { position: fixed; right: 16px; bottom: 128px; z-index: 2147483647;
   background: #22c55e; color: #052e16; padding: 8px 12px; border-radius: 8px;
   font-size: 12px; font-weight: 600; display: none; }
@@ -1412,6 +2097,38 @@ var INHERITED_PROPS = /* @__PURE__ */ new Set([
   "text-align",
   "font-family"
 ]);
+var BOX_SIDES = {
+  inset: [
+    { css: "top", label: "T" },
+    { css: "right", label: "R" },
+    { css: "bottom", label: "B" },
+    { css: "left", label: "L" }
+  ],
+  padding: [
+    { css: "padding-top", label: "T" },
+    { css: "padding-right", label: "R" },
+    { css: "padding-bottom", label: "B" },
+    { css: "padding-left", label: "L" }
+  ],
+  margin: [
+    { css: "margin-top", label: "T" },
+    { css: "margin-right", label: "R" },
+    { css: "margin-bottom", label: "B" },
+    { css: "margin-left", label: "L" }
+  ],
+  radius: [
+    { css: "border-top-left-radius", label: "TL" },
+    { css: "border-top-right-radius", label: "TR" },
+    { css: "border-bottom-right-radius", label: "BR" },
+    { css: "border-bottom-left-radius", label: "BL" }
+  ],
+  "border-width": [
+    { css: "border-top-width", label: "T" },
+    { css: "border-right-width", label: "R" },
+    { css: "border-bottom-width", label: "B" },
+    { css: "border-left-width", label: "L" }
+  ]
+};
 var Uivisor = class {
   constructor() {
     this.enabled = false;
@@ -1422,6 +2139,12 @@ var Uivisor = class {
     this.collapsedSecs = /* @__PURE__ */ new Set();
     /** Controls manually revealed via "+" (hideWhenAuto controls that are auto). */
     this.revealedCtls = /* @__PURE__ */ new Set();
+    /** "All CSS" search query + which property categories are expanded / showing all. */
+    this.cssSearch = "";
+    this.expandedCats = /* @__PURE__ */ new Set();
+    this.showAllCats = /* @__PURE__ */ new Set();
+    /** Box-model widget: the last-focused side the token dropdown targets. */
+    this.lastBmSide = "padding-top";
     /** Undo / redo stacks of full edit-state snapshots. */
     this.undoStack = [];
     this.redoStack = [];
@@ -1508,6 +2231,12 @@ var Uivisor = class {
         this.selBox.style.display = "none";
       }
     };
+    /** Properties to snapshot on selection: the curated set ∪ the whole registry. */
+    this._snapProps = null;
+    // ---- "All CSS" inspector (registry-driven, curated like Framer/Webflow) ----
+    /** Properties already covered by the curated quick-control sections above — so we
+     *  don't show them again in the All-CSS area. */
+    this._curatedProps = null;
   }
   /** Project breakpoints — re-detect until the stylesheets yield a real set. */
   bpSystem() {
@@ -1810,7 +2539,9 @@ var Uivisor = class {
       };
       this.states.set(el, {
         record,
-        original: snapshot(el, ALL_CSS),
+        // Snapshot every registry property (not just the curated set) so a generic
+        // edit's "before" value is known — the All-CSS inspector edits anything.
+        original: snapshot(el, this.snapshotProps()),
         applied: /* @__PURE__ */ new Set(),
         dimUnit: {}
       });
@@ -1819,6 +2550,10 @@ var Uivisor = class {
     this.reposition();
     this.renderBody();
   }
+  snapshotProps() {
+    if (!this._snapProps) this._snapProps = [.../* @__PURE__ */ new Set([...ALL_CSS, ...cssRegistry().byProp.keys()])];
+    return this._snapProps;
+  }
   // ---- value helpers ----
   st() {
     return this.selected ? this.states.get(this.selected) ?? null : null;
@@ -1876,8 +2611,10 @@ var Uivisor = class {
   }
   selectCurrent(css) {
     let v = this.liveVal(css).trim();
-    if (v === "normal") v = "400";
-    if (v === "bold") v = "700";
+    if (css === "font-weight") {
+      if (v === "normal") v = "400";
+      if (v === "bold") v = "700";
+    }
     return v;
   }
   // ---- apply / record / revert ----
@@ -2021,13 +2758,13 @@ var Uivisor = class {
     const el = this.selected;
     const st = this.st();
     if (!el || !st) return;
-    const sibs = this.siblingsOf(el);
+    const scope = this.activeScope();
     for (const css of cssList) {
-      for (const e of sibs) removeOverride(e, css);
-      st.applied.delete(css);
-      st.record.changes = st.record.changes.filter((c) => c.property !== css);
+      st.record.changes = st.record.changes.filter(
+        (c) => !(c.property === css && c.breakpoint === scope.name)
+      );
     }
-    this.reposition();
+    this.reapplyScope();
     this.renderBody();
   }
   commitNumeric(cssList, raw) {
@@ -2103,11 +2840,13 @@ var Uivisor = class {
         <div class="uiv-src">${escapeHtml(src)}</div>
         <span class="uiv-mech">${st.record.styling.primaryMechanism}</span>
       </div>
+      ${this.alignToolbarHtml()}
       ${this.dsIndicatorHtml()}
       ${this.breakpointBarHtml()}
       ${this.targetHtml(st)}
       ${this.controlsHtml(this.context(this.selected))}
       ${this.journalHtml()}
+      ${this.allCssHtml()}
     `;
     if (this.responsive) this.renderFrameBar();
     this.renderInfo();
@@ -2403,15 +3142,55 @@ var Uivisor = class {
     if (req === "flexgrid") return ctx.flexGrid;
     return true;
   }
+  /** Framer-style top alignment toolbar — justify (horizontal) + align (vertical)
+   *  icon buttons. Shown for flex/grid containers (where they apply). */
+  alignToolbarHtml() {
+    const el = this.selected;
+    if (!el || !this.context(el).flexGrid) return "";
+    const j = this.liveVal("justify-content").trim();
+    const a = this.liveVal("align-items").trim();
+    const g = (r) => `<svg viewBox="0 0 14 14" width="13" height="13" fill="currentColor">${r}</svg>`;
+    const JI = {
+      "flex-start": g('<rect x="1" y="3" width="2" height="8"/><rect x="4" y="3" width="2" height="8"/>'),
+      center: g('<rect x="4" y="3" width="2" height="8"/><rect x="8" y="3" width="2" height="8"/>'),
+      "flex-end": g('<rect x="8" y="3" width="2" height="8"/><rect x="11" y="3" width="2" height="8"/>'),
+      "space-between": g('<rect x="1" y="3" width="2" height="8"/><rect x="11" y="3" width="2" height="8"/>')
+    };
+    const AI = {
+      "flex-start": g('<rect x="3" y="1" width="8" height="2"/><rect x="3" y="4" width="8" height="2"/>'),
+      center: g('<rect x="3" y="4" width="8" height="2"/><rect x="3" y="8" width="8" height="2"/>'),
+      "flex-end": g('<rect x="3" y="8" width="8" height="2"/><rect x="3" y="11" width="8" height="2"/>'),
+      stretch: g('<rect x="3" y="1" width="8" height="12"/>')
+    };
+    const btn = (prop, val, icon, cur) => `<button class="uiv-tbtn${cur === val ? " on" : ""}" data-prop="${prop}" data-val="${val}" title="${prop}: ${val}">${icon}</button>`;
+    const jb = Object.entries(JI).map(([v, ic]) => btn("justify-content", v, ic, j)).join("");
+    const ab = Object.entries(AI).map(([v, ic]) => btn("align-items", v, ic, a)).join("");
+    return `<div class="uiv-toolbar"><div class="uiv-tgroup">${jb}</div><div class="uiv-tsep"></div><div class="uiv-tgroup">${ab}</div></div>`;
+  }
+  /** Figma/Framer-style nested box-model widget: MARGIN ring around a PADDING ring,
+   *  with an editable number on each of the 8 sides. Commits via the engine. */
+  boxModelHtml() {
+    const num = (css) => {
+      const n = this.liveNum(css);
+      return n == null ? "0" : String(round2(n));
+    };
+    const side = (css, pos) => `<input class="uiv-bm-i ${pos}${this.controlStateClass([css])}" data-css="${css}" value="${escapeAttr(num(css))}" title="${css}" inputmode="decimal" spellcheck="false">`;
+    const spaceTokens = this.designSystem().byCategory["spacing"] ?? [];
+    const pop = spaceTokens.length ? `<div class="uiv-bm-pop" hidden><span class="uiv-bm-poplabel">Token</span>` + spaceTokens.map((t) => `<button class="uiv-bm-chip" data-var="${escapeAttr(t.cssVar)}" title="${escapeAttr(t.value)}">${escapeHtml(t.name)} \xB7 ${escapeHtml(t.value)}</button>`).join("") + `</div>` : "";
+    return `<div class="uiv-bm"><span class="uiv-bm-tag">MARGIN</span>` + side("margin-top", "bm-top") + side("margin-right", "bm-right") + side("margin-bottom", "bm-bottom") + side("margin-left", "bm-left") + `<div class="uiv-bm-pad"><span class="uiv-bm-tag">PADDING</span>` + side("padding-top", "bm-top") + side("padding-right", "bm-right") + side("padding-bottom", "bm-bottom") + side("padding-left", "bm-left") + `<div class="uiv-bm-content"></div></div></div>` + pop;
+  }
   controlsHtml(ctx) {
     const legend = `<div class="uiv-leg"><span class="uiv-lg">file</span><span class="uiv-lg edit">edited</span><span class="uiv-lg inh">inherited</span><span class="uiv-lg auto">auto</span></div>`;
     const secs = SECTIONS.map((sec) => {
       const controls = sec.controls.filter((c) => this.relevant(c, ctx));
       if (!controls.length) return "";
       if (this.collapsedSecs.has(sec.title)) return `<div class="uiv-sec">${this.accordionTitle(sec.title)}</div>`;
+      const isSpacing = sec.title === "Spacing";
+      const widget = isSpacing ? this.boxModelHtml() : "";
       const rows = [];
       const adds = [];
       for (const c of controls) {
+        if (isSpacing && c.kind === "box" && (c.key === "padding" || c.key === "margin")) continue;
         const css = c.css;
         if (c.kind === "len" && c.hideWhenAuto && css && !this.revealedCtls.has(css) && this.controlState([css]) === "auto") {
           adds.push(`<button class="uiv-addctl" data-css="${css}">+ ${escapeHtml(c.label)}</button>`);
@@ -2420,7 +3199,7 @@ var Uivisor = class {
         }
       }
       const addRow = adds.length ? `<div class="uiv-adds">${adds.join("")}</div>` : "";
-      return `<div class="uiv-sec">${this.accordionTitle(sec.title)}${rows.join("")}${addRow}</div>`;
+      return `<div class="uiv-sec">${this.accordionTitle(sec.title)}${widget}${rows.join("")}${addRow}</div>`;
     }).join("");
     return legend + secs;
   }
@@ -2566,8 +3345,285 @@ var Uivisor = class {
     const val = toHexInput(this.liveVal(c.css));
     return `<div class="uiv-ctl${this.controlStateClass([c.css])}">${this.ctlLabel(c.label, [c.css])}<div class="cfield"><input type="color" class="uiv-color${this.isChanged([c.css]) ? " changed" : ""}" data-css="${c.css}" value="${val}"></div><span></span></div>` + this.tokenRowHtml(c.css, "Token");
   }
+  curatedCssProps() {
+    if (this._curatedProps) return this._curatedProps;
+    const set = /* @__PURE__ */ new Set();
+    for (const sec of SECTIONS)
+      for (const c of sec.controls) {
+        if (c.kind === "box") c.sides.forEach((s) => set.add(s.css));
+        else set.add(c.css || "");
+      }
+    set.delete("");
+    this._curatedProps = set;
+    return set;
+  }
+  /**
+   * Search box + categorised accordions. By default each category shows only the
+   * COMMON properties (Framer/Webflow-style — no logical/vendor/rare noise), box
+   * groups as a 4-sided editor; "+ N more" reveals the long tail and search reaches
+   * literally everything. Additive: the curated sections above are untouched.
+   */
+  allCssHtml() {
+    const reg = cssRegistry();
+    const curated = this.curatedCssProps();
+    const q = this.cssSearch.trim().toLowerCase();
+    const search = `<div class="uiv-sec"><div class="uiv-sectitle">All CSS</div><input class="uiv-csssearch" placeholder="Search any of ${reg.byProp.size} properties\u2026" value="${escapeAttr(this.cssSearch)}" spellcheck="false"></div>`;
+    if (q) {
+      const hits = [...reg.byProp.values()].filter((m) => m.property.includes(q)).sort((a, b) => a.property.localeCompare(b.property));
+      const rows = hits.slice(0, 60).map((m) => this.genericRow(m)).join("");
+      const more = hits.length > 60 ? `<div class="uiv-bphint">+${hits.length - 60} more \u2014 refine the search</div>` : "";
+      return search + `<div class="uiv-sec"><div class="uiv-sectitle">Results (${hits.length})</div>` + (rows || '<div class="uiv-empty">No property matches.</div>') + more + `</div>`;
+    }
+    const cats = reg.categories.map((c) => {
+      const avail = c.props.filter((p) => !curated.has(p));
+      if (!avail.length) return "";
+      const common = avail.filter((p) => reg.byProp.get(p).common);
+      const open = this.expandedCats.has(c.name);
+      const head = `<button class="uiv-sectitle uiv-catacc${open ? "" : " collapsed"}" data-cat="${escapeAttr(c.name)}"><span class="uiv-chev">${ICONS.chevron}</span>${c.name} <span class="uiv-catn">${common.length}</span></button>`;
+      let body = "";
+      if (open) {
+        const showAll = this.showAllCats.has(c.name);
+        body = this.renderCommonControls(showAll ? avail : common);
+        if (!showAll && avail.length > common.length)
+          body += `<button class="uiv-showall" data-cat="${escapeAttr(c.name)}">+ ${avail.length - common.length} more</button>`;
+      }
+      return `<div class="uiv-sec">${head}${body}</div>`;
+    }).filter(Boolean).join("");
+    return search + cats;
+  }
+  /** Render a property list: box-groups (inset etc.) as a 4-sided editor, the rest
+   *  as smart inputs. Reuses the tested box control + the generic field. */
+  renderCommonControls(props) {
+    const reg = cssRegistry();
+    const boxGroups = {};
+    const singles = [];
+    for (const p of props) {
+      const m = reg.byProp.get(p);
+      if (m.box && BOX_SIDES[m.box] && !m.shorthand) boxGroups[m.box] = true;
+      else singles.push(p);
+    }
+    let html = "";
+    for (const g of Object.keys(boxGroups)) html += this.boxGroupControl(g);
+    for (const p of singles) html += this.genericRow(reg.byProp.get(p));
+    return html;
+  }
+  /** A 4-sided box editor for a box group (inset/padding/…), via the curated control. */
+  boxGroupControl(group) {
+    const sides = BOX_SIDES[group];
+    if (!sides) return "";
+    const icon = group === "radius" ? ICONS.radius : group === "border-width" ? ICONS.border : group === "margin" ? ICONS.margin : group === "inset" ? ICONS.margin : ICONS.padding;
+    const label = { inset: "Inset", padding: "Padding", margin: "Margin", radius: "Radius", "border-width": "Border" }[group] || group;
+    return this.controlRow({ kind: "box", key: `g-${group}`, label, icon, sides });
+  }
+  genericRow(m) {
+    const prop = m.property;
+    return `<div class="uiv-ctl uiv-gctl${this.controlStateClass([prop])}"><span class="clabel uiv-gplabel" title="${escapeAttr(prop)}">${escapeHtml(prop)}</span><div class="cfield">${this.genericField(m)}</div></div>`;
+  }
+  /** Smart input for one property, by its registry type. Commits via the engine. */
+  genericField(m) {
+    const prop = m.property;
+    const cur = this.liveVal(prop);
+    const da = `data-gprop="${escapeAttr(prop)}"`;
+    if (m.type === "enum" && m.keywords && m.keywords.length) {
+      const c = cur.trim();
+      const list = c && !m.keywords.includes(c) ? [c, ...m.keywords] : m.keywords;
+      const opts = list.map((k) => `<option value="${escapeAttr(k)}"${k === c ? " selected" : ""}>${escapeHtml(k)}</option>`).join("");
+      return `<select class="uiv-gsel" ${da}>${opts}</select>`;
+    }
+    if (m.type === "color") {
+      return `<div class="uiv-gcolorwrap"><input type="color" class="uiv-gcolor" ${da} value="${toHexInput(cur)}"><input type="text" class="uiv-gtext uiv-gtextc" ${da} value="${escapeAttr(cur)}" placeholder="\u2014" spellcheck="false"></div>`;
+    }
+    const complex = (m.type === "shorthand" || m.shorthand || /^grid-template/.test(prop)) && !this.isChanged([prop]);
+    const val = complex ? "" : cur;
+    const ph = complex && cur ? escapeAttr(cur) : "\u2014";
+    const numeric = m.type === "length" || m.type === "number" || m.type === "integer" || m.type === "percentage" || m.type === "time" || m.type === "angle";
+    if (numeric) {
+      return `<div class="uiv-gnum"><span class="uiv-scrub uiv-gscrub" ${da} title="Drag to change">${ICONS.size}</span><input type="text" class="uiv-gtext" ${da} value="${escapeAttr(val)}" placeholder="${ph}" spellcheck="false"></div>`;
+    }
+    return `<input type="text" class="uiv-gtext uiv-gtextonly" ${da} value="${escapeAttr(val)}" placeholder="${ph}" spellcheck="false">`;
+  }
+  /** Bind the "All CSS" search, category toggles and generic inputs. */
+  bindGeneric() {
+    const root = this.root;
+    const search = root.querySelector(".uiv-csssearch");
+    if (search) {
+      search.addEventListener("input", () => {
+        const pos = search.selectionStart ?? search.value.length;
+        this.cssSearch = search.value;
+        this.renderBody();
+        const s2 = this.root.querySelector(".uiv-csssearch");
+        if (s2) {
+          s2.focus();
+          s2.setSelectionRange(pos, pos);
+        }
+      });
+    }
+    root.querySelectorAll(".uiv-catacc").forEach((node) => {
+      const btn = node;
+      const cat = btn.getAttribute("data-cat");
+      btn.addEventListener("click", () => {
+        if (this.expandedCats.has(cat)) this.expandedCats.delete(cat);
+        else this.expandedCats.add(cat);
+        this.renderBody();
+      });
+    });
+    root.querySelectorAll(".uiv-showall").forEach((node) => {
+      const btn = node;
+      const cat = btn.getAttribute("data-cat");
+      btn.addEventListener("click", () => {
+        this.showAllCats.add(cat);
+        this.renderBody();
+      });
+    });
+    const commit = (prop, value) => {
+      this.pushHistory();
+      this.commitValue([prop], value, true);
+    };
+    root.querySelectorAll(".uiv-gsel").forEach((node) => {
+      const sel = node;
+      sel.addEventListener("change", () => commit(sel.getAttribute("data-gprop"), sel.value));
+    });
+    root.querySelectorAll(".uiv-gcolor").forEach((node) => {
+      const inp = node;
+      const prop = inp.getAttribute("data-gprop");
+      inp.addEventListener("change", () => {
+        if (inp.value.toLowerCase() === toHexInput(this.liveVal(prop)).toLowerCase()) return;
+        commit(prop, inp.value);
+      });
+    });
+    root.querySelectorAll(".uiv-gtext").forEach((node) => {
+      const inp = node;
+      inp.addEventListener("change", () => commit(inp.getAttribute("data-gprop"), inp.value));
+      inp.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") inp.blur();
+      });
+    });
+    root.querySelectorAll(".uiv-gscrub").forEach((node) => {
+      const handle = node;
+      const prop = handle.getAttribute("data-gprop");
+      const input = handle.parentElement.querySelector("input");
+      this.bindGenericScrub(handle, input, prop);
+    });
+  }
+  /** Default unit for a numeric property when the current value carries none —
+   *  from the registry type, so a unitless number never gets a bogus "px". */
+  defaultUnit(prop) {
+    const t = cssMeta(prop)?.type;
+    if (t === "number" || t === "integer") return "";
+    if (t === "time") return "s";
+    if (t === "angle") return "deg";
+    if (t === "percentage") return "%";
+    return "px";
+  }
+  bindGenericScrub(handle, input, prop) {
+    handle.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const m = /^(-?\d*\.?\d+)(\D*)$/.exec(input.value.trim());
+      const start2 = m ? parseFloat(m[1]) : 0;
+      const unit = m && m[2] ? m[2] : this.defaultUnit(prop);
+      const unitless = unit === "";
+      const step = unitless ? cssMeta(prop)?.type === "integer" ? 1 : 0.01 : 1;
+      let pushed = false;
+      try {
+        handle.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      const move = (ev) => {
+        if (!pushed) {
+          this.pushHistory();
+          pushed = true;
+        }
+        let nv = start2 + Math.round(ev.clientX - startX) * step;
+        if (ev.shiftKey) nv = Math.round(nv / (10 * step)) * 10 * step;
+        nv = +nv.toFixed(unitless && step < 1 ? 2 : 0);
+        input.value = `${nv}${unit}`;
+        this.liveSet([prop], input.value);
+      };
+      const up = () => {
+        handle.removeEventListener("pointermove", move);
+        handle.removeEventListener("pointerup", up);
+        this.recordProps([prop]);
+      };
+      handle.addEventListener("pointermove", move);
+      handle.addEventListener("pointerup", up);
+    });
+  }
   bindControls() {
     const root = this.root;
+    this.bindGeneric();
+    root.querySelectorAll(".uiv-tbtn").forEach((node) => {
+      const btn = node;
+      const prop = btn.getAttribute("data-prop");
+      const val = btn.getAttribute("data-val");
+      btn.addEventListener("click", () => {
+        this.pushHistory();
+        this.commitValue([prop], val);
+      });
+    });
+    const bmPop = root.querySelector(".uiv-bm-pop");
+    const bmPopLabel = bmPop?.querySelector(".uiv-bm-poplabel");
+    root.querySelectorAll(".uiv-bm-i").forEach((node) => {
+      const inp = node;
+      const css = inp.getAttribute("data-css");
+      inp.addEventListener("focus", () => {
+        this.lastBmSide = css;
+        if (bmPop) {
+          bmPop.hidden = false;
+          if (bmPopLabel) bmPopLabel.textContent = `${css} \u2192`;
+        }
+      });
+      inp.addEventListener("blur", () => {
+        window.setTimeout(() => {
+          if (bmPop) bmPop.hidden = true;
+        }, 140);
+      });
+      inp.addEventListener("change", () => {
+        this.pushHistory();
+        this.commitNumeric([css], inp.value);
+      });
+      inp.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") inp.blur();
+      });
+      inp.addEventListener("pointerdown", (e) => {
+        const startX = e.clientX;
+        const startVal = parseFloat(inp.value) || 0;
+        let moved = false;
+        let pushed = false;
+        const move = (ev) => {
+          if (!moved && Math.abs(ev.clientX - startX) < 3) return;
+          if (!moved) {
+            moved = true;
+            inp.blur();
+          }
+          if (!pushed) {
+            this.pushHistory();
+            pushed = true;
+          }
+          let nv = startVal + Math.round(ev.clientX - startX);
+          if (ev.shiftKey) nv = Math.round(nv / 10) * 10;
+          nv = Math.max(0, nv);
+          inp.value = String(nv);
+          this.liveSet([css], `${nv}px`);
+        };
+        const up = () => {
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerup", up);
+          if (moved) this.recordProps([css]);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+      });
+    });
+    root.querySelectorAll(".uiv-bm-chip").forEach((node) => {
+      const btn = node;
+      const cssVar = btn.getAttribute("data-var");
+      btn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        const token = this.designSystem().tokens.find((t) => t.cssVar === cssVar);
+        if (token) this.applyToken(this.lastBmSide, token);
+      });
+    });
     root.querySelectorAll(".uiv-num:not(.uiv-dim)").forEach((node) => {
       const box = node;
       const cssList = (box.getAttribute("data-css") || "").split(",").filter(Boolean);
@@ -2602,6 +3658,7 @@ var Uivisor = class {
       const input = node;
       const css = input.getAttribute("data-css");
       input.addEventListener("change", () => {
+        if (input.value.toLowerCase() === toHexInput(this.liveVal(css)).toLowerCase()) return;
         this.pushHistory();
         this.commitValue([css], input.value);
       });
@@ -2955,7 +4012,7 @@ function escapeHtml(s) {
   return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
 }
 function escapeAttr(s) {
-  return s.replace(/"/g, "&quot;");
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
 }
 function cssAttrEscape(s) {
   return s.replace(/["\\]/g, "\\$&");