@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/utils/style-field-search.js

@@ -0,0 +1,505 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+/**
+ * What authors call these things when they are not reading a CSS spec.
+ *
+ * Keyed by the panel's own field name so a field added later is findable by
+ * its label and property name with no entry here at all — this list only ever
+ * ADDS reach, it is never the thing that makes search work.
+ */ export const STYLE_FIELD_KEYWORDS = {
+    // Colors
+    color: [
+        'colour',
+        'text colour',
+        'font colour',
+        'type colour',
+        'ink'
+    ],
+    backgroundColor: [
+        'colour',
+        'fill',
+        'background',
+        'bg',
+        'behind',
+        'panel colour'
+    ],
+    backgroundImage: [
+        'gradient',
+        'fill',
+        'background',
+        'image',
+        'fade',
+        'ramp',
+        'photo'
+    ],
+    // Sizing
+    width: [
+        'size',
+        'wide',
+        'how wide'
+    ],
+    height: [
+        'size',
+        'tall',
+        'how tall'
+    ],
+    minWidth: [
+        'size',
+        'narrowest',
+        'at least wide'
+    ],
+    maxWidth: [
+        'size',
+        'widest',
+        'cap width',
+        'no wider than'
+    ],
+    minHeight: [
+        'size',
+        'shortest',
+        'at least tall'
+    ],
+    maxHeight: [
+        'size',
+        'tallest',
+        'no taller than'
+    ],
+    // Typography
+    fontSize: [
+        'text size',
+        'type size',
+        'bigger text',
+        'smaller text',
+        'scale'
+    ],
+    fontWeight: [
+        'bold',
+        'boldness',
+        'thickness',
+        'weight',
+        'light',
+        'heavy'
+    ],
+    fontFamily: [
+        'typeface',
+        'font',
+        'typography'
+    ],
+    lineHeight: [
+        'leading',
+        'line spacing',
+        'space between lines'
+    ],
+    letterSpacing: [
+        'tracking',
+        'kerning',
+        'space between letters'
+    ],
+    textTransform: [
+        'uppercase',
+        'caps',
+        'all caps',
+        'lowercase',
+        'capitalise'
+    ],
+    textDecoration: [
+        'underline',
+        'strikethrough',
+        'strike through',
+        'overline'
+    ],
+    // Borders & shadows
+    border: [
+        'outline',
+        'stroke',
+        'edge',
+        'line',
+        'rule',
+        'frame'
+    ],
+    borderColor: [
+        'colour',
+        'outline colour',
+        'stroke colour',
+        'edge colour'
+    ],
+    borderTop: [
+        'line above',
+        'rule above',
+        'edge',
+        'divider'
+    ],
+    borderRight: [
+        'line right',
+        'edge',
+        'divider'
+    ],
+    borderBottom: [
+        'line below',
+        'rule below',
+        'underline bar',
+        'divider'
+    ],
+    borderLeft: [
+        'line left',
+        'accent rail',
+        'edge',
+        'divider'
+    ],
+    borderRadius: [
+        'rounded',
+        'rounding',
+        'round corners',
+        'corner',
+        'corners',
+        'curve',
+        'radius',
+        'pill'
+    ],
+    outline: [
+        'focus ring',
+        'ring',
+        'stroke'
+    ],
+    boxShadow: [
+        'shadow',
+        'drop shadow',
+        'elevation',
+        'depth',
+        'lift',
+        'glow'
+    ],
+    // Position & overflow
+    position: [
+        'sticky',
+        'fixed',
+        'absolute',
+        'pin',
+        'float above'
+    ],
+    top: [
+        'offset',
+        'from the top'
+    ],
+    right: [
+        'offset',
+        'from the right'
+    ],
+    bottom: [
+        'offset',
+        'from the bottom'
+    ],
+    left: [
+        'offset',
+        'from the left'
+    ],
+    zIndex: [
+        'stacking',
+        'layer',
+        'on top',
+        'in front',
+        'behind',
+        'z order'
+    ],
+    overflow: [
+        'scroll',
+        'clip',
+        'cut off',
+        'hidden',
+        'spill'
+    ],
+    opacity: [
+        'transparency',
+        'transparent',
+        'see through',
+        'fade',
+        'alpha',
+        'ghost'
+    ],
+    cursor: [
+        'pointer',
+        'hand',
+        'mouse'
+    ],
+    // Layout
+    display: [
+        'block',
+        'inline',
+        'flex',
+        'grid',
+        'hide',
+        'layout'
+    ],
+    float: [
+        'wrap text',
+        'align left',
+        'align right'
+    ],
+    // Flexbox & grid
+    gap: [
+        'spacing',
+        'gutter',
+        'space between',
+        'breathing room'
+    ],
+    rowGap: [
+        'spacing',
+        'gutter',
+        'space between rows'
+    ],
+    columnGap: [
+        'spacing',
+        'gutter',
+        'space between columns'
+    ],
+    gridTemplateColumns: [
+        'columns',
+        'grid',
+        'tracks',
+        'how many columns'
+    ],
+    gridTemplateRows: [
+        'rows',
+        'grid',
+        'tracks'
+    ],
+    gridAutoFlow: [
+        'grid',
+        'flow',
+        'fill order'
+    ],
+    gridColumn: [
+        'span',
+        'columns',
+        'placement'
+    ],
+    gridRow: [
+        'span',
+        'rows',
+        'placement'
+    ],
+    flexGrow: [
+        'grow',
+        'fill space',
+        'stretch'
+    ],
+    flexShrink: [
+        'shrink',
+        'squeeze'
+    ],
+    flexBasis: [
+        'starting size',
+        'base size'
+    ],
+    order: [
+        'reorder',
+        'move first',
+        'move last',
+        'sequence'
+    ],
+    flexDirection: [
+        'row',
+        'column',
+        'direction',
+        'stack',
+        'side by side'
+    ],
+    flexWrap: [
+        'wrap',
+        'no wrap',
+        'onto a new line'
+    ],
+    justifyContent: [
+        'spacing',
+        'centre',
+        'center',
+        'spread',
+        'distribute'
+    ],
+    alignItems: [
+        'centre',
+        'center',
+        'middle',
+        'top',
+        'bottom',
+        'align'
+    ],
+    alignContent: [
+        'centre',
+        'center',
+        'distribute',
+        'align rows'
+    ],
+    justifyItems: [
+        'centre',
+        'center',
+        'align'
+    ],
+    alignSelf: [
+        'centre',
+        'center',
+        'this one only',
+        'align myself'
+    ],
+    justifySelf: [
+        'centre',
+        'center',
+        'this one only',
+        'align myself'
+    ]
+};
+/** Sections and controls that are not schema fields but must still be found. */ export const STYLE_SECTION_ENTRIES = {
+    box: {
+        name: 'box',
+        label: 'Margin & padding',
+        keywords: [
+            'margin',
+            'padding',
+            'spacing',
+            'space',
+            'inset',
+            'gutter',
+            'inner space',
+            'outer space',
+            'room',
+            'indent'
+        ]
+    },
+    textAlign: {
+        name: 'textAlign',
+        label: 'Text Alignment',
+        keywords: [
+            'align',
+            'alignment',
+            'centre',
+            'center',
+            'left',
+            'right',
+            'justify',
+            'ragged'
+        ]
+    },
+    visibility: {
+        name: 'visibility',
+        label: 'Visibility',
+        keywords: [
+            'hide',
+            'hidden',
+            'show',
+            'responsive',
+            'mobile',
+            'tablet',
+            'desktop',
+            'hide on mobile',
+            'device',
+            'breakpoint'
+        ]
+    },
+    classes: {
+        name: 'classes',
+        label: 'Classes & custom CSS',
+        keywords: [
+            'class',
+            'classes',
+            'css',
+            'custom css',
+            'sx',
+            'raw css',
+            'stylesheet',
+            'advanced'
+        ]
+    }
+};
+/** Normalizes a label or query for matching: lowercase, single-spaced. */ function normalize(text) {
+    return `${text != null ? text : ''}`.toLowerCase().replace(/[_-]+/g, ' ').replace(/\s+/g, ' ').trim();
+}
+/** `borderRadius` → `border radius`, so a two-word query hits a camel name. */ function humanizeName(name) {
+    return normalize(name.replace(/([a-z0-9])([A-Z])/g, '$1 $2'));
+}
+/** Score of one query TERM against one haystack, 0 when it does not match. */ function scoreTerm(haystack, term, weight) {
+    if (!haystack || !term) return 0;
+    if (haystack === term) return weight * 4;
+    if (haystack.startsWith(term)) return weight * 3;
+    // A hit at a word boundary ("radius" in "corner radius") is a real name
+    // match; one mid-word ("us" in "radius") is barely evidence of anything.
+    if (haystack.includes(` ${term}`)) return weight * 2;
+    if (haystack.includes(term)) return weight;
+    return 0;
+}
+/**
+ * How well one entry answers a query, or 0 when it does not.
+ *
+ * Every term must land somewhere — `border color` must not return every
+ * border field AND every colour field — and the entry's own name and label
+ * are weighted far above its aliases, so searching `color` puts Text Color
+ * ahead of Border (which merely lists "edge colour" among its words).
+ */ export function scoreStyleEntry(entry, query) {
+    var _ref, _entry_keywords;
+    const terms = normalize(query).split(' ').filter(Boolean);
+    if (!terms.length) return 0;
+    const label = normalize(entry.label);
+    const name = humanizeName(entry.name);
+    // The same two with their separators gone, because `zindex`, `zIndex` and
+    // `z-index` are one word to the person typing them and three to a matcher
+    // that only ever sees `z index`.
+    const compact = [
+        label,
+        name
+    ].map((text)=>text.replace(/ /g, ''));
+    const keywords = ((_ref = (_entry_keywords = entry.keywords) != null ? _entry_keywords : STYLE_FIELD_KEYWORDS[entry.name]) != null ? _ref : []).map(normalize);
+    let total = 0;
+    for (const term of terms){
+        const best = Math.max(scoreTerm(label, term, 10), scoreTerm(name, term, 8), ...compact.map((text)=>scoreTerm(text, term, 7)), ...keywords.map((keyword)=>scoreTerm(keyword, term, 3)));
+        // One unmatched term disqualifies the entry: a query is a conjunction.
+        if (best <= 0) return 0;
+        total += best;
+    }
+    return total;
+}
+/** Whether an entry answers the query (an empty query matches everything). */ export function matchesStyleQuery(entry, query) {
+    if (!normalize(query)) return true;
+    return scoreStyleEntry(entry, query) > 0;
+}
+/** The search entry for one schema field of a style group. */ export function styleFieldEntry(field) {
+    var _field_label, _field_keywords;
+    return {
+        name: field.name,
+        label: `${(_field_label = field.label) != null ? _field_label : field.name}`,
+        keywords: (_field_keywords = field.keywords) != null ? _field_keywords : STYLE_FIELD_KEYWORDS[field.name]
+    };
+}
+/**
+ * A group holding only the fields that answer the query, best match first,
+ * or `undefined` when none of them do — which is what lets the panel drop
+ * the whole accordion instead of showing an empty one.
+ *
+ * An empty query returns the group unchanged, by identity, so the ordinary
+ * (not-searching) render allocates nothing and the field order authors have
+ * learned is untouched.
+ */ export function filterStyleGroup(group, query) {
+    if (!normalize(query)) return group;
+    const ranked = group.fields.map((field)=>({
+            field,
+            score: scoreStyleEntry(styleFieldEntry(field), query)
+        })).filter((entry)=>entry.score > 0).sort((a, b)=>b.score - a.score);
+    if (!ranked.length) return undefined;
+    return _extends({}, group, {
+        fields: ranked.map((entry)=>entry.field)
+    });
+}
+
+//# sourceMappingURL=style-field-search.js.map

package/src/lib/utils/style-field-search.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/style-field-search.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { StyleFieldGroup } from './style-field-groups'\n\n/**\n * Searching the styles panel (AGL-2486, item 13).\n *\n * The panel is seven accordions deep — Colors, Sizing, Typography, Borders &\n * Shadows, Position & Overflow, Flexbox & Grid, Classes & custom CSS — plus\n * the box stylers, the alignment toggles and the visibility switches. Finding\n * one property means remembering which section its author put it in.\n *\n * The part that makes this useful rather than decorative is the SECOND index:\n * matching the CSS property name alone would only help someone who already\n * knows CSS, and they are not the people this product is for. So every field\n * also carries the words a non-developer reaches for — `rounded` finds Corner\n * Radius, `shadow` finds the box-shadow control, `see through` finds Opacity,\n * `bold` finds Font Weight — and both spellings of colour are indexed because\n * half of Aglyn's authors type the other one.\n *\n * Ranking is deliberately simple and deterministic: an exact or prefix hit on\n * what the field is CALLED outranks a hit on one of its aliases, which\n * outranks a substring anywhere. Every term of a multi-word query has to\n * match something, so `border color` narrows instead of widening.\n */\n\n/** Something the panel can find: a field, a control, or a whole section. */\nexport interface StyleSearchEntry {\n  /** Stable id — a style property name, or a section key. */\n  name: string\n  /** What the panel calls it on screen. */\n  label: string\n  /** The words an author might use for it instead. */\n  keywords?: readonly string[]\n}\n\n/**\n * What authors call these things when they are not reading a CSS spec.\n *\n * Keyed by the panel's own field name so a field added later is findable by\n * its label and property name with no entry here at all — this list only ever\n * ADDS reach, it is never the thing that makes search work.\n */\nexport const STYLE_FIELD_KEYWORDS: Record<string, readonly string[]> = {\n  // Colors\n  color: ['colour', 'text colour', 'font colour', 'type colour', 'ink'],\n  backgroundColor: [\n    'colour',\n    'fill',\n    'background',\n    'bg',\n    'behind',\n    'panel colour',\n  ],\n  backgroundImage: [\n    'gradient',\n    'fill',\n    'background',\n    'image',\n    'fade',\n    'ramp',\n    'photo',\n  ],\n  // Sizing\n  width: ['size', 'wide', 'how wide'],\n  height: ['size', 'tall', 'how tall'],\n  minWidth: ['size', 'narrowest', 'at least wide'],\n  maxWidth: ['size', 'widest', 'cap width', 'no wider than'],\n  minHeight: ['size', 'shortest', 'at least tall'],\n  maxHeight: ['size', 'tallest', 'no taller than'],\n  // Typography\n  fontSize: ['text size', 'type size', 'bigger text', 'smaller text', 'scale'],\n  fontWeight: ['bold', 'boldness', 'thickness', 'weight', 'light', 'heavy'],\n  fontFamily: ['typeface', 'font', 'typography'],\n  lineHeight: ['leading', 'line spacing', 'space between lines'],\n  letterSpacing: ['tracking', 'kerning', 'space between letters'],\n  textTransform: ['uppercase', 'caps', 'all caps', 'lowercase', 'capitalise'],\n  textDecoration: ['underline', 'strikethrough', 'strike through', 'overline'],\n  // Borders & shadows\n  border: ['outline', 'stroke', 'edge', 'line', 'rule', 'frame'],\n  borderColor: ['colour', 'outline colour', 'stroke colour', 'edge colour'],\n  borderTop: ['line above', 'rule above', 'edge', 'divider'],\n  borderRight: ['line right', 'edge', 'divider'],\n  borderBottom: ['line below', 'rule below', 'underline bar', 'divider'],\n  borderLeft: ['line left', 'accent rail', 'edge', 'divider'],\n  borderRadius: [\n    'rounded',\n    'rounding',\n    'round corners',\n    'corner',\n    'corners',\n    'curve',\n    'radius',\n    'pill',\n  ],\n  outline: ['focus ring', 'ring', 'stroke'],\n  boxShadow: ['shadow', 'drop shadow', 'elevation', 'depth', 'lift', 'glow'],\n  // Position & overflow\n  position: ['sticky', 'fixed', 'absolute', 'pin', 'float above'],\n  top: ['offset', 'from the top'],\n  right: ['offset', 'from the right'],\n  bottom: ['offset', 'from the bottom'],\n  left: ['offset', 'from the left'],\n  zIndex: ['stacking', 'layer', 'on top', 'in front', 'behind', 'z order'],\n  overflow: ['scroll', 'clip', 'cut off', 'hidden', 'spill'],\n  opacity: [\n    'transparency',\n    'transparent',\n    'see through',\n    'fade',\n    'alpha',\n    'ghost',\n  ],\n  cursor: ['pointer', 'hand', 'mouse'],\n  // Layout\n  display: ['block', 'inline', 'flex', 'grid', 'hide', 'layout'],\n  float: ['wrap text', 'align left', 'align right'],\n  // Flexbox & grid\n  gap: ['spacing', 'gutter', 'space between', 'breathing room'],\n  rowGap: ['spacing', 'gutter', 'space between rows'],\n  columnGap: ['spacing', 'gutter', 'space between columns'],\n  gridTemplateColumns: ['columns', 'grid', 'tracks', 'how many columns'],\n  gridTemplateRows: ['rows', 'grid', 'tracks'],\n  gridAutoFlow: ['grid', 'flow', 'fill order'],\n  gridColumn: ['span', 'columns', 'placement'],\n  gridRow: ['span', 'rows', 'placement'],\n  flexGrow: ['grow', 'fill space', 'stretch'],\n  flexShrink: ['shrink', 'squeeze'],\n  flexBasis: ['starting size', 'base size'],\n  order: ['reorder', 'move first', 'move last', 'sequence'],\n  flexDirection: ['row', 'column', 'direction', 'stack', 'side by side'],\n  flexWrap: ['wrap', 'no wrap', 'onto a new line'],\n  justifyContent: ['spacing', 'centre', 'center', 'spread', 'distribute'],\n  alignItems: ['centre', 'center', 'middle', 'top', 'bottom', 'align'],\n  alignContent: ['centre', 'center', 'distribute', 'align rows'],\n  justifyItems: ['centre', 'center', 'align'],\n  alignSelf: ['centre', 'center', 'this one only', 'align myself'],\n  justifySelf: ['centre', 'center', 'this one only', 'align myself'],\n}\n\n/** Sections and controls that are not schema fields but must still be found. */\nexport const STYLE_SECTION_ENTRIES: Record<string, StyleSearchEntry> = {\n  box: {\n    name: 'box',\n    label: 'Margin & padding',\n    keywords: [\n      'margin',\n      'padding',\n      'spacing',\n      'space',\n      'inset',\n      'gutter',\n      'inner space',\n      'outer space',\n      'room',\n      'indent',\n    ],\n  },\n  textAlign: {\n    name: 'textAlign',\n    label: 'Text Alignment',\n    keywords: [\n      'align',\n      'alignment',\n      'centre',\n      'center',\n      'left',\n      'right',\n      'justify',\n      'ragged',\n    ],\n  },\n  visibility: {\n    name: 'visibility',\n    label: 'Visibility',\n    keywords: [\n      'hide',\n      'hidden',\n      'show',\n      'responsive',\n      'mobile',\n      'tablet',\n      'desktop',\n      'hide on mobile',\n      'device',\n      'breakpoint',\n    ],\n  },\n  classes: {\n    name: 'classes',\n    label: 'Classes & custom CSS',\n    keywords: [\n      'class',\n      'classes',\n      'css',\n      'custom css',\n      'sx',\n      'raw css',\n      'stylesheet',\n      'advanced',\n    ],\n  },\n}\n\n/** Normalizes a label or query for matching: lowercase, single-spaced. */\nfunction normalize(text: unknown): string {\n  return `${text ?? ''}`\n    .toLowerCase()\n    .replace(/[_-]+/g, ' ')\n    .replace(/\\s+/g, ' ')\n    .trim()\n}\n\n/** `borderRadius` → `border radius`, so a two-word query hits a camel name. */\nfunction humanizeName(name: string): string {\n  return normalize(name.replace(/([a-z0-9])([A-Z])/g, '$1 $2'))\n}\n\n/** Score of one query TERM against one haystack, 0 when it does not match. */\nfunction scoreTerm(haystack: string, term: string, weight: number): number {\n  if (!haystack || !term) return 0\n  if (haystack === term) return weight * 4\n  if (haystack.startsWith(term)) return weight * 3\n  // A hit at a word boundary (\"radius\" in \"corner radius\") is a real name\n  // match; one mid-word (\"us\" in \"radius\") is barely evidence of anything.\n  if (haystack.includes(` ${term}`)) return weight * 2\n  if (haystack.includes(term)) return weight\n  return 0\n}\n\n/**\n * How well one entry answers a query, or 0 when it does not.\n *\n * Every term must land somewhere — `border color` must not return every\n * border field AND every colour field — and the entry's own name and label\n * are weighted far above its aliases, so searching `color` puts Text Color\n * ahead of Border (which merely lists \"edge colour\" among its words).\n */\nexport function scoreStyleEntry(\n  entry: StyleSearchEntry,\n  query: string,\n): number {\n  const terms = normalize(query).split(' ').filter(Boolean)\n  if (!terms.length) return 0\n  const label = normalize(entry.label)\n  const name = humanizeName(entry.name)\n  // The same two with their separators gone, because `zindex`, `zIndex` and\n  // `z-index` are one word to the person typing them and three to a matcher\n  // that only ever sees `z index`.\n  const compact = [label, name].map((text) => text.replace(/ /g, ''))\n  const keywords = (\n    entry.keywords ??\n    STYLE_FIELD_KEYWORDS[entry.name] ??\n    []\n  ).map(normalize)\n  let total = 0\n  for (const term of terms) {\n    const best = Math.max(\n      scoreTerm(label, term, 10),\n      scoreTerm(name, term, 8),\n      ...compact.map((text) => scoreTerm(text, term, 7)),\n      ...keywords.map((keyword) => scoreTerm(keyword, term, 3)),\n    )\n    // One unmatched term disqualifies the entry: a query is a conjunction.\n    if (best <= 0) return 0\n    total += best\n  }\n  return total\n}\n\n/** Whether an entry answers the query (an empty query matches everything). */\nexport function matchesStyleQuery(\n  entry: StyleSearchEntry,\n  query: string,\n): boolean {\n  if (!normalize(query)) return true\n  return scoreStyleEntry(entry, query) > 0\n}\n\n/** The search entry for one schema field of a style group. */\nexport function styleFieldEntry(field: {\n  name: string\n  label?: unknown\n  keywords?: readonly string[]\n}): StyleSearchEntry {\n  return {\n    name: field.name,\n    label: `${field.label ?? field.name}`,\n    keywords: field.keywords ?? STYLE_FIELD_KEYWORDS[field.name],\n  }\n}\n\n/**\n * A group holding only the fields that answer the query, best match first,\n * or `undefined` when none of them do — which is what lets the panel drop\n * the whole accordion instead of showing an empty one.\n *\n * An empty query returns the group unchanged, by identity, so the ordinary\n * (not-searching) render allocates nothing and the field order authors have\n * learned is untouched.\n */\nexport function filterStyleGroup(\n  group: StyleFieldGroup,\n  query: string,\n): StyleFieldGroup | undefined {\n  if (!normalize(query)) return group\n  const ranked = group.fields\n    .map((field) => ({\n      field,\n      score: scoreStyleEntry(styleFieldEntry(field as any), query),\n    }))\n    .filter((entry) => entry.score > 0)\n    .sort((a, b) => b.score - a.score)\n  if (!ranked.length) return undefined\n  return { ...group, fields: ranked.map((entry) => entry.field) }\n}\n"],"names":["STYLE_FIELD_KEYWORDS","color","backgroundColor","backgroundImage","width","height","minWidth","maxWidth","minHeight","maxHeight","fontSize","fontWeight","fontFamily","lineHeight","letterSpacing","textTransform","textDecoration","border","borderColor","borderTop","borderRight","borderBottom","borderLeft","borderRadius","outline","boxShadow","position","top","right","bottom","left","zIndex","overflow","opacity","cursor","display","float","gap","rowGap","columnGap","gridTemplateColumns","gridTemplateRows","gridAutoFlow","gridColumn","gridRow","flexGrow","flexShrink","flexBasis","order","flexDirection","flexWrap","justifyContent","alignItems","alignContent","justifyItems","alignSelf","justifySelf","STYLE_SECTION_ENTRIES","box","name","label","keywords","textAlign","visibility","classes","normalize","text","toLowerCase","replace","trim","humanizeName","scoreTerm","haystack","term","weight","startsWith","includes","scoreStyleEntry","entry","query","terms","split","filter","Boolean","length","compact","map","total","best","Math","max","keyword","matchesStyleQuery","styleFieldEntry","field","filterStyleGroup","group","ranked","fields","score","sort","a","b","undefined"],"mappings":"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"}

package/src/lib/utils/style-target.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type * as Aglyn from '@aglyn/aglyn';
+/**
+ * Where the Styles panel's edits land for the selected node (AGL-1306,
+ * AGL-1332, AGL-1346).
+ *
+ * A plain node's edits read and write `node.sx`, exactly as they always
+ * have. A reusable-component INSTANCE's edits read and write one slice of
+ * `node.styleOverrides` instead — the root slice by default, or the slice
+ * keyed by a DEFINITION-internal node id when the author has picked a leaf
+ * inside the component. Either way the panel behaves like it does on a
+ * fresh plain node (empty until this instance overrides something), and
+ * the canvas/Preview/tenant render the override merged over the matching
+ * component node via `composeReusableComponentNodes`. Mutating the
+ * component itself from a placing document is exactly what this layer
+ * exists to avoid — a leaf target styles the instance's copy of that leaf,
+ * and never unlocks the component's content, which stays the component's.
+ *
+ * `sx` is a GETTER so observer components track the underlying MobX state
+ * at read time; a snapshot captured when the target was built would go
+ * stale after the first write.
+ */
+export interface NodeStyleTarget {
+    /**
+     * The sx record edits read from and write to (live view).
+     *
+     * For a plain node this is the COMPOSED record — `props.sx` with
+     * `node.sx` merged over it (AGL-1346) — so what the panel displays is
+     * what renders. Writes are split back across the two records by
+     * {@link writeComposedNodeSx}.
+     */
+    readonly sx: Record<string, any> | undefined;
+    /** True when edits land in one of the instance's override slices. */
+    readonly isInstanceOverride: boolean;
+    /**
+     * The `styleOverrides` key being edited — `root`, or a definition-internal
+     * node id. Empty string for a plain node, which has no override layer.
+     */
+    readonly overrideKey: string;
+    /** True when the target is a leaf inside the component, not its root. */
+    readonly isLeafOverride: boolean;
+    /** Replaces the target sx wholesale (MobX action inside). */
+    setSx(next: Record<string, any> | undefined): void;
+}
+/**
+ * The style target for a selected node — see {@link NodeStyleTarget}.
+ *
+ * `overrideKey` selects WHICH slice of an instance's overrides is edited;
+ * it is ignored for a plain node. A falsy key falls back to the root, so a
+ * caller that has not resolved a definition yet still edits something real
+ * rather than writing an `undefined`-keyed slice no renderer reads.
+ */
+export declare function getNodeStyleTarget(node: Aglyn.NodeSchema<any> | null | undefined, overrideKey?: string | null): NodeStyleTarget;
+export default getNodeStyleTarget;