symbols-app-connect 3.2.8

package/src/data/designSystemValues.ts

@@ -0,0 +1,294 @@
+// Design system token values for smart value completions
+
+// Sequence-based design tokens
+// Each type (spacing, typography, timing) has its own base, ratio, and unit
+// Formula: value = base × ratio^index
+// Letter mapping: U(-6) V(-5) W(-4) X(-3) Y(-2) Z(-1) A(0) B(1) C(2) D(3) E(4) F(5) G(6) H(7)
+// Sub-steps (1,2) interpolate between main steps using golden-ratio subdivision
+
+export interface SequenceToken {
+  label: string
+  approxValue: string  // includes unit
+  index: number
+}
+
+export interface SequenceConfig {
+  type: string
+  base: number
+  ratio: number
+  unit: string
+  description: string
+}
+
+// Default configs per type
+export const SEQUENCE_CONFIGS: Record<string, SequenceConfig> = {
+  spacing: { type: 'spacing', base: 16, ratio: 1.618, unit: 'em', description: 'Spacing (golden ratio)' },
+  typography: { type: 'font-size', base: 16, ratio: 1.25, unit: 'em', description: 'Typography (major third)' },
+  timing: { type: 'timing', base: 150, ratio: 1.333, unit: 'ms', description: 'Timing (perfect fourth)' },
+}
+
+// Sub-ratio calculation (matches getSubratioDifference in sequence.js)
+function getSubValues(base: number, ratio: number, value: number): number[] {
+  const next = value * ratio
+  const diff = next - value
+  const subRatio = diff / 1.618
+  const first = next - subRatio
+  const second = value + subRatio
+  const middle = (first + second) / 2
+  const diffRounded = Math.floor(next) - Math.floor(value)
+  return diffRounded > 16 ? [first, middle, second] : [first, second]
+}
+
+function formatValue(val: number, unit: string): string {
+  if (unit === 'ms') return `~${Math.round(val)}ms`
+  if (val >= 100) return `~${Math.round(val)}px`
+  if (val >= 10) return `~${Math.round(val * 10) / 10}px`
+  return `~${Math.round(val * 100) / 100}px`
+}
+
+// Letter map (matches numToLetterMap in sequence.js)
+const NUM_TO_LETTER: Record<number, string> = {
+  '-6': 'U', '-5': 'V', '-4': 'W', '-3': 'X', '-2': 'Y', '-1': 'Z',
+  0: 'A', 1: 'B', 2: 'C', 3: 'D', 4: 'E', 5: 'F', 6: 'G', 7: 'H',
+} as any
+
+function generateTokens(config: SequenceConfig, rangeStart: number, rangeEnd: number): SequenceToken[] {
+  const tokens: SequenceToken[] = []
+  for (let key = rangeStart; key <= rangeEnd; key++) {
+    const letter = (NUM_TO_LETTER as any)[key]
+    if (!letter) continue
+    const value = config.base * Math.pow(config.ratio, key)
+    const approx = key === 0 && config.unit !== 'ms'
+      ? `${config.base}px`
+      : formatValue(value, config.unit)
+    tokens.push({ label: letter, approxValue: approx, index: key })
+
+    // Generate sub-steps
+    const subs = getSubValues(config.base, config.ratio, value)
+    subs.forEach((sv, i) => {
+      tokens.push({
+        label: `${letter}${i + 1}`,
+        approxValue: formatValue(sv, config.unit),
+        index: key + (i + 1) / 10,
+      })
+    })
+  }
+  return tokens
+}
+
+// Pre-generate tokens for each type
+export const SPACING_TOKENS = generateTokens(SEQUENCE_CONFIGS.spacing, -4, 7)
+export const TYPOGRAPHY_TOKENS = generateTokens(SEQUENCE_CONFIGS.typography, -3, 7)
+export const TIMING_TOKENS = generateTokens(SEQUENCE_CONFIGS.timing, -3, 7)
+
+export const SPACING_SCALE = SPACING_TOKENS.map(t => t.label)
+export const FONT_SIZE_SCALE = TYPOGRAPHY_TOKENS.map(t => t.label)
+
+// Default color tokens with hex values
+export interface ColorToken {
+  label: string
+  hex: string
+  description?: string
+}
+
+export const COLOR_TOKEN_MAP: ColorToken[] = [
+  { label: 'blue', hex: '#213eb0' },
+  { label: 'green', hex: '#389d34' },
+  { label: 'red', hex: '#e15c55' },
+  { label: 'yellow', hex: '#EDCB38' },
+  { label: 'orange', hex: '#e97c16' },
+  { label: 'transparent', hex: 'rgba(0,0,0,0)' },
+  { label: 'black', hex: '#000000' },
+  { label: 'gray', hex: '#4e4e50' },
+  { label: 'white', hex: '#ffffff' },
+  { label: 'title', hex: '', description: 'Near-black text (light) / near-white text (dark)' },
+  { label: 'caption', hex: '', description: 'Secondary text color, adapts to theme' },
+  { label: 'paragraph', hex: '', description: 'Body text color, adapts to theme' },
+  { label: 'disabled', hex: '', description: 'Muted/disabled text color' },
+  { label: 'line', hex: '', description: 'Border/divider color, adapts to theme' },
+  { label: 'currentColor', hex: '', description: 'Inherits current text color' },
+  { label: 'inherit', hex: '', description: 'Inherits from parent' },
+  { label: 'none', hex: '', description: 'No color' },
+]
+
+export const COLOR_TOKENS = COLOR_TOKEN_MAP.map(t => t.label)
+
+// Color modifier syntax hints
+export const COLOR_MODIFIERS = [
+  { suffix: '.5', description: '50% opacity (e.g. blue.5)' },
+  { suffix: '+N', description: 'Lighten by N (e.g. gray+16)' },
+  { suffix: '-N', description: 'Darken by N (e.g. gray-26)' },
+  { suffix: '=N', description: 'Set HSL lightness to N (e.g. gray=50)' },
+]
+
+// Default gradient tokens
+export const GRADIENT_TOKENS = [
+  'gradient-blue-light', 'gradient-blue-dark',
+  'gradient-dark', 'gradient-dark-active',
+  'gradient-light', 'gradient-light-active',
+  'gradient-colorful'
+]
+
+// Theme tokens (from default config)
+export const THEME_TOKENS = [
+  'document', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary',
+  'alert', 'warning', 'success',
+  'field', 'label', 'card', 'dialog',
+  'none', 'transparent'
+]
+
+// Theme modifiers that can be appended with space
+export const THEME_MODIFIERS = [
+  '.color-only', '.inactive', '.gradient',
+  '.child', '.secondary', '.helper',
+  '.light', '.dark', '.active'
+]
+
+// Default icon names (feather icons + custom)
+export const ICON_NAMES = [
+  'symbols', 'logo',
+  'arrowDownCircle', 'arrowDownLeft', 'arrowDownRight', 'arrowDown',
+  'arrowLeftCircle', 'arrowLeft', 'arrowRight', 'arrowRightCircle',
+  'arrowUpCircle', 'arrowUpLeft', 'arrowUpRight', 'arrowUp',
+  'checkCircle', 'check',
+  'chevronDown', 'chevronLeft', 'chevronRight', 'chevronUp',
+  'copy', 'eyeOff', 'eye', 'info', 'lock', 'minus',
+  'sun', 'moon', 'moreHorizontal', 'moreVertical',
+  'send', 'smile', 'search', 'upload', 'video', 'x', 'star', 'plus'
+]
+
+// Media query tokens (for @media keys)
+export const MEDIA_TOKENS = [
+  'tv',
+  'screenL', 'screenL<', 'screenM', 'screenM<', 'screenS', 'screenS<',
+  'tabletL', 'tabletL<', 'tabletM', 'tabletM<', 'tabletS', 'tabletS<',
+  'mobileL', 'mobileL<', 'mobileM', 'mobileM<',
+  'mobileS', 'mobileS<', 'mobileXS', 'mobileXS<',
+  'light', 'dark', 'print'
+]
+
+// HTML tag names for tag: completions
+export const HTML_TAGS = [
+  'div', 'span', 'p', 'a', 'button', 'input', 'textarea', 'select', 'option',
+  'form', 'label', 'fieldset', 'legend',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+  'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td',
+  'section', 'article', 'aside', 'header', 'footer', 'nav', 'main',
+  'figure', 'figcaption', 'blockquote', 'pre', 'code',
+  'img', 'picture', 'source', 'video', 'audio', 'canvas',
+  'svg', 'path', 'circle', 'rect', 'line', 'g',
+  'iframe', 'embed', 'object',
+  'details', 'summary', 'dialog', 'menu',
+  'hr', 'br', 'wbr',
+  'strong', 'em', 'b', 'i', 'u', 's', 'small', 'sub', 'sup', 'mark', 'abbr',
+  'time', 'data', 'output', 'progress', 'meter'
+]
+
+// CSS property value enums
+export const CSS_VALUE_ENUMS: Record<string, string[]> = {
+  display: ['flex', 'grid', 'block', 'inline', 'inline-flex', 'inline-grid', 'inline-block', 'none', 'contents'],
+  position: ['relative', 'absolute', 'fixed', 'sticky', 'static'],
+  overflow: ['hidden', 'auto', 'scroll', 'visible', 'clip'],
+  overflowX: ['hidden', 'auto', 'scroll', 'visible', 'clip'],
+  overflowY: ['hidden', 'auto', 'scroll', 'visible', 'clip'],
+  visibility: ['visible', 'hidden', 'collapse'],
+  flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
+  flexWrap: ['wrap', 'nowrap', 'wrap-reverse'],
+  alignItems: ['center', 'flex-start', 'flex-end', 'stretch', 'baseline'],
+  alignContent: ['center', 'flex-start', 'flex-end', 'stretch', 'space-between', 'space-around', 'space-evenly'],
+  alignSelf: ['center', 'flex-start', 'flex-end', 'stretch', 'baseline', 'auto'],
+  justifyContent: ['center', 'flex-start', 'flex-end', 'space-between', 'space-around', 'space-evenly', 'stretch'],
+  justifyItems: ['center', 'start', 'end', 'stretch', 'baseline'],
+  justifySelf: ['center', 'start', 'end', 'stretch', 'baseline', 'auto'],
+  textAlign: ['left', 'center', 'right', 'justify', 'start', 'end'],
+  textDecoration: ['none', 'underline', 'line-through', 'overline'],
+  textTransform: ['none', 'uppercase', 'lowercase', 'capitalize'],
+  textOverflow: ['ellipsis', 'clip'],
+  whiteSpace: ['nowrap', 'pre', 'pre-wrap', 'pre-line', 'normal', 'break-spaces'],
+  wordBreak: ['break-word', 'break-all', 'keep-all', 'normal'],
+  fontStyle: ['normal', 'italic', 'oblique'],
+  fontWeight: ['100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold', 'lighter', 'bolder'],
+  cursor: ['pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab', 'grabbing', 'zoom-in', 'zoom-out', 'col-resize', 'row-resize', 'none'],
+  pointerEvents: ['auto', 'none', 'all'],
+  userSelect: ['none', 'auto', 'text', 'all', 'contain'],
+  objectFit: ['cover', 'contain', 'fill', 'none', 'scale-down'],
+  objectPosition: ['center', 'top', 'bottom', 'left', 'right'],
+  resize: ['none', 'both', 'horizontal', 'vertical'],
+  listStyle: ['none', 'disc', 'circle', 'square', 'decimal'],
+  borderStyle: ['solid', 'dashed', 'dotted', 'double', 'none', 'groove', 'ridge', 'inset', 'outset'],
+  boxSizing: ['border-box', 'content-box'],
+  backgroundSize: ['cover', 'contain', 'auto'],
+  backgroundRepeat: ['no-repeat', 'repeat', 'repeat-x', 'repeat-y', 'round', 'space'],
+  backgroundPosition: ['center', 'top', 'bottom', 'left', 'right', 'center center', 'top center', 'bottom center'],
+  backgroundClip: ['border-box', 'padding-box', 'content-box', 'text'],
+  mixBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'difference', 'exclusion'],
+  isolation: ['auto', 'isolate'],
+  appearance: ['none', 'auto'],
+  verticalAlign: ['top', 'middle', 'bottom', 'baseline', 'text-top', 'text-bottom'],
+  tableLayout: ['auto', 'fixed'],
+  willChange: ['auto', 'transform', 'opacity', 'scroll-position'],
+
+  // DOMQL shorthand values
+  flow: ['column', 'row', 'x', 'y', 'column-reverse', 'row-reverse'],
+  wrap: ['wrap', 'nowrap', 'wrap-reverse'],
+  scope: ['state', 'props'],
+}
+
+// Properties that accept color values
+export const COLOR_PROPERTIES = new Set([
+  'color', 'background', 'backgroundColor', 'borderColor',
+  'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor',
+  'outlineColor', 'fill', 'stroke', 'caretColor', 'accentColor',
+  'textDecorationColor', 'columnRuleColor'
+])
+
+// Properties that accept spacing/size tokens
+export const SPACING_PROPERTIES = new Set([
+  'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+  'paddingInline', 'paddingBlock',
+  'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+  'marginInline', 'marginBlock',
+  'gap', 'rowGap', 'columnGap',
+  'top', 'right', 'bottom', 'left', 'inset',
+  'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight',
+  'flexBasis',
+  'borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius',
+  'borderBottomLeftRadius', 'borderBottomRightRadius',
+  'round', 'boxSize', 'widthRange', 'heightRange',
+  'borderWidth', 'outlineOffset', 'outlineWidth'
+])
+
+// Properties that accept font size tokens
+export const FONT_SIZE_PROPERTIES = new Set([
+  'fontSize', 'lineHeight', 'letterSpacing'
+])
+
+// Input type attribute values
+export const INPUT_TYPES = [
+  'text', 'password', 'email', 'number', 'tel', 'url', 'search',
+  'date', 'time', 'datetime-local', 'month', 'week',
+  'color', 'range', 'file', 'hidden',
+  'checkbox', 'radio', 'submit', 'reset', 'button', 'image'
+]
+
+// Target attribute values
+export const TARGET_VALUES = ['_self', '_blank', '_parent', '_top']
+
+// Rel attribute values
+export const REL_VALUES = [
+  'noopener', 'noreferrer', 'nofollow', 'external',
+  'noopener noreferrer', 'stylesheet', 'icon', 'preload', 'prefetch'
+]
+
+// Autocomplete attribute values
+export const AUTOCOMPLETE_VALUES = [
+  'off', 'on', 'name', 'email', 'username', 'new-password', 'current-password',
+  'tel', 'address-line1', 'address-line2', 'country', 'postal-code'
+]
+
+// Boolean-like attribute values
+export const BOOLEAN_VALUES = ['true', 'false']
+
+// Loading attribute values
+export const LOADING_VALUES = ['lazy', 'eager']

package/src/data/domqlKeys.ts

@@ -0,0 +1,321 @@
+export interface DomqlKeyInfo {
+  label: string
+  detail: string
+  documentation: string
+  snippet?: string
+  kind: 'property' | 'method' | 'event' | 'component'
+}
+
+export const DOMQL_REGISTRY_KEYS: DomqlKeyInfo[] = [
+  {
+    label: 'extends',
+    detail: 'extends: string | object | array',
+    documentation:
+      'Extend from one or more registered components. String references a component by name from context.components. Array allows multiple extends (first = highest priority).\n\n```js\nextends: "Button"\nextends: ["IconText", "Focusable"]\nextends: ButtonBase\n```',
+    snippet: "extends: '${1:ComponentName}'",
+    kind: 'property'
+  },
+  {
+    label: 'tag',
+    detail: 'tag: string',
+    documentation:
+      'HTML tag name for the element node. Defaults to `div`.\n\n```js\ntag: "section"\ntag: "button"\ntag: "a"\n```',
+    snippet: "tag: '${1:div}'",
+    kind: 'property'
+  },
+  {
+    label: 'text',
+    detail: 'text: string | function',
+    documentation:
+      'Text content of the element. Can be a static string or a function returning a string.\n\n```js\ntext: "Hello world"\ntext: ({ props }) => props.label\ntext: ({ state }) => `Count: ${state.count}`\n```',
+    snippet: "text: '${1:}'",
+    kind: 'property'
+  },
+  {
+    label: 'html',
+    detail: 'html: string | function',
+    documentation:
+      'Raw HTML content. Sets innerHTML. Use sparingly — XSS risk with user data.\n\n```js\nhtml: ({ props }) => props.richContent\nhtml: "<strong>Bold</strong>"\n```',
+    snippet: 'html: ${1:},',
+    kind: 'property'
+  },
+  {
+    label: 'attr',
+    detail: 'attr: object',
+    documentation:
+      'HTML attributes to set on the DOM node. Values can be static or functions. Returning `null` removes the attribute.\n\n```js\nattr: {\n  placeholder: ({ props }) => props.placeholder,\n  disabled: ({ props }) => props.disabled || null,\n  role: "button",\n  "aria-label": ({ props }) => props.label\n}\n```',
+    snippet: 'attr: {\n  ${1:placeholder}: ${2:},\n},',
+    kind: 'property'
+  },
+  {
+    label: 'state',
+    detail: 'state: object | string',
+    documentation:
+      'Local reactive state for the element. Use `state.update()` to update and trigger re-renders. String value inherits from ancestor state.\n\n```js\nstate: { open: false, count: 0, data: null }\nstate: "~/user"  // inherit from root state key\n```',
+    snippet: 'state: { ${1:key}: ${2:value} },',
+    kind: 'property'
+  },
+  {
+    label: 'if',
+    detail: 'if: function | boolean',
+    documentation:
+      'Conditional rendering. Element only renders when this returns truthy.\n\n```js\nif: ({ state }) => state.isVisible\nif: ({ props }) => Boolean(props.show)\nif: (el, state) => state.isAuthenticated\n```',
+    snippet: 'if: ({ ${1:state} }) => ${2:condition},',
+    kind: 'property'
+  },
+  {
+    label: 'define',
+    detail: 'define: object',
+    documentation:
+      'Register custom property transformers. When a matching key appears on an element, this handler runs.\n\n```js\ndefine: {\n  isActive: (param, el, state) => {\n    if (param) el.node.classList.add("active")\n    else el.node.classList.remove("active")\n  }\n}\n```',
+    snippet: 'define: {\n  ${1:propName}: (param, el, state) => {\n    ${2:}\n  }\n},',
+    kind: 'property'
+  },
+  {
+    label: 'style',
+    detail: 'style: object',
+    documentation:
+      'Inline styles or emotion CSS-in-JS with nested selectors. Escape hatch for complex selectors.\n\n```js\nstyle: {\n  "&:hover [dropdown]": {\n    opacity: 1,\n    transform: "translate3d(0,0,0)"\n  }\n}\n```',
+    snippet: 'style: {\n  ${1:property}: ${2:value},\n},',
+    kind: 'property'
+  },
+  {
+    label: 'data',
+    detail: 'data: object',
+    documentation:
+      'Non-reactive data store. Store mutable references (chart instances, timers) that should NOT trigger re-renders.\n\n```js\ndata: {\n  chartInstance: null,\n  timer: null\n}\n```',
+    snippet: 'data: {\n  ${1:key}: ${2:null},\n},',
+    kind: 'property'
+  },
+  {
+    label: 'scope',
+    detail: 'scope: string | object',
+    documentation:
+      'Assigns a scope reference. `"state"` makes `element.scope = element.state`. `"props"` makes `element.scope = element.props`.\n\n```js\nscope: "state"\nscope: "props"\nscope: { theme: "dark" }\n```',
+    snippet: "scope: '${1:state}',",
+    kind: 'property'
+  },
+  {
+    label: 'on',
+    detail: 'on: object (v2 compat)',
+    documentation:
+      '**v2 style — prefer top-level `onX` in v3.** Event handlers object.\n\n```js\n// v2\non: { click: fn, render: fn }\n\n// v3 preferred\nonClick: fn\nonRender: fn\n```',
+    snippet: 'on: {\n  ${1:event}: (event, el, state) => {\n    ${2:}\n  }\n},',
+    kind: 'property'
+  },
+  {
+    label: 'props',
+    detail: 'props: object',
+    documentation:
+      'Explicit props object. In v3, props are flattened at element root. Use `props:` only for passing props when instantiating a component.\n\n```js\n// Passing props to an instance\nButton: {\n  props: { text: "Submit", disabled: false }\n}\n```',
+    snippet: 'props: {\n  ${1:key}: ${2:value},\n},',
+    kind: 'property'
+  },
+  {
+    label: 'childProps',
+    detail: 'childProps: object',
+    documentation:
+      'Props applied to all direct child elements.\n\n```js\nchildProps: { padding: "A", theme: "field" }\n```',
+    snippet: 'childProps: {\n  ${1:key}: ${2:value},\n},',
+    kind: 'property'
+  },
+  {
+    label: 'childrenAs',
+    detail: 'childrenAs: string',
+    documentation:
+      'Rename the `children` key to a custom name for semantic clarity.\n\n```js\nchildrenAs: "items"\nchildrenAs: "slides"\n```',
+    snippet: "childrenAs: '${1:items}',",
+    kind: 'property'
+  },
+  {
+    label: 'children',
+    detail: 'children: array | function',
+    documentation:
+      'Dynamic child list. Each item becomes a child element using `childExtends` as template.\n\n```js\nchildren: ({ props }) => props.items\nchildren: [{ text: "Item 1" }, { text: "Item 2" }]\n```',
+    snippet: 'children: ${1:[]},',
+    kind: 'property'
+  },
+  {
+    label: 'childExtends',
+    detail: 'childExtends: string | object | array',
+    documentation:
+      'Apply an extend to all direct child elements. Accepts string, object, or array of extends.\n\n```js\nchildExtends: "Button"\nchildExtends: ["IconText", "Focusable"]\nchildExtends: { padding: "Z2 C", round: "0" }\n```',
+    snippet: "childExtends: '${1:ComponentName}',",
+    kind: 'property'
+  },
+  {
+    label: 'childExtendsRecursive',
+    detail: 'childExtendsRecursive: string | object | array',
+    documentation:
+      'Apply an extend to ALL descendants recursively. Accepts string, object, or array of extends.\n\n```js\nchildExtendsRecursive: "Button"\nchildExtendsRecursive: { fontSize: "A" }\n```',
+    snippet: "childExtendsRecursive: '${1:ComponentName}',",
+    kind: 'property'
+  },
+  {
+    label: 'content',
+    detail: 'content: function | object',
+    documentation:
+      'Single dynamic child element. Rendered as the element\'s sole child.\n\n```js\ncontent: ({ props }) => props.page\ncontent: ({ state }) => state.currentView\n```',
+    snippet: 'content: ({ ${1:props} }) => ${2:},',
+    kind: 'property'
+  },
+  {
+    label: 'classlist',
+    detail: 'classlist: object | array',
+    documentation:
+      'CSS class management object. Keys are class names, values are booleans.\n\n```js\nclasslist: { active: true, hidden: false }\n```',
+    snippet: 'classlist: { ${1:className}: ${2:true} },',
+    kind: 'property'
+  },
+  {
+    label: 'variables',
+    detail: 'variables: object',
+    documentation:
+      'CSS custom properties (design tokens) scoped to this element.\n\n```js\nvariables: { color: "blue", spacing: "16px" }\n```',
+    snippet: 'variables: { ${1:name}: ${2:value} },',
+    kind: 'property'
+  },
+  {
+    label: 'theme',
+    detail: 'theme: string',
+    documentation:
+      'Apply a design system theme token to this element.\n\n```js\ntheme: "dialog"\ntheme: "field"\ntheme: "primary"\ntheme: "quaternary .child"\n```',
+    snippet: "theme: '${1:dialog}',",
+    kind: 'property'
+  },
+  {
+    label: 'deps',
+    detail: 'deps: object',
+    documentation: 'Dependencies injection for the element.',
+    snippet: 'deps: { ${1:} },',
+    kind: 'property'
+  },
+  {
+    label: 'key',
+    detail: 'key: string',
+    documentation: 'Explicit element key (overrides the object property name as key).',
+    snippet: "key: '${1:}',",
+    kind: 'property'
+  },
+  {
+    label: 'query',
+    detail: 'query: string',
+    documentation: 'CSS query selector for targeting DOM elements.',
+    snippet: "query: '${1:}',",
+    kind: 'property'
+  }
+]
+
+export const DOMQL_PSEUDO_SELECTORS: DomqlKeyInfo[] = [
+  {
+    label: ':hover',
+    detail: ':hover: object',
+    documentation: 'Styles applied on hover.\n\n```js\n":hover": { opacity: 0.9, transform: "scale(1.015)" }\n```',
+    snippet: "':hover': { ${1:opacity}: ${2:0.9} },",
+    kind: 'property'
+  },
+  {
+    label: ':active',
+    detail: ':active: object',
+    documentation: 'Styles applied when active/pressed.\n\n```js\n":active": { opacity: 1 }\n```',
+    snippet: "':active': { ${1:opacity}: ${2:1} },",
+    kind: 'property'
+  },
+  {
+    label: ':focus',
+    detail: ':focus: object',
+    documentation: 'Styles applied when focused.',
+    snippet: "':focus': { ${1:outline}: ${2:'none'} },",
+    kind: 'property'
+  },
+  {
+    label: ':focus-visible',
+    detail: ':focus-visible: object',
+    documentation: 'Styles applied when focused via keyboard.',
+    snippet: "':focus-visible': { ${1:outline}: ${2:'solid, X, blue .3'} },",
+    kind: 'property'
+  },
+  {
+    label: ':disabled',
+    detail: ':disabled: object',
+    documentation: 'Styles applied when disabled.',
+    snippet: "':disabled': { ${1:opacity}: ${2:0.5} },",
+    kind: 'property'
+  },
+  {
+    label: ':not(:first-child)',
+    detail: ':not(:first-child): object',
+    documentation: 'Styles for all children except the first.',
+    snippet: "':not(:first-child)': { ${1:borderTop}: ${2:'solid, 1px, currentColor'} },",
+    kind: 'property'
+  },
+  {
+    label: ':first-child',
+    detail: ':first-child: object',
+    documentation: 'Styles for the first child element.',
+    snippet: "':first-child': { ${1:} },",
+    kind: 'property'
+  },
+  {
+    label: ':last-child',
+    detail: ':last-child: object',
+    documentation: 'Styles for the last child element.',
+    snippet: "':last-child': { ${1:} },",
+    kind: 'property'
+  },
+  {
+    label: ':before',
+    detail: ':before: object',
+    documentation:
+      'CSS ::before pseudo-element styles.\n\n```js\n":before": { content: "\'\'", display: "block" }\n```',
+    snippet: "':before': { ${1:content}: ${2:'\\'\\''}  },",
+    kind: 'property'
+  },
+  {
+    label: ':after',
+    detail: ':after: object',
+    documentation: 'CSS ::after pseudo-element styles.',
+    snippet: "':after': { ${1:content}: ${2:'\\'\\''}  },",
+    kind: 'property'
+  }
+]
+
+export const DOMQL_MEDIA_QUERIES: DomqlKeyInfo[] = [
+  {
+    label: '@dark',
+    detail: '@dark: object',
+    documentation: 'Styles applied in dark color scheme.\n\n```js\n"@dark": { background: "gray1", color: "gray12" }\n```',
+    snippet: "'@dark': { ${1:} },",
+    kind: 'property'
+  },
+  {
+    label: '@light',
+    detail: '@light: object',
+    documentation: 'Styles applied in light color scheme.',
+    snippet: "'@light': { ${1:} },",
+    kind: 'property'
+  },
+  {
+    label: '@mobile',
+    detail: '@mobile: object',
+    documentation: 'Styles applied on mobile breakpoint.',
+    snippet: "'@mobile': { ${1:} },",
+    kind: 'property'
+  },
+  {
+    label: '@tablet',
+    detail: '@tablet: object',
+    documentation: 'Styles applied on tablet breakpoint.',
+    snippet: "'@tablet': { ${1:} },",
+    kind: 'property'
+  },
+  {
+    label: '@desktop',
+    detail: '@desktop: object',
+    documentation: 'Styles applied on desktop breakpoint.',
+    snippet: "'@desktop': { ${1:} },",
+    kind: 'property'
+  }
+]
+
+export const DOMQL_ALL_KEYS = [...DOMQL_REGISTRY_KEYS, ...DOMQL_PSEUDO_SELECTORS, ...DOMQL_MEDIA_QUERIES]