symbols-app-connect 3.2.8

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "symbols-app-connect",
+  "displayName": "Symbols.app Connect",
+  "description": "Symbols.app Connect for DOMQL syntax — properties, events, components, element methods, state and more",
+  "version": "3.2.8",
+  "publisher": "symbo-ls",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/symbo-ls/smbls"
+  },
+  "engines": {
+    "vscode": "^1.85.0"
+  },
+  "categories": [
+    "Other",
+    "Programming Languages"
+  ],
+  "keywords": [
+    "domql",
+    "smbls",
+    "symbols",
+    "intellisense",
+    "autocomplete"
+  ],
+  "icon": "icon.png",
+  "activationEvents": [
+    "onLanguage:javascript",
+    "onLanguage:typescript",
+    "onLanguage:javascriptreact",
+    "onLanguage:typescriptreact"
+  ],
+  "main": "./out/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "symbolsApp.toggle",
+        "title": "Toggle Symbols.app Connect",
+        "category": "Symbols.app"
+      },
+      {
+        "command": "symbolsApp.diagnose",
+        "title": "Diagnose Symbols.app Connect",
+        "category": "Symbols.app"
+      }
+    ],
+    "configuration": {
+      "title": "Symbols.app",
+      "properties": {
+        "symbolsApp.enable": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable Symbols.app Connect"
+        },
+        "symbolsApp.detectByImports": {
+          "type": "boolean",
+          "default": true,
+          "description": "Activate only in files importing from domql/smbls packages. When false, activates in all JS/TS files."
+        },
+        "symbolsApp.completeCssProps": {
+          "type": "boolean",
+          "default": true,
+          "description": "Suggest CSS properties as top-level element keys (they get promoted to props automatically)"
+        }
+      }
+    },
+    "configurationDefaults": {
+      "[javascript]": {
+        "editor.quickSuggestions": {
+          "strings": "on"
+        }
+      },
+      "[typescript]": {
+        "editor.quickSuggestions": {
+          "strings": "on"
+        }
+      },
+      "[javascriptreact]": {
+        "editor.quickSuggestions": {
+          "strings": "on"
+        }
+      },
+      "[typescriptreact]": {
+        "editor.quickSuggestions": {
+          "strings": "on"
+        }
+      }
+    }
+  },
+  "scripts": {
+    "vscode:prepublish": "npm run esbuild-base -- --minify",
+    "esbuild-base": "esbuild ./src/extension.ts --bundle --outfile=out/extension.js --external:vscode --format=cjs --platform=node",
+    "compile": "npm run esbuild-base",
+    "watch": "npm run esbuild-base -- --watch",
+    "package": "npx @vscode/vsce package --no-dependencies",
+    "install-vsce": "npm install -g @vscode/vsce"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/vscode": "^1.85.0",
+    "esbuild": "^0.20.0",
+    "typescript": "^5.3.0"
+  }
+}

package/src/data/components.ts

@@ -0,0 +1,182 @@
+export interface ComponentInfo {
+  label: string
+  detail: string
+  documentation: string
+  snippet?: string
+}
+
+export const BUILT_IN_ATOMS: ComponentInfo[] = [
+  {
+    label: 'Box',
+    detail: 'Box: object → <div>',
+    documentation: 'Generic container element. Maps to `<div>`.\n\nCommon props: `padding`, `margin`, `background`, `border`, `borderRadius`, `width`, `height`, `overflow`, `position`',
+    snippet: 'Box: {\n  ${1:padding}: "${2:A}",\n},'
+  },
+  {
+    label: 'Flex',
+    detail: 'Flex: object → <div> (flexbox)',
+    documentation: 'Flexbox layout container.\n\nCommon props: `flow`, `align`, `gap`, `wrap`, `alignItems`, `justifyContent`\n\n```js\nFlex: {\n  flow: "y",\n  align: "center space-between",\n  gap: "B"\n}\n```',
+    snippet: 'Flex: {\n  flow: "${1:y}",\n  gap: "${2:B}",\n},'
+  },
+  {
+    label: 'Grid',
+    detail: 'Grid: object → <div> (CSS grid)',
+    documentation: 'CSS Grid layout container.\n\nCommon props: `columns`, `rows`, `gap`\n\n```js\nGrid: {\n  columns: "repeat(3, 1fr)",\n  gap: "A"\n}\n```',
+    snippet: 'Grid: {\n  columns: "${1:repeat(3, 1fr)}",\n  gap: "${2:A}",\n},'
+  },
+  {
+    label: 'Text',
+    detail: 'Text: object → <span>',
+    documentation: 'Inline text element.\n\nCommon props: `text`, `color`, `fontSize`, `fontWeight`, `lineHeight`\n\n```js\nText: { text: "Hello", fontSize: "B", color: "title" }\n```',
+    snippet: 'Text: {\n  text: "${1:}",\n},'
+  },
+  {
+    label: 'Button',
+    detail: 'Button: object → <button>',
+    documentation: 'Actionable button element.\n\nCommon props: `text`, `icon`, `type`, `disabled`, `theme`, `padding`, `round`, `onClick`\n\n```js\nButton: { text: "Save", theme: "primary", onClick: (ev, el) => {} }\n```',
+    snippet: 'Button: {\n  text: "${1:Label}",\n  onClick: (event, el, state) => {\n    ${2:}\n  },\n},'
+  },
+  {
+    label: 'Link',
+    detail: 'Link: object → <a>',
+    documentation: 'Anchor/link element.\n\nCommon props: `text`, `href`, `target`, `rel`, `color`, `textDecoration`\n\n```js\nLink: { text: "Read more", href: "/article" }\n```',
+    snippet: 'Link: {\n  text: "${1:}",\n  href: "${2:/}",\n},'
+  },
+  {
+    label: 'Input',
+    detail: 'Input: object → <input>',
+    documentation: 'Text input element.\n\nCommon props: `type`, `name`, `value`, `placeholder`, `required`, `disabled`, `onInput`, `onChange`\n\n```js\nInput: { type: "text", placeholder: "Enter name", onInput: (ev, el, state) => {} }\n```',
+    snippet: 'Input: {\n  type: "${1:text}",\n  placeholder: "${2:}",\n},'
+  },
+  {
+    label: 'Icon',
+    detail: 'Icon: object → <svg> (icon sprite)',
+    documentation: 'Icon from the design system sprite.\n\nCommon props: `name`, `boxSize`, `color`\n\n```js\nIcon: { name: "chevronRight", boxSize: "A" }\n```',
+    snippet: 'Icon: {\n  name: "${1:}",\n},'
+  },
+  {
+    label: 'IconText',
+    detail: 'IconText: object → <div>',
+    documentation: 'Icon + text combination.\n\nCommon props: `icon`, `text`, `gap`, `align`\n\n```js\nIconText: { icon: "search", text: "Search", gap: "Z" }\n```',
+    snippet: 'IconText: {\n  icon: "${1:}",\n  text: "${2:}",\n},'
+  },
+  {
+    label: 'Img',
+    detail: 'Img: object → <img>',
+    documentation: 'Image element.\n\nCommon props: `src`, `alt`, `loading`, `width`, `height`, `boxSize`, `objectFit`\n\n```js\nImg: { src: "/logo.png", alt: "Logo", boxSize: "B" }\n```',
+    snippet: 'Img: {\n  src: "${1:}",\n  alt: "${2:}",\n},'
+  },
+  {
+    label: 'Svg',
+    detail: 'Svg: object → <svg>',
+    documentation: 'Raw SVG container.\n\nCommon props: `html` (inline SVG markup), `width`, `height`, `viewBox`, `fill`, `stroke`\n\n```js\nSvg: { html: "<path d=\'...\' />", viewBox: "0 0 24 24" }\n```',
+    snippet: 'Svg: {\n  html: "${1:}",\n  viewBox: "${2:0 0 24 24}",\n},'
+  },
+  {
+    label: 'Iframe',
+    detail: 'Iframe: object → <iframe>',
+    documentation: 'Embedded content frame.\n\nCommon props: `src`, `title`, `allow`, `sandbox`, `width`, `height`\n\n```js\nIframe: { src: "https://example.com", width: "100%", height: "300px" }\n```',
+    snippet: 'Iframe: {\n  src: "${1:}",\n  width: "${2:100%}",\n  height: "${3:300px}",\n},'
+  },
+  {
+    label: 'Video',
+    detail: 'Video: object → <video>',
+    documentation: 'Video player element.\n\nCommon props: `src`, `poster`, `controls`, `autoplay`, `muted`, `loop`, `width`, `height`\n\n```js\nVideo: { src: "/demo.mp4", controls: true, width: "100%" }\n```',
+    snippet: 'Video: {\n  src: "${1:}",\n  controls: true,\n},'
+  },
+  {
+    label: 'Radio',
+    detail: 'Radio: object → <input type="radio">',
+    documentation: 'Radio input element.\n\nCommon props: `name`, `value`, `checked`, `disabled`, `onChange`\n\n```js\nRadio: { name: "option", value: "a" }\n```',
+    snippet: 'Radio: {\n  name: "${1:}",\n  value: "${2:}",\n},'
+  },
+  {
+    label: 'Checkbox',
+    detail: 'Checkbox: object → <input type="checkbox">',
+    documentation: 'Checkbox input element.\n\nCommon props: `name`, `value`, `checked`, `disabled`, `onChange`\n\n```js\nCheckbox: { name: "agree", checked: true }\n```',
+    snippet: 'Checkbox: {\n  name: "${1:}",\n},'
+  }
+]
+
+export const UIKIT_COMPONENTS: ComponentInfo[] = [
+  // Typography
+  { label: 'H1', detail: 'H1: object → <h1>', documentation: 'H1 heading. Common props: `text`, `color`, `fontSize`', snippet: 'H1: { text: "${1:}" },' },
+  { label: 'H2', detail: 'H2: object → <h2>', documentation: 'H2 heading.', snippet: 'H2: { text: "${1:}" },' },
+  { label: 'H3', detail: 'H3: object → <h3>', documentation: 'H3 heading.', snippet: 'H3: { text: "${1:}" },' },
+  { label: 'H4', detail: 'H4: object → <h4>', documentation: 'H4 heading.', snippet: 'H4: { text: "${1:}" },' },
+  { label: 'H5', detail: 'H5: object → <h5>', documentation: 'H5 heading.', snippet: 'H5: { text: "${1:}" },' },
+  { label: 'H6', detail: 'H6: object → <h6>', documentation: 'H6 heading.', snippet: 'H6: { text: "${1:}" },' },
+  { label: 'P', detail: 'P: object → <p>', documentation: 'Paragraph element.\n\nCommon props: `text`, `color`, `fontSize`, `lineHeight`, `maxWidth`', snippet: 'P: { text: "${1:}" },' },
+  { label: 'Caption', detail: 'Caption: object → <span>', documentation: 'Small caption/label text.', snippet: 'Caption: { text: "${1:}" },' },
+  { label: 'Headline', detail: 'Headline: object → <span>', documentation: 'Large emphasis/display text.', snippet: 'Headline: { text: "${1:}" },' },
+  { label: 'Subhead', detail: 'Subhead: object → <span>', documentation: 'Subheading text.', snippet: 'Subhead: { text: "${1:}" },' },
+  { label: 'Footnote', detail: 'Footnote: object → <span>', documentation: 'Footer reference text.', snippet: 'Footnote: { text: "${1:}" },' },
+  { label: 'Strong', detail: 'Strong: object → <strong>', documentation: 'Bold inline text.', snippet: 'Strong: { text: "${1:}" },' },
+  { label: 'Italic', detail: 'Italic: object → <em>', documentation: 'Italic inline text.', snippet: 'Italic: { text: "${1:}" },' },
+  { label: 'U', detail: 'U: object → <u>', documentation: 'Underlined inline text.', snippet: 'U: { text: "${1:}" },' },
+
+  // Dividers
+  { label: 'Hr', detail: 'Hr: object → <hr>', documentation: 'Horizontal rule divider.', snippet: 'Hr: {},' },
+  { label: 'HrLegend', detail: 'HrLegend: object → <div>', documentation: 'Divider with centered label text.\n\nCommon props: `text`', snippet: 'HrLegend: { text: "${1:Or}" },' },
+
+  // Buttons (composite)
+  { label: 'IconButton', detail: 'IconButton: object', documentation: 'Icon-only circular button.\n\nCommon props: `Icon.name`, `theme`, `fontSize`, `padding`\n\n```js\nIconButton: { Icon: { name: "plus" }, theme: "dialog" }\n```', snippet: 'IconButton: {\n  Icon: { name: "${1:}" },\n},' },
+  { label: 'SubmitButton', detail: 'SubmitButton: object', documentation: 'Form submit button.\n\nCommon props: `value` (label).\n\n```js\nSubmitButton: { value: "Create account" }\n```', snippet: 'SubmitButton: {\n  value: "${1:Submit}",\n},' },
+
+  // Avatar
+  { label: 'Avatar', detail: 'Avatar: object', documentation: 'User profile image.\n\nCommon props: `boxSize` (default `"C2"`), `src`, `alt`\n\n```js\nAvatar: { boxSize: "C2" }\n```', snippet: 'Avatar: {\n  boxSize: "${1:C2}",\n},' },
+  { label: 'AvatarStatus', detail: 'AvatarStatus: object', documentation: 'Avatar with status dot.\n\nCommon props: `Avatar.boxSize`, `StatusDot.theme`\n\n```js\nAvatarStatus: { StatusDot: { theme: "success" } }\n```', snippet: 'AvatarStatus: {\n  StatusDot: { theme: "${1:success}" },\n},' },
+  { label: 'AvatarSet', detail: 'AvatarSet: object', documentation: 'Group of overlapping avatars.\n\nCommon props: `children`', snippet: 'AvatarSet: {\n  children: [${1:}],\n},' },
+  { label: 'AvatarHgroup', detail: 'AvatarHgroup: object', documentation: 'Avatar with name and subtitle.\n\n```js\nAvatarHgroup: { H: { text: "Name" }, P: { text: "Role" } }\n```', snippet: 'AvatarHgroup: {\n  H: { text: "${1:}" },\n  P: { text: "${2:}" },\n},' },
+
+  // Badge
+  { label: 'Badge', detail: 'Badge: object', documentation: 'Small colored label badge.\n\nCommon props: `text`, `theme` (default `"warning"`)\n\n```js\nBadge: { text: "New", theme: "primary" }\n```', snippet: 'Badge: {\n  text: "${1:}",\n  theme: "${2:primary}",\n},' },
+  { label: 'NotificationCounter', detail: 'NotificationCounter: object', documentation: 'Circular number badge.\n\nCommon props: `text` (number), `theme`\n\n```js\nNotificationCounter: { text: "5", theme: "primary" }\n```', snippet: 'NotificationCounter: {\n  text: "${1:0}",\n},' },
+
+  // Form
+  { label: 'Field', detail: 'Field: object', documentation: 'Styled text input with optional icon.\n\nCommon props: `Input.placeholder`, `Input.type`, `Icon.icon`, `theme`\n\n```js\nField: { Input: { placeholder: "Enter name" }, Icon: { icon: "user" } }\n```', snippet: 'Field: {\n  Input: { placeholder: "${1:}" },\n},' },
+  { label: 'FieldCaption', detail: 'FieldCaption: object', documentation: 'Labeled field with caption above.\n\nCommon props: `Caption.text`, `Field` props', snippet: 'FieldCaption: {\n  Caption: { text: "${1:Label}" },\n  Field: { Input: { placeholder: "${2:}" } },\n},' },
+  { label: 'Select', detail: 'Select: object → <select>', documentation: 'Native select element.\n\nCommon props: `children` (array of `{ text, value }` options)', snippet: 'Select: {\n  children: [\n    { text: "${1:Option}", value: "${2:value}" },\n  ],\n},' },
+  { label: 'SelectPicker', detail: 'SelectPicker: object', documentation: 'Styled select with chevron icon.\n\nCommon props: `Select.children`, `Icon.name`', snippet: 'SelectPicker: {\n  Select: {\n    children: [\n      { text: "${1:Option}", value: "${2:value}" },\n    ],\n  },\n},' },
+  { label: 'Search', detail: 'Search: object', documentation: 'Search input with icon.\n\nCommon props: `Input.placeholder`, `Icon.name`\n\n```js\nSearch: { Input: { placeholder: "Search…" } }\n```', snippet: 'Search: {\n  Input: { placeholder: "${1:Search…}" },\n},' },
+
+  // Navigation
+  { label: 'TabSet', detail: 'TabSet: object', documentation: 'Horizontal tab bar.\n\nCommon props: `children` (tab objects with `text` and optional `isActive`)\n\n```js\nTabSet: { children: [{ text: "Overview", isActive: true }, { text: "Details" }] }\n```', snippet: 'TabSet: {\n  children: [\n    { text: "${1:Tab 1}", isActive: true },\n    { text: "${2:Tab 2}" },\n  ],\n},' },
+  { label: 'LinkSet', detail: 'LinkSet: object', documentation: 'Navigation list of links.\n\nCommon props: `tag: "nav"`, `childExtend: "Link"`, `children`', snippet: 'LinkSet: {\n  tag: "nav",\n  children: [\n    { text: "${1:Home}", href: "${2:/}" },\n  ],\n},' },
+  { label: 'Breadcrumb', detail: 'Breadcrumb: object', documentation: 'Breadcrumb navigation.\n\nCommon props: `tag: "nav"`, `childExtend: "Link"`', snippet: 'Breadcrumb: {\n  tag: "nav",\n},' },
+  { label: 'Pagination', detail: 'Pagination: object', documentation: 'Numbered page controls.', snippet: 'Pagination: {},' },
+
+  // Progress / Status
+  { label: 'Progress', detail: 'Progress: object', documentation: 'Linear progress bar.\n\nCommon props: `value` (0–1), `height`, `minWidth`, `round`, `theme`\n\n```js\nProgress: { value: 0.6, height: "X", round: "Y" }\n```', snippet: 'Progress: {\n  value: ${1:0.5},\n},' },
+  { label: 'CircleProgress', detail: 'CircleProgress: object', documentation: 'Circular progress ring.\n\nCommon props: `value` (0–1), `boxSize`\n\n```js\nCircleProgress: { value: 0.73, boxSize: "D" }\n```', snippet: 'CircleProgress: {\n  value: ${1:0.5},\n  boxSize: "${2:D}",\n},' },
+  { label: 'StatusDot', detail: 'StatusDot: object', documentation: 'Small status indicator dot.\n\nCommon props: `theme` (`"success"`, `"error"`, `"warning"`)\n\n```js\nStatusDot: { theme: "success" }\n```', snippet: 'StatusDot: {\n  theme: "${1:success}",\n},' },
+
+  // Overlay
+  { label: 'Modal', detail: 'Modal: object', documentation: 'Dialog overlay container.\n\nCommon props: `Hgroup.H.text`, `Hgroup.P.text`, `IconButton.Icon.name`, `theme: "dialog"`\n\n```js\nModal: { Hgroup: { H: { text: "Confirm" } }, IconButton: { Icon: { name: "x" } } }\n```', snippet: 'Modal: {\n  Hgroup: {\n    H: { text: "${1:Title}" },\n    P: { text: "${2:Subtitle}" },\n  },\n  IconButton: { Icon: { name: "x" } },\n},' },
+  { label: 'Accordion', detail: 'Accordion: object', documentation: 'Expandable/collapsible section.\n\nCommon props: `ButtonParagraph.P.text`, `P.text`, `state.activeAccordion`', snippet: 'Accordion: {\n  ButtonParagraph: { P: { text: "${1:Question}" } },\n  P: { text: "${2:Answer}" },\n},' },
+
+  // Data display
+  { label: 'UnitValue', detail: 'UnitValue: object', documentation: 'Unit + value pair (price, stat).\n\nCommon props: `Unit.text`, `Value.text`, `flow`\n\n```js\nUnitValue: { Unit: { text: "$" }, Value: { text: "99" } }\n```', snippet: 'UnitValue: {\n  Unit: { text: "${1:$}" },\n  Value: { text: "${2:}" },\n},' },
+  { label: 'Stars', detail: 'Stars: object', documentation: '5-star rating display.', snippet: 'Stars: {},' },
+
+  // Layout helpers
+  { label: 'Hgroup', detail: 'Hgroup: object', documentation: 'Heading group (heading + paragraph).\n\n```js\nHgroup: { H: { text: "Title" }, P: { text: "Subtitle" } }\n```', snippet: 'Hgroup: {\n  H: { text: "${1:}" },\n  P: { text: "${2:}" },\n},' },
+
+  // Misc
+  { label: 'Span', detail: 'Span: object → <span>', documentation: 'Inline span element.', snippet: 'Span: { text: "${1:}" },' },
+  { label: 'Div', detail: 'Div: object → <div>', documentation: 'Generic div container.', snippet: 'Div: {},' },
+  { label: 'Section', detail: 'Section: object → <section>', documentation: 'Section element.', snippet: 'Section: {},' },
+  { label: 'Header', detail: 'Header: object → <header>', documentation: 'Header element.', snippet: 'Header: {},' },
+  { label: 'Footer', detail: 'Footer: object → <footer>', documentation: 'Footer element.', snippet: 'Footer: {},' },
+  { label: 'Nav', detail: 'Nav: object → <nav>', documentation: 'Navigation element.', snippet: 'Nav: {},' },
+  { label: 'Main', detail: 'Main: object → <main>', documentation: 'Main content element.', snippet: 'Main: {},' },
+  { label: 'Article', detail: 'Article: object → <article>', documentation: 'Article element.', snippet: 'Article: {},' },
+  { label: 'Aside', detail: 'Aside: object → <aside>', documentation: 'Aside/sidebar element.', snippet: 'Aside: {},' },
+  { label: 'Form', detail: 'Form: object → <form>', documentation: 'Form element.', snippet: 'Form: {\n  tag: "form",\n  onSubmit: (event, el, state) => {\n    event.preventDefault()\n    ${1:}\n  },\n},' },
+  { label: 'Table', detail: 'Table: object → <table>', documentation: 'Table element.', snippet: 'Table: {},' },
+  { label: 'Tr', detail: 'Tr: object → <tr>', documentation: 'Table row element.', snippet: 'Tr: {},' },
+  { label: 'Td', detail: 'Td: object → <td>', documentation: 'Table data cell.', snippet: 'Td: {},' },
+  { label: 'Th', detail: 'Th: object → <th>', documentation: 'Table header cell.', snippet: 'Th: {},' },
+]
+
+export const ALL_COMPONENTS = [...BUILT_IN_ATOMS, ...UIKIT_COMPONENTS]

package/src/data/cssProperties.ts

@@ -0,0 +1,187 @@
+// CSS properties that can be used at the top level of a DOMQL element.
+// They get automatically promoted to element.props by propertizeElement().
+
+export interface CssPropInfo {
+  label: string
+  detail: string
+  documentation?: string
+}
+
+// Design-system shorthand props (DOMQL/smbls specific)
+export const DESIGN_SYSTEM_PROPS: CssPropInfo[] = [
+  { label: 'flow', detail: 'Shorthand for flexDirection', documentation: 'Shorthand for `flexDirection`. Common values: `"column"`, `"row"`, `"y"`, `"x"`, `"column-reverse"`\n\n```js\nflow: "column"\nflow: "x"  // alias for "row"\n```' },
+  { label: 'align', detail: 'Shorthand for alignItems and justifyContent', documentation: 'Shorthand for united `alignItems` and `justifyContent`.\n\n```js\nalign: "center center"\nalign: "flex-start space-between"\n```' },
+  { label: 'flexAlign', detail: 'Shorthand for alignItems and justifyContent', documentation: 'Shorthand for united `alignItems` and `justifyContent`.\n\n```js\nflexAlign: "flex-start center"\n```' },
+  { label: 'round', detail: 'Rounding the corners of the shape', documentation: 'Rounding the corners of the shape. Accepts spacing design tokens or CSS values.\n\n```js\nround: "C2"\nround: "100%"\n```' },
+  { label: 'boxSize', detail: 'Range of width and height', documentation: 'Range of width and height. Accepts spacing design tokens.\n\n```js\nboxSize: "C1 E"  // width: C1, height: E\nboxSize: "D"     // both width and height\n```' },
+  { label: 'widthRange', detail: 'Range of min-width and max-width', documentation: 'Range of min-width and max-width.\n\n```js\nwidthRange: "A1 B2"  // minWidth: A1, maxWidth: B2\nwidthRange: "H2 50%"\n```' },
+  { label: 'heightRange', detail: 'Range of min-height and max-height', documentation: 'Range of min-height and max-height.\n\n```js\nheightRange: "A1 B2"  // minHeight: A1, maxHeight: B2\n```' },
+  { label: 'theme', detail: 'Reference a theme from Themes configuration', documentation: 'Reference the value from the Themes configuration.\n\n```js\ntheme: "primary"\ntheme: "primary .active"\ntheme: { color: "white", "@dark": { color: "blue" } }\n```' },
+  { label: 'columns', detail: 'Shorthand for gridTemplateColumns', documentation: 'Shorthand for `gridTemplateColumns`.' },
+  { label: 'rows', detail: 'Shorthand for gridTemplateRows', documentation: 'Shorthand for `gridTemplateRows`.' },
+  { label: 'wrap', detail: 'Shorthand for flexWrap', documentation: 'Shorthand for `flexWrap`. E.g. `"wrap"`, `"nowrap"`' },
+  { label: 'inset', detail: 'CSS inset shorthand (top, right, bottom, left)', documentation: 'CSS inset shorthand (top, right, bottom, left).' },
+  { label: 'shape', detail: 'Name of the shape from Shapes configuration', documentation: 'Name of the shape from Shapes configuration.\n\n```js\nshape: "tag"\nshape: "tooltip top"\n```' },
+  { label: 'shapeModifier', detail: 'Shape direction and position attributes', documentation: 'If the shape is either tooltip or tag, sets additional attributes like direction or position.\n\n```js\nshapeModifier: { position: "block center", direction: "north west" }\n```' },
+  { label: 'shadow', detail: 'Shadow depth with color and offset tokens', documentation: 'Level of the shadow that adds depth to the element.\n\n```js\nshadow: "black A A C"  // color x y depth\n```' },
+]
+
+// Standard CSS properties
+export const STANDARD_CSS_PROPS: CssPropInfo[] = [
+  // Layout
+  { label: 'display', detail: 'CSS display mode' },
+  { label: 'position', detail: 'CSS positioning method' },
+  { label: 'top', detail: 'Top offset position' },
+  { label: 'right', detail: 'Right offset position' },
+  { label: 'bottom', detail: 'Bottom offset position' },
+  { label: 'left', detail: 'Left offset position' },
+  { label: 'zIndex', detail: 'Stack order of the element' },
+  { label: 'overflow', detail: 'Content overflow behavior' },
+  { label: 'overflowX', detail: 'Horizontal overflow behavior' },
+  { label: 'overflowY', detail: 'Vertical overflow behavior' },
+  { label: 'visibility', detail: 'Element visibility' },
+
+  // Flexbox
+  { label: 'flexDirection', detail: 'CSS flexDirection property' },
+  { label: 'flexFlow', detail: 'CSS flexFlow property' },
+  { label: 'flexWrap', detail: 'CSS flexWrap property' },
+  { label: 'flexGrow', detail: 'Flex grow factor' },
+  { label: 'flexShrink', detail: 'Flex shrink factor' },
+  { label: 'flexBasis', detail: 'Initial main size of flex item' },
+  { label: 'flex', detail: 'Flex shorthand (grow shrink basis)' },
+  { label: 'alignItems', detail: 'CSS alignItems property' },
+  { label: 'alignContent', detail: 'CSS alignContent property' },
+  { label: 'alignSelf', detail: 'CSS alignSelf property' },
+  { label: 'justifyContent', detail: 'CSS justifyContent property' },
+  { label: 'justifyItems', detail: 'CSS justifyItems property' },
+  { label: 'justifySelf', detail: 'CSS justifySelf property' },
+  { label: 'gap', detail: 'gap: string', documentation: 'The space between children inside the element. Accepts spacing design tokens.\n\n```js\ngap: "A2"\ngap: "B C"  // rowGap columnGap\n```' },
+  { label: 'rowGap', detail: 'Space between rows' },
+  { label: 'columnGap', detail: 'Space between columns' },
+  { label: 'order', detail: 'Flex/grid item order' },
+
+  // Grid
+  { label: 'gridTemplateColumns', detail: 'Grid column track sizes' },
+  { label: 'gridTemplateRows', detail: 'Grid row track sizes' },
+  { label: 'gridTemplateAreas', detail: 'Named grid template areas' },
+  { label: 'gridColumn', detail: 'Grid column placement' },
+  { label: 'gridRow', detail: 'Grid row placement' },
+  { label: 'gridArea', detail: 'Grid area placement' },
+  { label: 'gridAutoFlow', detail: 'Auto-placement algorithm' },
+  { label: 'gridAutoColumns', detail: 'Auto-generated column size' },
+  { label: 'gridAutoRows', detail: 'Auto-generated row size' },
+
+  // Sizing
+  { label: 'width', detail: 'Width of the element', documentation: 'Width of the element. Accepts spacing design tokens or CSS values.\n\n```js\nwidth: "F1"\nwidth: "100%"\n```' },
+  { label: 'height', detail: 'Height of the element', documentation: 'Height of the element. Accepts spacing design tokens or CSS values.\n\n```js\nheight: "F1"\n```' },
+  { label: 'minWidth', detail: 'Min width of the box', documentation: 'Min width of the box. Accepts spacing design tokens or CSS values.' },
+  { label: 'maxWidth', detail: 'Max width of the box', documentation: 'Max width of the box. Accepts spacing design tokens or CSS values.' },
+  { label: 'minHeight', detail: 'Min height of the box', documentation: 'Min height of the box. Accepts spacing design tokens or CSS values.' },
+  { label: 'maxHeight', detail: 'Max height of the box', documentation: 'Max height of the box. Accepts spacing design tokens or CSS values.' },
+  { label: 'aspectRatio', detail: 'Aspect ratio of the box (1/3, 3/7…)', documentation: 'Aspect ratio of the box.\n\n```js\naspectRatio: "1 / 2"\n```' },
+
+  // Spacing
+  { label: 'padding', detail: 'Space inside the element', documentation: 'Space inside the element. Accepts spacing design tokens or CSS values.\n\n```js\npadding: "A1 C2"\npadding: "Z2 C"\n```' },
+  { label: 'paddingTop', detail: 'Top inner space' },
+  { label: 'paddingRight', detail: 'Right inner space' },
+  { label: 'paddingBottom', detail: 'Bottom inner space' },
+  { label: 'paddingLeft', detail: 'Left inner space' },
+  { label: 'paddingInline', detail: 'Inline (horizontal) inner space' },
+  { label: 'paddingBlock', detail: 'Block (vertical) inner space' },
+  { label: 'margin', detail: 'Outer space of the element', documentation: 'Outer space of the element. Accepts spacing design tokens or CSS values.\n\n```js\nmargin: "0 -B2"\n```' },
+  { label: 'marginTop', detail: 'Top outer space' },
+  { label: 'marginRight', detail: 'Right outer space' },
+  { label: 'marginBottom', detail: 'Bottom outer space' },
+  { label: 'marginLeft', detail: 'Left outer space' },
+  { label: 'marginInline', detail: 'Inline (horizontal) outer space' },
+  { label: 'marginBlock', detail: 'Block (vertical) outer space' },
+
+  // Background
+  { label: 'background', detail: 'background: string', documentation: 'Setting the specific background color matching with one from the Colors page. Accepts color tokens with modifiers.\n\n```js\nbackground: "gray"\nbackground: "blue.5"  // with opacity\n```' },
+  { label: 'backgroundColor', detail: 'Background color of the element' },
+  { label: 'backgroundImage', detail: 'Background image URL or gradient' },
+  { label: 'backgroundSize', detail: 'Background image sizing' },
+  { label: 'backgroundPosition', detail: 'Background image position' },
+  { label: 'backgroundRepeat', detail: 'Background image repeat behavior' },
+  { label: 'backgroundClip', detail: 'Background painting area' },
+
+  // Border
+  { label: 'border', detail: 'border: string', documentation: 'Border with design system color tokens. Order: color, size, style.\n\n```js\nborder: "blue 1px solid"\nborderTop: "1px solid gray.5"\n```' },
+  { label: 'borderTop', detail: 'Top border with color tokens' },
+  { label: 'borderRight', detail: 'Right border with color tokens' },
+  { label: 'borderBottom', detail: 'Bottom border with color tokens' },
+  { label: 'borderLeft', detail: 'Left border with color tokens' },
+  { label: 'borderWidth', detail: 'Border width' },
+  { label: 'borderStyle', detail: 'Border line style' },
+  { label: 'borderColor', detail: 'Border color from design system' },
+  { label: 'borderRadius', detail: 'borderRadius: string', documentation: 'Rounding the corners of the shape. Accepts spacing design tokens.\n\n```js\nborderRadius: "C2"\n```' },
+  { label: 'borderTopLeftRadius', detail: 'Top-left corner radius' },
+  { label: 'borderTopRightRadius', detail: 'Top-right corner radius' },
+  { label: 'borderBottomLeftRadius', detail: 'Bottom-left corner radius' },
+  { label: 'borderBottomRightRadius', detail: 'Bottom-right corner radius' },
+  { label: 'outline', detail: 'Outline around the element' },
+  { label: 'outlineOffset', detail: 'Space between element and outline' },
+
+  // Typography
+  { label: 'color', detail: 'Text color from design system', documentation: 'Setting the specific text color matching with one from the Colors page. Accepts color tokens with modifiers.\n\n```js\ncolor: "title"\ncolor: "blue.5"  // with opacity\n```' },
+  { label: 'fontSize', detail: 'Typography sequence or CSS value', documentation: 'Using typography sequence or default CSS values. Accepts typography design tokens.\n\n```js\nfontSize: "B"\nfontSize: "Z1"\n```' },
+  { label: 'fontWeight', detail: 'Font weight from configuration', documentation: 'CSS font-weight value. Finds the closest weight in configuration or sets variable font value.\n\n```js\nfontWeight: "500"\n```' },
+  { label: 'fontFamily', detail: 'Font family name' },
+  { label: 'fontStyle', detail: 'Font style (normal, italic)' },
+  { label: 'lineHeight', detail: 'Line height of text' },
+  { label: 'letterSpacing', detail: 'Space between characters' },
+  { label: 'textAlign', detail: 'Text horizontal alignment' },
+  { label: 'textDecoration', detail: 'Text decoration (underline, etc.)' },
+  { label: 'textTransform', detail: 'Text case transformation' },
+  { label: 'textOverflow', detail: 'Overflowed text behavior' },
+  { label: 'whiteSpace', detail: 'White space handling' },
+  { label: 'wordBreak', detail: 'Word breaking rules' },
+  { label: 'wordWrap', detail: 'Word wrapping behavior' },
+
+  // Effects
+  { label: 'opacity', detail: 'Element transparency (0-1)' },
+  { label: 'boxShadow', detail: 'CSS box shadow' },
+  { label: 'filter', detail: 'Visual filter effects (blur, brightness)' },
+  { label: 'backdropFilter', detail: 'Backdrop filter effects' },
+  { label: 'transform', detail: 'CSS transform (translate, rotate, scale)' },
+  { label: 'transformOrigin', detail: 'Transform origin point' },
+  { label: 'transition', detail: 'transition: string', documentation: 'Transition using timing design tokens.\n\n```js\ntransition: "A defaultBezier"\n```' },
+  { label: 'transitionProperty', detail: 'Properties to transition' },
+  { label: 'transitionDuration', detail: 'transitionDuration: string', documentation: 'Duration value from Timing sequence, or CSS value.' },
+  { label: 'transitionTimingFunction', detail: 'Transition easing function' },
+  { label: 'transitionDelay', detail: 'Delay before transition starts' },
+  { label: 'animation', detail: 'animation: string', documentation: 'Bundle animation properties. Accepts animation name and timing tokens.\n\n```js\nanimation: "fadeIn"\nanimation: "fadeIn C1 my-custom-bezier"\n```' },
+  { label: 'animationName', detail: 'animationName: string', documentation: 'Name of the animation defined in design system.' },
+  { label: 'animationDuration', detail: 'animationDuration: string', documentation: 'Duration value from Timing sequence, or CSS value.\n\n```js\nanimationDuration: "C"\n```' },
+  { label: 'animationDelay', detail: 'animationDelay: string', documentation: 'Delay value from Timing sequence, or CSS value.' },
+  { label: 'animationTimingFunction', detail: 'animationTimingFunction: string', documentation: 'A value from Timing sequence, or CSS animation-timing-function property.' },
+  { label: 'animationFillMode', detail: 'animationFillMode: string' },
+  { label: 'animationPlayState', detail: 'animationPlayState: string' },
+  { label: 'animationIterationCount', detail: 'animationIterationCount: string' },
+  { label: 'animationDirection', detail: 'animationDirection: string' },
+
+  // Cursor / pointer
+  { label: 'cursor', detail: 'Mouse cursor appearance' },
+  { label: 'pointerEvents', detail: 'Pointer event targeting' },
+  { label: 'userSelect', detail: 'Text selection behavior' },
+
+  // Misc
+  { label: 'objectFit', detail: 'Replaced element fitting' },
+  { label: 'objectPosition', detail: 'Replaced element position' },
+  { label: 'resize', detail: 'Element resize behavior' },
+  { label: 'content', detail: 'Generated content for pseudo-elements' },
+  { label: 'listStyle', detail: 'List marker style' },
+  { label: 'tableLayout', detail: 'Table layout algorithm' },
+  { label: 'verticalAlign', detail: 'Vertical alignment' },
+  { label: 'appearance', detail: 'Native UI appearance' },
+  { label: 'boxSizing', detail: 'Box model sizing method' },
+  { label: 'isolation', detail: 'Stacking context isolation' },
+  { label: 'mixBlendMode', detail: 'Color blending mode' },
+  { label: 'willChange', detail: 'Performance optimization hint' },
+  { label: 'clipPath', detail: 'Clipping region shape' },
+  { label: 'fill', detail: 'SVG fill color' },
+  { label: 'stroke', detail: 'SVG stroke color' },
+  { label: 'strokeWidth', detail: 'SVG stroke width' },
+]
+
+export const ALL_CSS_PROPS = [...DESIGN_SYSTEM_PROPS, ...STANDARD_CSS_PROPS]