@stacksjs/stx-vscode 0.2.544 → 0.2.546

package/dist/index.js

@@ -807,6 +807,347 @@ var DEFAULT_TRANSITION_OPTIONS = {
   direction: "both" /* Both */
 };
 
+// ../vscode/src/language-features.ts
+var STX_DIRECTIVES = [
+  { name: "transition", description: "Applies transition animations to an element" },
+  { name: "motion", description: "Controls animation display based on user preferences" },
+  { name: "animationGroup", description: "Groups elements for coordinated animations" },
+  { name: "scrollAnimate", description: "Triggers animation when element scrolls into view" },
+  { name: "translate", description: "Translate a string using the i18n system" },
+  { name: "t", description: "Short alias for translate directive" },
+  { name: "if", description: "Conditional rendering" },
+  { name: "else", description: "Alternative rendering for conditionals" },
+  { name: "elseif", description: "Alternative condition for if statement" },
+  { name: "unless", description: "Inverse conditional rendering" },
+  { name: "foreach", description: "Iterates over an array or collection" },
+  { name: "for", description: "Standard for loop" },
+  { name: "while", description: "While loop" },
+  { name: "forelse", description: "Loop with fallback when collection is empty" },
+  { name: "switch", description: "Switch statement for multiple conditions" },
+  { name: "case", description: "Case option in switch statement" },
+  { name: "default", description: "Default case in switch statement" },
+  { name: "break", description: "Break from loop or switch" },
+  { name: "continue", description: "Continue to next iteration" },
+  { name: "component", description: "Renders a component" },
+  { name: "slot", description: "Define a named slot in a component" },
+  { name: "webcomponent", description: "Include a web component" },
+  { name: "ts", description: "TypeScript code block" },
+  { name: "js", description: "JavaScript code block" },
+  { name: "script", description: "Script code block (alternative to @ts)" },
+  { name: "css", description: "CSS code block" },
+  { name: "json", description: "Output variable as JSON" },
+  { name: "markdown", description: "Markdown content block" },
+  { name: "raw", description: "Display content without processing expressions" },
+  { name: "verbatim", description: "Display content without processing directives" },
+  { name: "extends", description: "Extend a base layout" },
+  { name: "section", description: "Define a content section" },
+  { name: "yield", description: "Output the contents of a section" },
+  { name: "parent", description: "Include parent section content" },
+  { name: "stack", description: "Define a stack for pushing content" },
+  { name: "push", description: "Push content to a stack" },
+  { name: "pushIf", description: "Conditionally push content to a stack" },
+  { name: "pushOnce", description: "Push content to a stack only once" },
+  { name: "prepend", description: "Prepend content to a stack" },
+  { name: "prependOnce", description: "Prepend content to a stack only once" },
+  { name: "include", description: "Include another template file" },
+  { name: "includeIf", description: "Conditionally include a template" },
+  { name: "includeWhen", description: "Include template when condition is true" },
+  { name: "includeUnless", description: "Include template unless condition is true" },
+  { name: "includeFirst", description: "Include the first existing template from a list" },
+  { name: "auth", description: "Content visible only to authenticated users" },
+  { name: "guest", description: "Content visible only to guests" },
+  { name: "can", description: "Check if user has permission" },
+  { name: "cannot", description: "Check if user lacks permission" },
+  { name: "elsecan", description: "Try another permission when the preceding authorization check fails" },
+  { name: "elsecannot", description: "Try another denied permission when the preceding authorization check fails" },
+  { name: "env", description: "Check environment condition" },
+  { name: "isset", description: "Check if a variable is set" },
+  { name: "empty", description: "Check if a variable is empty" },
+  { name: "error", description: "Display validation error for a field" },
+  { name: "hasSection", description: "Check if a section exists" },
+  { name: "once", description: "Include content only once per rendering cycle" },
+  { name: "use", description: "Import a class or namespace" },
+  { name: "csrf", description: "Include CSRF protection token" },
+  { name: "method", description: "Specify form submission method" },
+  { name: "locale", description: "Set locale for content" },
+  { name: "errorBoundary", description: "Catch rendering errors and show fallback content", snippet: `@errorBoundary
+	\${1}
+@fallback
+	\${2}
+@enderrorBoundary` },
+  { name: "fallback", description: "Define fallback content for an error, suspense, or stream boundary" },
+  { name: "suspense", description: "Coordinate async rendering with fallback content", snippet: `@suspense
+	\${1}
+@fallback
+	\${2}
+@endsuspense` },
+  { name: "async", description: "Load and render a component asynchronously", snippet: "@async(component: '${1:Component}', timeout: ${2:5000})\n\t${3}\n@endasync" },
+  { name: "defer", description: "Defer rendering until a browser trigger fires", snippet: "@defer(on: '${1:visible}')\n\t${2}\n@enddefer" },
+  { name: "teleport", description: "Render content into another DOM container", snippet: "@teleport('${1:#modals}')\n\t${2}\n@endteleport" },
+  { name: "keepAlive", description: "Preserve component state while it is inactive", snippet: `@keepAlive
+	\${1}
+@endkeepAlive` },
+  { name: "virtualList", description: "Efficiently render a large scrolling list", snippet: "@virtualList(${1:items}, { itemHeight: ${2:50}, containerHeight: ${3:400} })\n\t${4}\n@endvirtualList" },
+  { name: "virtualGrid", description: "Efficiently render a large scrolling grid", snippet: "@virtualGrid(${1:items}, { columns: ${2:4}, rowHeight: ${3:200}, containerHeight: ${4:600} })\n\t${5}\n@endvirtualGrid" },
+  { name: "infiniteList", description: "Render a virtual list that loads additional items", snippet: "@infiniteList(${1:items}, { itemHeight: ${2:50} })\n\t${3}\n@loading\n\t${4}\n@endinfiniteList" },
+  { name: "loading", description: "Define loading content for an infinite list" },
+  { name: "stream", description: "Stream a server-rendered boundary independently", snippet: `@stream('\${1:content}')
+	\${2}
+@fallback
+	\${3}
+@endstream` },
+  { name: "memo", description: "Skip subtree updates while dependencies are unchanged", snippet: "@memo([${1:dependencies}])\n\t${2}\n@endmemo" },
+  { name: "client:load", description: "Hydrate an island immediately on page load", snippet: `@client:load
+	\${1}
+@endclient` },
+  { name: "client:idle", description: "Hydrate an island when the browser is idle", snippet: `@client:idle
+	\${1}
+@endclient` },
+  { name: "client:visible", description: "Hydrate an island when it enters the viewport", snippet: `@client:visible
+	\${1}
+@endclient` },
+  { name: "client:media", description: "Hydrate an island when a media query matches", snippet: "@client:media(media: '${1:(min-width: 768px)}')\n\t${2}\n@endclient" },
+  { name: "client:only", description: "Render an island only in the browser", snippet: `@client:only
+	\${1}
+@endclient` },
+  { name: "client:hover", description: "Hydrate an island on its first hover or focus", snippet: `@client:hover
+	\${1}
+@endclient` },
+  { name: "client:event", description: "Hydrate an island when a custom event fires", snippet: "@client:event(event: '${1:event-name}')\n\t${2}\n@endclient" },
+  { name: "static", description: "Render content without a hydration wrapper", snippet: `@static
+	\${1}
+@endstatic` },
+  { name: "computed", description: "Declare a computed template value", snippet: "@computed(${1:name}, ${2:expression})" },
+  { name: "watch", description: "Watch a value and run a handler when it changes", snippet: "@watch(${1:source})\n\t${2}\n@endwatch" },
+  { name: "errors", description: "Render all validation errors for a field", snippet: "@errors(${1:form.field})\n\t${2}\n@enderrors" },
+  { name: "hasErrors", description: "Conditionally render when a field has validation errors", snippet: "@hasErrors(${1:form.field})\n\t${2}\n@endhasErrors" },
+  { name: "head", description: "Add markup to the document head", snippet: `@head
+	\${1}
+@endhead` },
+  { name: "title", description: "Set the document title", snippet: "@title('${1:Page title}')" },
+  { name: "meta", description: "Add a metadata tag", snippet: "@meta('${1:description}', '${2:content}')" },
+  { name: "metaTag", description: "Add a metadata tag with full attribute control", snippet: "@metaTag({ name: '${1:description}', content: '${2:content}' })" },
+  { name: "seo", description: "Generate title, meta, Open Graph, and Twitter tags", snippet: "@seo({ title: ${1:title}, description: ${2:description} })" },
+  { name: "structuredData", description: "Emit JSON-LD structured data", snippet: "@structuredData(${1:schema})" },
+  { name: "csp", description: "Emit a Content Security Policy meta tag", snippet: "@csp" },
+  { name: "cspNonce", description: "Output the current Content Security Policy nonce", snippet: "@cspNonce" },
+  { name: "endtransition", description: "Ends a transition block" },
+  { name: "endmotion", description: "Ends a motion block" },
+  { name: "endscrollAnimate", description: "Ends a scroll animation block" },
+  { name: "endif", description: "Ends an if block" },
+  { name: "endunless", description: "Ends an unless block" },
+  { name: "endfor", description: "Ends a for loop block" },
+  { name: "endforeach", description: "Ends a foreach loop block" },
+  { name: "endforelse", description: "Ends a forelse block" },
+  { name: "endwhile", description: "Ends a while block" },
+  { name: "endswitch", description: "Ends a switch block" },
+  { name: "endts", description: "Ends a TypeScript code block" },
+  { name: "endjs", description: "Ends a JavaScript code block" },
+  { name: "endscript", description: "Ends a script block" },
+  { name: "endcss", description: "Ends a CSS block" },
+  { name: "endmarkdown", description: "Ends a markdown block" },
+  { name: "endraw", description: "Ends a raw content block" },
+  { name: "endverbatim", description: "Ends a verbatim block" },
+  { name: "endcomponent", description: "Ends a component block" },
+  { name: "endslot", description: "Ends a slot block" },
+  { name: "endsection", description: "Ends a section block" },
+  { name: "endpush", description: "Ends a push block" },
+  { name: "endpushIf", description: "Ends a pushIf block" },
+  { name: "endpushOnce", description: "Ends a pushOnce block" },
+  { name: "endprepend", description: "Ends a prepend block" },
+  { name: "endprependOnce", description: "Ends a prependOnce block" },
+  { name: "endauth", description: "Ends an auth block" },
+  { name: "endguest", description: "Ends a guest block" },
+  { name: "endcan", description: "Ends a can block" },
+  { name: "endcannot", description: "Ends a cannot block" },
+  { name: "endempty", description: "Ends an empty block" },
+  { name: "endenv", description: "Ends an env block" },
+  { name: "endisset", description: "Ends an isset block" },
+  { name: "enderror", description: "Ends an error block" },
+  { name: "endonce", description: "Ends a once block" },
+  { name: "endwebcomponent", description: "Ends a webcomponent block" },
+  { name: "enderrorBoundary", description: "Ends an error boundary" },
+  { name: "endsuspense", description: "Ends a suspense boundary" },
+  { name: "endasync", description: "Ends an async component block" },
+  { name: "enddefer", description: "Ends a deferred block" },
+  { name: "endteleport", description: "Ends a teleported block" },
+  { name: "endkeepAlive", description: "Ends a keep-alive block" },
+  { name: "endvirtualList", description: "Ends a virtual list" },
+  { name: "endvirtualGrid", description: "Ends a virtual grid" },
+  { name: "endinfiniteList", description: "Ends an infinite list" },
+  { name: "endstream", description: "Ends a streamed boundary" },
+  { name: "endmemo", description: "Ends a memoized block" },
+  { name: "endclient", description: "Ends a partially hydrated island" },
+  { name: "endstatic", description: "Ends a static block" },
+  { name: "endwatch", description: "Ends a watch block" },
+  { name: "enderrors", description: "Ends a validation errors block" },
+  { name: "endhasErrors", description: "Ends a validation condition" },
+  { name: "endhead", description: "Ends a document head block" }
+];
+var STX_DIRECTIVE_PAIRS = {
+  if: "endif",
+  unless: "endunless",
+  for: "endfor",
+  foreach: "endforeach",
+  forelse: "endforelse",
+  while: "endwhile",
+  switch: "endswitch",
+  ts: "endts",
+  js: "endjs",
+  script: "endscript",
+  css: "endcss",
+  markdown: "endmarkdown",
+  raw: "endraw",
+  verbatim: "endverbatim",
+  component: "endcomponent",
+  slot: "endslot",
+  webcomponent: "endwebcomponent",
+  section: "endsection",
+  push: "endpush",
+  pushIf: "endpushIf",
+  pushOnce: "endpushOnce",
+  prepend: "endprepend",
+  prependOnce: "endprependOnce",
+  auth: "endauth",
+  guest: "endguest",
+  can: "endcan",
+  cannot: "endcannot",
+  env: "endenv",
+  isset: "endisset",
+  empty: "endempty",
+  error: "enderror",
+  once: "endonce",
+  transition: "endtransition",
+  motion: "endmotion",
+  scrollAnimate: "endscrollAnimate",
+  errorBoundary: "enderrorBoundary",
+  suspense: "endsuspense",
+  async: "endasync",
+  defer: "enddefer",
+  teleport: "endteleport",
+  keepAlive: "endkeepAlive",
+  virtualList: "endvirtualList",
+  virtualGrid: "endvirtualGrid",
+  infiniteList: "endinfiniteList",
+  stream: "endstream",
+  memo: "endmemo",
+  static: "endstatic",
+  watch: "endwatch",
+  errors: "enderrors",
+  hasErrors: "endhasErrors",
+  head: "endhead"
+};
+var STX_OPENING_DIRECTIVE_BY_CLOSE = new Map(Object.entries(STX_DIRECTIVE_PAIRS).map(([opening, closing]) => [closing, opening]));
+var STX_DIRECTIVE_BY_NAME = new Map(STX_DIRECTIVES.map((directive) => [directive.name.toLowerCase(), directive]));
+function getStxDirectiveAtOffset(line, offset) {
+  const directivePattern = /@([A-Za-z][\w:]*)/g;
+  let match;
+  while ((match = directivePattern.exec(line)) !== null) {
+    const start = match.index;
+    const end = start + match[0].length;
+    if (offset >= start && offset <= end)
+      return { name: match[1], start, end };
+  }
+  return;
+}
+var STX_ATTRIBUTE_DIRECTIVES = [
+  { name: ":if", description: "Conditionally render this element", snippet: ':if="${1:condition}"' },
+  { name: ":else-if", description: "Render when the preceding condition is false and this condition is true", snippet: ':else-if="${1:condition}"' },
+  { name: ":else", description: "Render when the preceding conditions are false", snippet: ":else" },
+  { name: ":for", description: "Render this element for every item in a reactive collection", snippet: ':for="${1:item} in ${2:items}"' },
+  { name: ":show", description: "Toggle this element without removing it from the DOM", snippet: ':show="${1:condition}"' },
+  { name: ":key", description: "Provide a stable identity for a rendered item", snippet: ':key="${1:item.id}"' },
+  { name: "v-if", description: "Vue-compatible alias for :if", snippet: 'v-if="${1:condition}"' },
+  { name: "v-else-if", description: "Vue-compatible alias for :else-if", snippet: 'v-else-if="${1:condition}"' },
+  { name: "v-else", description: "Vue-compatible alias for :else", snippet: "v-else" },
+  { name: "v-memo", description: "Skip subtree updates while dependencies are unchanged", snippet: 'v-memo="[${1:dependencies}]"' },
+  { name: "x-if", description: "Alpine-compatible alias for :if", snippet: 'x-if="${1:condition}"' },
+  { name: "x-else-if", description: "Alpine-compatible alias for :else-if", snippet: 'x-else-if="${1:condition}"' },
+  { name: "x-else", description: "Alpine-compatible alias for :else", snippet: "x-else" },
+  { name: "x-for", description: "Alpine-compatible alias for :for", snippet: 'x-for="${1:item} in ${2:items}"' },
+  { name: "x-show", description: "Alpine-compatible alias for :show", snippet: 'x-show="${1:condition}"' },
+  { name: "x-text", description: "Set text content from a reactive expression", snippet: 'x-text="${1:expression}"' },
+  { name: "x-html", description: "Set HTML content from a reactive expression", snippet: 'x-html="${1:expression}"' },
+  { name: "x-model", description: "Two-way bind a form control to reactive state", snippet: 'x-model="${1:value}"' },
+  { name: "x-class", description: "Bind classes from a reactive expression", snippet: 'x-class="${1:classes}"' },
+  { name: "x-style", description: "Bind inline styles from a reactive expression", snippet: 'x-style="${1:styles}"' },
+  { name: "x-href", description: "Bind an anchor destination", snippet: 'x-href="${1:url}"' },
+  { name: "x-src", description: "Bind an image or media source", snippet: 'x-src="${1:url}"' },
+  { name: "x-bind:", description: "Bind any HTML attribute", snippet: 'x-bind:${1:attribute}="${2:expression}"' },
+  { name: "x-ref", description: "Register a named element reference", snippet: 'x-ref="${1:name}"' },
+  { name: "x-cloak", description: "Hide an element until its reactive scope is ready", snippet: "x-cloak" },
+  { name: "@click", description: "Run an expression when the element is clicked", snippet: '@click="${1:handler}"' },
+  { name: "@submit", description: "Run an expression when the form is submitted", snippet: '@submit.prevent="${1:handler}"' },
+  { name: "@input", description: "Run an expression when input is received", snippet: '@input="${1:handler}"' },
+  { name: "@change", description: "Run an expression when the value changes", snippet: '@change="${1:handler}"' },
+  { name: "@keydown", description: "Run an expression on keydown", snippet: '@keydown="${1:handler}"' },
+  { name: "@keyup", description: "Run an expression on keyup", snippet: '@keyup="${1:handler}"' },
+  { name: "@focus", description: "Run an expression when the element receives focus", snippet: '@focus="${1:handler}"' },
+  { name: "@blur", description: "Run an expression when the element loses focus", snippet: '@blur="${1:handler}"' },
+  { name: "@mouseenter", description: "Run an expression when the pointer enters the element", snippet: '@mouseenter="${1:handler}"' },
+  { name: "@mouseleave", description: "Run an expression when the pointer leaves the element", snippet: '@mouseleave="${1:handler}"' },
+  { name: "stx-hydrate", description: "Defer reactive hydration until a trigger fires", snippet: 'stx-hydrate="${1:visible}"' }
+];
+var STX_ATTRIBUTE_DIRECTIVE_BY_NAME = new Map(STX_ATTRIBUTE_DIRECTIVES.map((directive) => [directive.name.toLowerCase(), directive]));
+function getStxAttributeCompletionContext(sourceBeforeCursor) {
+  let tagStart = -1;
+  let quote;
+  for (let index = 0;index < sourceBeforeCursor.length; index++) {
+    const character = sourceBeforeCursor[index];
+    if (quote) {
+      if (character === quote && sourceBeforeCursor[index - 1] !== "\\")
+        quote = undefined;
+      continue;
+    }
+    if ((character === '"' || character === "'") && tagStart >= 0) {
+      quote = character;
+      continue;
+    }
+    if (character === "<") {
+      const next = sourceBeforeCursor[index + 1];
+      tagStart = next && /[A-Za-z]/.test(next) ? index : -1;
+    } else if (character === ">") {
+      tagStart = -1;
+    }
+  }
+  if (tagStart < 0 || quote)
+    return;
+  const tag = sourceBeforeCursor.slice(tagStart + 1);
+  const match = tag.match(/\s([:@\w.-]*)$/);
+  if (!match)
+    return;
+  return { prefix: match[1] };
+}
+function getStxAttributeAtOffset(source, offset) {
+  const attributePattern = /(?:^|\s)([:@][A-Za-z][\w:.-]*|(?:x|v|stx)-[A-Za-z][\w:.-]*)/g;
+  let match;
+  while ((match = attributePattern.exec(source)) !== null) {
+    const name = match[1];
+    const start = match.index + match[0].length - name.length;
+    const end = start + name.length;
+    if (offset < start || offset > end)
+      continue;
+    const completionContext = getStxAttributeCompletionContext(source.slice(0, end));
+    if (completionContext?.prefix === name)
+      return { name, start, end };
+  }
+  return;
+}
+function getStxAttributeDefinition(name) {
+  const normalized = name.toLowerCase();
+  const exact = STX_ATTRIBUTE_DIRECTIVE_BY_NAME.get(normalized);
+  if (exact)
+    return exact;
+  if (normalized.startsWith("@"))
+    return STX_ATTRIBUTE_DIRECTIVE_BY_NAME.get(normalized.split(".")[0]);
+  if (normalized.startsWith("x-bind:"))
+    return STX_ATTRIBUTE_DIRECTIVE_BY_NAME.get("x-bind:");
+  return;
+}
+function stxSnippetPreview(snippet) {
+  return snippet.replace(/\$\{\d+\|([^|]+)\|\}/g, (_match, choices) => choices.split(",")[0].replace(/\\,/g, ",")).replace(/\$\{\d+:([^}]*)\}/g, "$1").replace(/\$\{\d+\}/g, "").replace(/\$\d+/g, "");
+}
+
 // ../vscode/src/services/ComponentRegistry.ts
 import * as vscode from "vscode";
 import * as path from "node:path";
@@ -1388,6 +1729,111 @@ ${formattedCode}
 `);
 }
 
+// ../vscode/src/providers/hover-documentation.ts
+var JAVASCRIPT_OPERATOR_HOVERS = {
+  typeof: {
+    syntax: "typeof operand",
+    description: '**JavaScript Operator**\n\nReturns a string indicating the type of the operand.\n\n**Possible return values:**\n- `"string"` - for string values\n- `"number"` - for number values\n- `"boolean"` - for boolean values\n- `"object"` - for objects and null\n- `"function"` - for functions\n- `"undefined"` - for undefined\n- `"symbol"` - for symbols\n- `"bigint"` - for BigInt values'
+  },
+  instanceof: {
+    syntax: "object instanceof Constructor",
+    description: "**JavaScript Operator**\n\nTests whether an object has in its prototype chain the prototype property of a constructor. Returns `true` or `false`."
+  },
+  delete: {
+    syntax: "delete object.property",
+    description: "**JavaScript Operator**\n\nRemoves a property from an object. Returns `true` if successful."
+  },
+  in: {
+    syntax: '"property" in object',
+    description: "**JavaScript Operator**\n\nReturns `true` if the specified property is in the specified object or its prototype chain."
+  },
+  of: {
+    syntax: "for (const item of iterable)",
+    description: "**JavaScript Keyword**\n\nUsed in `for...of` loops to iterate over iterable objects (Arrays, Strings, Maps, Sets, etc.)."
+  }
+};
+var GLOBAL_OBJECT_HOVERS = {
+  window: { type: "Window & typeof globalThis", description: "The global window object represents the browser window. Provides access to the DOM, browser APIs, and global variables." },
+  document: { type: "Document", description: "The Document interface represents the web page loaded in the browser. Entry point to the DOM tree." },
+  console: { type: "Console", description: "Provides access to the browser's debugging console with methods like `log()`, `error()`, `warn()`, etc." },
+  navigator: { type: "Navigator", description: "Represents the state and identity of the user agent (browser). Provides information about the browser and device." },
+  location: { type: "Location", description: "Represents the URL of the current document and provides methods to manipulate the browser's location." },
+  localStorage: { type: "Storage", description: "Provides access to the browser's local storage. Data persists even after the browser is closed." },
+  sessionStorage: { type: "Storage", description: "Provides access to the browser's session storage. Data is cleared when the page session ends." },
+  history: { type: "History", description: "Provides an interface for manipulating the browser session history (pages visited in the tab/frame)." },
+  Math: { type: "Math", description: "Built-in object with properties and methods for mathematical constants and functions." },
+  JSON: { type: "JSON", description: "Provides methods for parsing JSON and converting values to JSON: `parse()` and `stringify()`." },
+  globalThis: { type: "typeof globalThis", description: "Provides a standard way to access the global object across different JavaScript environments." }
+};
+var HTML_TAGS = new Set([
+  "div",
+  "span",
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "strong",
+  "em",
+  "a",
+  "img",
+  "button",
+  "input",
+  "form",
+  "label",
+  "ul",
+  "ol",
+  "li",
+  "table",
+  "tr",
+  "td",
+  "th",
+  "thead",
+  "tbody",
+  "select",
+  "option",
+  "textarea",
+  "header",
+  "footer",
+  "nav",
+  "main",
+  "body",
+  "section",
+  "article",
+  "aside",
+  "code",
+  "pre",
+  "hr",
+  "br"
+]);
+var HTML_TAG_DESCRIPTIONS = {
+  body: "Main content of the HTML document. Contains all content that is visible to the user.",
+  div: "Generic container element for flow content with no semantic meaning.",
+  span: "Generic inline container with no semantic meaning. Used for styling or grouping text.",
+  p: "Paragraph element representing a block of text.",
+  strong: "Indicates strong importance. Text is typically displayed in bold.",
+  em: "Marks text that has stress emphasis. Text is typically displayed in italic.",
+  a: "Anchor element for creating hyperlinks to other pages, files, or locations.",
+  img: "Embeds an image into the document. Self-closing tag requiring src attribute.",
+  button: "Clickable button element for forms or interactive elements.",
+  input: "Form input element for user data entry. Requires type attribute.",
+  form: "Container for a form with inputs and controls for user submission.",
+  ul: "Unordered list container. Contains li elements.",
+  ol: "Ordered (numbered) list container. Contains li elements.",
+  li: "List item element. Used within ul or ol containers.",
+  table: "Container for tabular data with rows and columns.",
+  pre: "Preformatted text element. Preserves whitespace and line breaks.",
+  code: "Represents computer code within a document.",
+  label: "Label for a form element. Improves accessibility and usability."
+};
+function htmlTagDescription(tag) {
+  if (/^h[1-6]$/.test(tag))
+    return `Level ${tag.slice(1)} heading element. H1 is most important, H6 is least important.`;
+  return HTML_TAG_DESCRIPTIONS[tag] ?? `HTML ${tag} element`;
+}
+
 // ../vscode/src/providers/hoverProvider.ts
 function appendDiagnosticInfo(hover, document, position) {
   const diagnostics = vscode2.languages.getDiagnostics(document.uri);
@@ -1442,6 +1888,23 @@ function createHoverProvider(virtualTsDocumentProvider) {
         return null;
       }
       const word = document.getText(wordRange);
+      const source = document.getText();
+      const sourceOffset = document.offsetAt(position);
+      const attributeContext = getStxAttributeAtOffset(source, sourceOffset);
+      if (attributeContext) {
+        const definition = getStxAttributeDefinition(attributeContext.name);
+        if (definition) {
+          const hover = new vscode2.MarkdownString;
+          hover.appendMarkdown(definition.description);
+          hover.appendMarkdown(`
+
+**Syntax**
+`);
+          hover.appendCodeblock(stxSnippetPreview(definition.snippet), "stx");
+          const range = new vscode2.Range(document.positionAt(attributeContext.start), document.positionAt(attributeContext.end));
+          return createHoverWithDiagnostics(hover, document, position, range);
+        }
+      }
       const line = document.lineAt(position.line).text;
       const textBeforeWord = document.getText(new vscode2.Range(new vscode2.Position(position.line, 0), wordRange.start));
       const propertyAccessMatch = textBeforeWord.match(/(\w+)\.$/);
@@ -1520,100 +1983,20 @@ ${propDetail.description}`);
           }
         }
       }
-      const jsOperators = ["typeof", "instanceof", "delete", "in", "of"];
-      if (jsOperators.includes(word)) {
+      const operatorDocumentation = JAVASCRIPT_OPERATOR_HOVERS[word];
+      if (operatorDocumentation) {
         const hover = new vscode2.MarkdownString;
         hover.isTrusted = true;
         hover.supportHtml = true;
-        let description = "";
-        switch (word) {
-          case "typeof":
-            hover.appendCodeblock("typeof operand", "typescript");
-            hover.appendText(`
-
-`);
-            description = '**JavaScript Operator**\n\nReturns a string indicating the type of the operand.\n\n**Possible return values:**\n- `"string"` - for string values\n- `"number"` - for number values\n- `"boolean"` - for boolean values\n- `"object"` - for objects and null\n- `"function"` - for functions\n- `"undefined"` - for undefined\n- `"symbol"` - for symbols\n- `"bigint"` - for BigInt values';
-            break;
-          case "instanceof":
-            hover.appendCodeblock("object instanceof Constructor", "typescript");
-            hover.appendText(`
-
-`);
-            description = "**JavaScript Operator**\n\nTests whether an object has in its prototype chain the prototype property of a constructor. Returns `true` or `false`.";
-            break;
-          case "delete":
-            hover.appendCodeblock("delete object.property", "typescript");
-            hover.appendText(`
-
-`);
-            description = "**JavaScript Operator**\n\nRemoves a property from an object. Returns `true` if successful.";
-            break;
-          case "in":
-            hover.appendCodeblock('"property" in object', "typescript");
-            hover.appendText(`
-
-`);
-            description = "**JavaScript Operator**\n\nReturns `true` if the specified property is in the specified object or its prototype chain.";
-            break;
-          case "of":
-            hover.appendCodeblock("for (const item of iterable)", "typescript");
-            hover.appendText(`
+        hover.appendCodeblock(operatorDocumentation.syntax, "typescript");
+        hover.appendText(`
 
 `);
-            description = "**JavaScript Keyword**\n\nUsed in `for...of` loops to iterate over iterable objects (Arrays, Strings, Maps, Sets, etc.).";
-            break;
-        }
-        hover.appendMarkdown(description);
+        hover.appendMarkdown(operatorDocumentation.description);
         return createHoverWithDiagnostics(hover, document, position);
       }
-      const globalObjects = {
-        window: {
-          type: "Window & typeof globalThis",
-          description: "The global window object represents the browser window. Provides access to the DOM, browser APIs, and global variables."
-        },
-        document: {
-          type: "Document",
-          description: "The Document interface represents the web page loaded in the browser. Entry point to the DOM tree."
-        },
-        console: {
-          type: "Console",
-          description: "Provides access to the browser's debugging console with methods like `log()`, `error()`, `warn()`, etc."
-        },
-        navigator: {
-          type: "Navigator",
-          description: "Represents the state and identity of the user agent (browser). Provides information about the browser and device."
-        },
-        location: {
-          type: "Location",
-          description: "Represents the URL of the current document and provides methods to manipulate the browser's location."
-        },
-        localStorage: {
-          type: "Storage",
-          description: "Provides access to the browser's local storage. Data persists even after the browser is closed."
-        },
-        sessionStorage: {
-          type: "Storage",
-          description: "Provides access to the browser's session storage. Data is cleared when the page session ends."
-        },
-        history: {
-          type: "History",
-          description: "Provides an interface for manipulating the browser session history (pages visited in the tab/frame)."
-        },
-        Math: {
-          type: "Math",
-          description: "Built-in object with properties and methods for mathematical constants and functions."
-        },
-        JSON: {
-          type: "JSON",
-          description: "Provides methods for parsing JSON and converting values to JSON: `parse()` and `stringify()`."
-        },
-        globalThis: {
-          type: "typeof globalThis",
-          description: "Provides a standard way to access the global object across different JavaScript environments."
-        }
-      };
-      if (word in globalObjects) {
-        const global = globalObjects[word];
+      const global = GLOBAL_OBJECT_HOVERS[word];
+      if (global) {
         const hover = new vscode2.MarkdownString;
         hover.isTrusted = true;
         hover.supportHtml = true;
@@ -1968,8 +2351,7 @@ ${cssStyles.join(`
         const htmlTagOpening = line.includes(`<${word}`);
         const htmlTagClosing = line.includes(`</${word}`);
         const isHtmlTag = htmlTagOpening || htmlTagClosing || line.match(new RegExp(`<${word}[\\s>]`)) !== null;
-        const htmlTags = ["div", "span", "p", "h1", "h2", "h3", "h4", "h5", "h6", "strong", "em", "a", "img", "button", "input", "form", "label", "ul", "ol", "li", "table", "tr", "td", "th", "thead", "tbody", "select", "option", "textarea", "header", "footer", "nav", "main", "body", "section", "article", "aside", "code", "pre", "hr", "br"];
-        if (htmlTags.includes(word) && isHtmlTag) {
+        if (HTML_TAGS.has(word) && isHtmlTag) {
           const hover = new vscode2.MarkdownString;
           hover.isTrusted = true;
           hover.supportHtml = true;
@@ -1977,75 +2359,7 @@ ${cssStyles.join(`
           hover.appendText(`
 
 `);
-          let tagDescription = "";
-          switch (word) {
-            case "body":
-              tagDescription = "Main content of the HTML document. Contains all content that is visible to the user.";
-              break;
-            case "div":
-              tagDescription = "Generic container element for flow content with no semantic meaning.";
-              break;
-            case "span":
-              tagDescription = "Generic inline container with no semantic meaning. Used for styling or grouping text.";
-              break;
-            case "p":
-              tagDescription = "Paragraph element representing a block of text.";
-              break;
-            case "h1":
-            case "h2":
-            case "h3":
-            case "h4":
-            case "h5":
-            case "h6":
-              tagDescription = `Level ${word.substring(1)} heading element. H1 is most important, H6 is least important.`;
-              break;
-            case "strong":
-              tagDescription = "Indicates strong importance. Text is typically displayed in bold.";
-              break;
-            case "em":
-              tagDescription = "Marks text that has stress emphasis. Text is typically displayed in italic.";
-              break;
-            case "a":
-              tagDescription = "Anchor element for creating hyperlinks to other pages, files, or locations.";
-              break;
-            case "img":
-              tagDescription = "Embeds an image into the document. Self-closing tag requiring src attribute.";
-              break;
-            case "button":
-              tagDescription = "Clickable button element for forms or interactive elements.";
-              break;
-            case "input":
-              tagDescription = "Form input element for user data entry. Requires type attribute.";
-              break;
-            case "form":
-              tagDescription = "Container for a form with inputs and controls for user submission.";
-              break;
-            case "ul":
-              tagDescription = "Unordered list container. Contains li elements.";
-              break;
-            case "ol":
-              tagDescription = "Ordered (numbered) list container. Contains li elements.";
-              break;
-            case "li":
-              tagDescription = "List item element. Used within ul or ol containers.";
-              break;
-            case "table":
-              tagDescription = "Container for tabular data with rows and columns.";
-              break;
-            case "pre":
-              tagDescription = "Preformatted text element. Preserves whitespace and line breaks.";
-              break;
-            case "code":
-              tagDescription = "Represents computer code within a document.";
-              break;
-            case "label":
-              tagDescription = "Label for a form element. Improves accessibility and usability.";
-              break;
-            default:
-              tagDescription = `HTML ${word} element`;
-              break;
-          }
-          hover.appendMarkdown(tagDescription);
+          hover.appendMarkdown(htmlTagDescription(word));
           hover.appendMarkdown(`
 
 [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/${word})`);
@@ -2075,120 +2389,15 @@ ${cssStyles.join(`
           }
         }
       }
-      const atPosition = line.indexOf("@");
-      const wordAfterAt = atPosition >= 0 && position.character > atPosition;
-      const directiveMatch = line.match(/@(\w+)/);
-      const possibleDirective = directiveMatch ? directiveMatch[1] : null;
-      const isAtOrDirective = word.startsWith("@") || word === possibleDirective || wordAfterAt;
+      const directiveContext = getStxDirectiveAtOffset(line, position.character);
+      const isAtOrDirective = directiveContext !== undefined;
       if (isAtOrDirective) {
-        let directiveName = word;
-        if (word.startsWith("@")) {
-          directiveName = word.substring(1);
-        } else if (wordAfterAt && possibleDirective === word) {
-          directiveName = word;
-        }
+        const directiveName = directiveContext.name;
         if (directiveName.length === 0 || directiveName === "@") {
           return null;
         }
-        const validDirectives = [
-          "if",
-          "else",
-          "elseif",
-          "elif",
-          "endif",
-          "unless",
-          "endunless",
-          "for",
-          "endfor",
-          "foreach",
-          "endforeach",
-          "forelse",
-          "endforelse",
-          "while",
-          "endwhile",
-          "switch",
-          "case",
-          "default",
-          "endswitch",
-          "break",
-          "continue",
-          "component",
-          "endcomponent",
-          "slot",
-          "endslot",
-          "webcomponent",
-          "endwebcomponent",
-          "ts",
-          "endts",
-          "js",
-          "endjs",
-          "script",
-          "endscript",
-          "css",
-          "endcss",
-          "json",
-          "markdown",
-          "endmarkdown",
-          "raw",
-          "endraw",
-          "verbatim",
-          "endverbatim",
-          "t",
-          "translate",
-          "extends",
-          "section",
-          "endsection",
-          "yield",
-          "parent",
-          "stack",
-          "push",
-          "endpush",
-          "pushif",
-          "endpushif",
-          "pushonce",
-          "endpushonce",
-          "prepend",
-          "endprepend",
-          "prependonce",
-          "endprependonce",
-          "include",
-          "includeif",
-          "includewhen",
-          "includeunless",
-          "includefirst",
-          "auth",
-          "endauth",
-          "guest",
-          "endguest",
-          "can",
-          "endcan",
-          "cannot",
-          "endcannot",
-          "elsecan",
-          "env",
-          "endenv",
-          "isset",
-          "endisset",
-          "empty",
-          "endempty",
-          "error",
-          "enderror",
-          "hassection",
-          "once",
-          "endonce",
-          "use",
-          "csrf",
-          "method",
-          "locale",
-          "transition",
-          "endtransition",
-          "motion",
-          "endmotion",
-          "animationgroup",
-          "scrollanimate",
-          "endscrollanimate"
-        ];
-        if (!validDirectives.includes(directiveName.toLowerCase())) {
+        const directiveDefinition = STX_DIRECTIVE_BY_NAME.get(directiveName.toLowerCase());
+        if (!directiveDefinition) {
           return null;
         }
         const hover = new vscode2.MarkdownString;
@@ -3765,8 +3974,13 @@ errors.notFound: "Page not found"`, "yaml");
             }
             return createHoverWithDiagnostics(hover, document, position);
           default:
-            description = `stx directive: @${directiveName}`;
+            description = directiveDefinition.description;
             hover.appendMarkdown(description);
+            hover.appendMarkdown(`
+
+**Syntax**
+`);
+            hover.appendCodeblock(stxSnippetPreview(directiveDefinition.snippet ?? `@${directiveDefinition.name}`), "stx");
             return createHoverWithDiagnostics(hover, document, position);
         }
       }
@@ -3982,7 +4196,6 @@ errors.notFound: "Page not found"`, "yaml");
         const arrowFunctionMatch = tsContent.match(new RegExp(`const\\s+${word}\\s*=\\s*\\([^)]*\\)\\s*:[^=]+=>`, "s"));
         const isArrowFunction = arrowFunctionMatch !== null;
         const htmlTagMatch = line.match(new RegExp(`<(/)?${word}(\\s|/?>|$)`));
-        const commonHtmlTags = ["div", "span", "p", "h1", "h2", "h3", "h4", "h5", "h6", "strong", "em", "a", "img", "button", "input", "form", "label", "ul", "ol", "li", "table", "tr", "td", "th", "pre", "code", "body", "html", "head", "header", "footer", "main", "section", "article", "aside"];
         const isActuallyHtmlTag = htmlTagMatch !== null;
         const isInCodeContext = isInScriptTag(document, position) || line.includes("@ts") || line.includes("{{");
         const mightBeHtmlTag = isActuallyHtmlTag && !isInCodeContext;
@@ -4352,6 +4565,7 @@ function createCompletionProvider() {
     provideCompletionItems(document, position, token, context) {
       const config = vscode3.workspace.getConfiguration("stx.completion");
       const completionEnabled = config.get("enable", true);
+      const showSnippets = config.get("showSnippets", true);
       if (!completionEnabled) {
         return;
       }
@@ -4363,21 +4577,26 @@ function createCompletionProvider() {
       console.log(`stx Completion - Processing document: ${document.fileName} (language: ${document.languageId})`);
       const line = document.lineAt(position.line).text;
       const linePrefix = line.substring(0, position.character);
+      const sourceBeforeCursor = document.getText().slice(0, document.offsetAt(position));
+      const attributeContext = getStxAttributeCompletionContext(sourceBeforeCursor);
       console.log(`stx Completion - Processing line prefix: "${linePrefix}"`);
       console.log(`stx Completion - Trigger character: "${context?.triggerCharacter || "none"}"`);
+      if (attributeContext) {
+        return getAttributeDirectiveCompletions(attributeContext.prefix, position, showSnippets);
+      }
       if (context?.triggerCharacter === "@") {
         console.log(`stx Completion - Triggered by @ character, showing all directives`);
-        return getAllDirectiveCompletions();
+        return getAllDirectiveCompletions(showSnippets);
       }
-      const directiveMatch = linePrefix.match(/@([a-z]*)$/i);
+      const directiveMatch = linePrefix.match(/@([a-z:]*)$/i);
       if (directiveMatch) {
         const prefix = directiveMatch[1].toLowerCase();
         console.log(`stx Completion - Found directive prefix: "${prefix}"`);
-        return getFilteredDirectiveCompletions(prefix);
+        return getFilteredDirectiveCompletions(prefix, showSnippets);
       }
       if (linePrefix.endsWith("@")) {
         console.log(`stx Completion - Line ends with @, showing all directives`);
-        return getAllDirectiveCompletions();
+        return getAllDirectiveCompletions(showSnippets);
       }
       if (linePrefix.includes("@transition(")) {
         console.log(`stx Completion - Detected @transition parameters context`);
@@ -4411,113 +4630,31 @@ function createCompletionProvider() {
     }
   };
 }
-function getAllDirectiveCompletions() {
-  return createDirectiveItems(getAllDirectives());
+function getAttributeDirectiveCompletions(prefix, position, showSnippets) {
+  const normalizedPrefix = prefix.toLowerCase();
+  const directives = STX_ATTRIBUTE_DIRECTIVES.filter((directive) => directive.name.toLowerCase().startsWith(normalizedPrefix));
+  const start = position.translate(0, -prefix.length);
+  const range = new vscode3.Range(start, position);
+  return directives.map((directive) => createAttributeDirectiveItem(directive, range, showSnippets));
 }
-function getFilteredDirectiveCompletions(prefix) {
-  const allDirectives = getAllDirectives();
-  const filteredDirectives = allDirectives.filter((d) => d.name.toLowerCase().includes(prefix.toLowerCase()));
-  console.log(`stx Completion - Filtered directives: ${filteredDirectives.map((d) => d.name).join(", ")}`);
-  return createDirectiveItems(filteredDirectives);
+function createAttributeDirectiveItem(directive, range, showSnippets) {
+  const item = new vscode3.CompletionItem(directive.name, vscode3.CompletionItemKind.Property);
+  item.detail = `stx ${directive.name} attribute`;
+  item.documentation = new vscode3.MarkdownString(directive.description);
+  item.insertText = showSnippets ? new vscode3.SnippetString(directive.snippet) : directive.name;
+  item.range = range;
+  item.sortText = directive.name.startsWith(":") ? `0${directive.name}` : `1${directive.name}`;
+  return item;
 }
-function getAllDirectives() {
-  return [
-    { name: "transition", description: "Applies transition animations to an element" },
-    { name: "motion", description: "Controls animation display based on user preferences" },
-    { name: "animationGroup", description: "Groups elements for coordinated animations" },
-    { name: "scrollAnimate", description: "Triggers animation when element scrolls into view" },
-    { name: "translate", description: "Translate a string using the i18n system" },
-    { name: "t", description: "Short alias for translate directive" },
-    { name: "if", description: "Conditional rendering" },
-    { name: "else", description: "Alternative rendering for conditionals" },
-    { name: "elseif", description: "Alternative condition for if statement" },
-    { name: "unless", description: "Inverse conditional rendering" },
-    { name: "foreach", description: "Iterates over an array or collection" },
-    { name: "for", description: "Standard for loop" },
-    { name: "while", description: "While loop" },
-    { name: "forelse", description: "Loop with fallback when collection is empty" },
-    { name: "switch", description: "Switch statement for multiple conditions" },
-    { name: "case", description: "Case option in switch statement" },
-    { name: "default", description: "Default case in switch statement" },
-    { name: "break", description: "Break from loop or switch" },
-    { name: "continue", description: "Continue to next iteration" },
-    { name: "component", description: "Renders a component" },
-    { name: "slot", description: "Define a named slot in a component" },
-    { name: "webcomponent", description: "Include a web component" },
-    { name: "ts", description: "TypeScript code block" },
-    { name: "js", description: "JavaScript code block" },
-    { name: "script", description: "Script code block (alternative to @ts)" },
-    { name: "css", description: "CSS code block" },
-    { name: "json", description: "Output variable as JSON" },
-    { name: "markdown", description: "Markdown content block" },
-    { name: "raw", description: "Display content without processing expressions" },
-    { name: "verbatim", description: "Display content without processing directives" },
-    { name: "extends", description: "Extend a base layout" },
-    { name: "section", description: "Define a content section" },
-    { name: "yield", description: "Output the contents of a section" },
-    { name: "parent", description: "Include parent section content" },
-    { name: "stack", description: "Define a stack for pushing content" },
-    { name: "push", description: "Push content to a stack" },
-    { name: "pushIf", description: "Conditionally push content to a stack" },
-    { name: "pushOnce", description: "Push content to a stack only once" },
-    { name: "prepend", description: "Prepend content to a stack" },
-    { name: "prependOnce", description: "Prepend content to a stack only once" },
-    { name: "include", description: "Include another template file" },
-    { name: "includeIf", description: "Conditionally include a template" },
-    { name: "includeWhen", description: "Include template when condition is true" },
-    { name: "includeUnless", description: "Include template unless condition is true" },
-    { name: "includeFirst", description: "Include the first existing template from a list" },
-    { name: "auth", description: "Content visible only to authenticated users" },
-    { name: "guest", description: "Content visible only to guests" },
-    { name: "can", description: "Check if user has permission" },
-    { name: "cannot", description: "Check if user lacks permission" },
-    { name: "env", description: "Check environment condition" },
-    { name: "isset", description: "Check if a variable is set" },
-    { name: "empty", description: "Check if a variable is empty" },
-    { name: "error", description: "Display validation error for a field" },
-    { name: "hasSection", description: "Check if a section exists" },
-    { name: "once", description: "Include content only once per rendering cycle" },
-    { name: "use", description: "Import a class or namespace" },
-    { name: "csrf", description: "Include CSRF protection token" },
-    { name: "method", description: "Specify form submission method" },
-    { name: "locale", description: "Set locale for content" },
-    { name: "endtransition", description: "Ends a transition block" },
-    { name: "endmotion", description: "Ends a motion block" },
-    { name: "endif", description: "Ends an if block" },
-    { name: "endunless", description: "Ends an unless block" },
-    { name: "endfor", description: "Ends a for loop block" },
-    { name: "endforeach", description: "Ends a foreach loop block" },
-    { name: "endforelse", description: "Ends a forelse loop block" },
-    { name: "endwhile", description: "Ends a while loop block" },
-    { name: "endswitch", description: "Ends a switch block" },
-    { name: "endts", description: "Ends a TypeScript code block" },
-    { name: "endjs", description: "Ends a JavaScript code block" },
-    { name: "endscript", description: "Ends a script code block" },
-    { name: "endcss", description: "Ends a CSS code block" },
-    { name: "endmarkdown", description: "Ends a markdown block" },
-    { name: "endraw", description: "Ends a raw content block" },
-    { name: "endverbatim", description: "Ends a verbatim block" },
-    { name: "endcomponent", description: "Ends a component block" },
-    { name: "endslot", description: "Ends a slot block" },
-    { name: "endsection", description: "Ends a section block" },
-    { name: "endpush", description: "Ends a push block" },
-    { name: "endpushIf", description: "Ends a pushIf block" },
-    { name: "endpushOnce", description: "Ends a pushOnce block" },
-    { name: "endprepend", description: "Ends a prepend block" },
-    { name: "endprependOnce", description: "Ends a prependOnce block" },
-    { name: "endauth", description: "Ends an auth block" },
-    { name: "endguest", description: "Ends a guest block" },
-    { name: "endcan", description: "Ends a can block" },
-    { name: "endcannot", description: "Ends a cannot block" },
-    { name: "endempty", description: "Ends an empty block" },
-    { name: "endenv", description: "Ends an env block" },
-    { name: "endisset", description: "Ends an isset block" },
-    { name: "enderror", description: "Ends an error block" },
-    { name: "endonce", description: "Ends a once block" },
-    { name: "endwebcomponent", description: "Ends a webcomponent block" }
-  ];
+function getAllDirectiveCompletions(showSnippets) {
+  return createDirectiveItems(STX_DIRECTIVES, showSnippets);
+}
+function getFilteredDirectiveCompletions(prefix, showSnippets) {
+  const filteredDirectives = STX_DIRECTIVES.filter((d) => d.name.toLowerCase().includes(prefix.toLowerCase()));
+  console.log(`stx Completion - Filtered directives: ${filteredDirectives.map((d) => d.name).join(", ")}`);
+  return createDirectiveItems(filteredDirectives, showSnippets);
 }
-function createDirectiveItems(directives) {
+function createDirectiveItems(directives, showSnippets) {
   return directives.map((directive) => {
     const item = new vscode3.CompletionItem(`@${directive.name}`, vscode3.CompletionItemKind.Snippet);
     item.detail = `stx ${directive.name} directive`;
@@ -4712,9 +4849,11 @@ function createDirectiveItems(directives) {
         item.insertText = new vscode3.SnippetString("@animationGroup(${1:groupName}, ${2:#selector1})");
         break;
       default:
-        item.insertText = new vscode3.SnippetString(`@${directive.name}`);
+        item.insertText = new vscode3.SnippetString(directive.snippet ?? `@${directive.name}`);
         break;
     }
+    if (!showSnippets)
+      item.insertText = `@${directive.name}`;
     if (["transition", "motion", "translate", "component", "if", "foreach"].includes(directive.name)) {
       item.sortText = `0${directive.name}`;
     } else {
@@ -4861,20 +5000,122 @@ function createPropsCompletions(document, partialProp) {
 // ../vscode/src/providers/definitionProvider.ts
 import * as vscode5 from "vscode";
 
+// ../vscode/src/utils/template-paths.ts
+var TEMPLATE_SEARCH_DIRECTORIES = [
+  "",
+  "views",
+  "templates",
+  "resources/views",
+  "resources/templates",
+  "src/views",
+  "src/templates",
+  "app/views",
+  "partials",
+  "components",
+  "layouts",
+  "examples/partials",
+  "examples/components"
+];
+var COMPONENT_SEARCH_DIRECTORIES = [
+  "components",
+  "resources/views/components",
+  "src/components",
+  "app/components",
+  "ui",
+  "src/ui"
+];
+var TEMPLATE_DIRECTIVE_PATTERN = /@(includeFirst|includeUnless|includeWhen|includeIf|include|webcomponent|component)\s*\(/g;
+function argumentStart(source, openParen, targetArgument) {
+  if (targetArgument === 0)
+    return openParen + 1;
+  let argument = 0;
+  let depth = 0;
+  let quote = "";
+  for (let index = openParen + 1;index < source.length; index++) {
+    const character = source[index];
+    if (quote) {
+      if (character === "\\")
+        index++;
+      else if (character === quote)
+        quote = "";
+      continue;
+    }
+    if (character === "'" || character === '"' || character === "`") {
+      quote = character;
+    } else if (character === "(" || character === "[" || character === "{") {
+      depth++;
+    } else if (character === ")" || character === "]" || character === "}") {
+      if (character === ")" && depth === 0)
+        return;
+      depth--;
+    } else if (character === "," && depth === 0) {
+      argument++;
+      if (argument === targetArgument)
+        return index + 1;
+    }
+  }
+  return;
+}
+function quotedReferences(source, start, end = source.length) {
+  const references = [];
+  for (let index = start;index < end; index++) {
+    const quote = source[index];
+    if (quote !== "'" && quote !== '"' && quote !== "`")
+      continue;
+    const pathStart = index + 1;
+    let pathEnd = pathStart;
+    while (pathEnd < end && source[pathEnd] !== quote) {
+      if (source[pathEnd] === "\\")
+        pathEnd++;
+      pathEnd++;
+    }
+    if (pathEnd < end) {
+      references.push({ path: source.slice(pathStart, pathEnd), start: pathStart, end: pathEnd });
+      index = pathEnd;
+    }
+  }
+  return references;
+}
+function getTemplatePathCompletionContext(linePrefix) {
+  TEMPLATE_DIRECTIVE_PATTERN.lastIndex = 0;
+  const directives = [...linePrefix.matchAll(TEMPLATE_DIRECTIVE_PATTERN)];
+  const directive = directives[directives.length - 1];
+  if (!directive)
+    return;
+  const name = directive[1];
+  const openParen = directive.index + directive[0].lastIndexOf("(");
+  const targetArgument = name === "includeWhen" || name === "includeUnless" ? 1 : 0;
+  const start = argumentStart(linePrefix, openParen, targetArgument);
+  if (start === undefined)
+    return;
+  const argument = linePrefix.slice(start);
+  const pathMatch = name === "includeFirst" ? argument.match(/\[[\s\S]*['"`]([^'"`]*)$/) : argument.match(/^\s*['"`]([^'"`]*)$/);
+  return pathMatch ? { kind: name === "component" || name === "webcomponent" ? "component" : "include", path: pathMatch[1] } : undefined;
+}
+function findTemplatePathReferences(line) {
+  const references = [];
+  TEMPLATE_DIRECTIVE_PATTERN.lastIndex = 0;
+  for (const directive of line.matchAll(TEMPLATE_DIRECTIVE_PATTERN)) {
+    const name = directive[1];
+    const openParen = directive.index + directive[0].lastIndexOf("(");
+    const targetArgument = name === "includeWhen" || name === "includeUnless" ? 1 : 0;
+    const start = argumentStart(line, openParen, targetArgument);
+    if (start === undefined)
+      continue;
+    const kind = name === "component" || name === "webcomponent" ? "component" : "include";
+    const candidates = name === "includeFirst" ? quotedReferences(line, line.indexOf("[", start) + 1, line.indexOf("]", start)) : quotedReferences(line, start).slice(0, 1);
+    for (const candidate of candidates)
+      references.push({ kind, ...candidate });
+  }
+  return references.sort((a, b) => a.start - b.start);
+}
+
 // ../vscode/src/utils/templateUtils.ts
 import * as fs2 from "node:fs";
 import * as path3 from "node:path";
 import * as vscode4 from "vscode";
 function extractTemplatePath(line) {
-  const regularMatch = line.match(/@(?:include|component)\s*\(\s*['"]([^'"]+)['"]/);
-  if (regularMatch && regularMatch[1]) {
-    return regularMatch[1];
-  }
-  const conditionalMatch = line.match(/@(?:includeIf|includeWhen|includeUnless|includeFirst)\s*\([^,]*,\s*['"]([^'"]+)['"]/);
-  if (conditionalMatch && conditionalMatch[1]) {
-    return conditionalMatch[1];
-  }
-  return null;
+  return findTemplatePathReferences(line)[0]?.path ?? null;
 }
 function normalizeTemplatePath(templatePath) {
   let normalizedPath = templatePath.replace(/\./g, "/");
@@ -4894,18 +5135,11 @@ function resolveTemplatePath(documentUri, templatePath) {
   if (fs2.existsSync(relativePath)) {
     return vscode4.Uri.file(relativePath);
   }
-  const searchDirs = [
-    "",
-    "views",
-    "templates",
-    "partials",
-    "components",
-    "resources/views",
-    "resources/templates",
-    "examples/partials",
-    "examples/components"
-  ];
-  for (const dir of searchDirs) {
+  const searchDirectories = [...new Set([
+    ...TEMPLATE_SEARCH_DIRECTORIES,
+    ...COMPONENT_SEARCH_DIRECTORIES
+  ])];
+  for (const dir of searchDirectories) {
     const fullPath = path3.join(workspaceFolder.uri.fsPath, dir, normalizedPath);
     if (fs2.existsSync(fullPath)) {
       return vscode4.Uri.file(fullPath);
@@ -4915,45 +5149,27 @@ function resolveTemplatePath(documentUri, templatePath) {
 }
 function getTemplatePathRange(document, line) {
   const lineText = document.lineAt(line).text;
-  const regularMatch = lineText.match(/@(?:include|component)\s*\(\s*(['"])([^'"]+)\1/);
-  if (regularMatch) {
-    const startPos = lineText.indexOf(regularMatch[2], regularMatch.index);
-    const endPos = startPos + regularMatch[2].length;
-    return new vscode4.Range(new vscode4.Position(line, startPos), new vscode4.Position(line, endPos));
-  }
-  const conditionalMatch = lineText.match(/@(?:includeIf|includeWhen|includeUnless|includeFirst)\s*\([^,]*,\s*(['"])([^'"]+)\1/);
-  if (conditionalMatch) {
-    const startPos = lineText.indexOf(conditionalMatch[2], conditionalMatch.index);
-    const endPos = startPos + conditionalMatch[2].length;
-    return new vscode4.Range(new vscode4.Position(line, startPos), new vscode4.Position(line, endPos));
-  }
-  return null;
+  const reference = findTemplatePathReferences(lineText)[0];
+  return reference ? new vscode4.Range(line, reference.start, line, reference.end) : null;
 }
 
 // ../vscode/src/providers/definitionProvider.ts
 function createDefinitionProvider(virtualTsDocumentProvider) {
   return {
     async provideDefinition(document, position, token) {
+      const line = document.lineAt(position.line).text;
+      const templateReference = findTemplatePathReferences(line).find((reference) => position.character >= reference.start && position.character <= reference.end);
+      if (templateReference) {
+        const resolvedUri = resolveTemplatePath(document.uri, templateReference.path);
+        if (resolvedUri) {
+          return new vscode5.Location(resolvedUri, new vscode5.Position(0, 0));
+        }
+      }
       const wordRange = document.getWordRangeAtPosition(position);
       if (!wordRange) {
         return null;
       }
       const word = document.getText(wordRange);
-      const line = document.lineAt(position.line).text;
-      const isRegularDirective = /@(include|component)\s*\(/.test(line);
-      const isConditionalDirective = /@(includeIf|includeWhen|includeUnless|includeFirst)\s*\([^,]*,/.test(line);
-      if (isRegularDirective || isConditionalDirective) {
-        const templatePath = extractTemplatePath(line);
-        if (templatePath) {
-          const templatePathRange = getTemplatePathRange(document, position.line);
-          if (templatePathRange && templatePathRange.contains(position)) {
-            const resolvedUri = resolveTemplatePath(document.uri, templatePath);
-            if (resolvedUri) {
-              return new vscode5.Location(resolvedUri, new vscode5.Position(0, 0));
-            }
-          }
-        }
-      }
       const classAttributeRegex = /(class|className)\s*=\s*["']([^"']*)["']/g;
       let classAttributeMatch;
       let isInClassAttribute = false;
@@ -5038,43 +5254,6 @@ function createDiagnosticsProvider(context) {
   }));
   return diagnosticCollection;
 }
-var directivePairs = {
-  if: "endif",
-  unless: "endunless",
-  for: "endfor",
-  foreach: "endforeach",
-  forelse: "endforelse",
-  while: "endwhile",
-  switch: "endswitch",
-  ts: "endts",
-  js: "endjs",
-  script: "endscript",
-  css: "endcss",
-  markdown: "endmarkdown",
-  raw: "endraw",
-  verbatim: "endverbatim",
-  component: "endcomponent",
-  slot: "endslot",
-  webcomponent: "endwebcomponent",
-  section: "endsection",
-  push: "endpush",
-  pushIf: "endpushIf",
-  pushOnce: "endpushOnce",
-  prepend: "endprepend",
-  prependOnce: "endprependOnce",
-  auth: "endauth",
-  guest: "endguest",
-  can: "endcan",
-  cannot: "endcannot",
-  env: "endenv",
-  isset: "endisset",
-  empty: "endempty",
-  error: "enderror",
-  once: "endonce",
-  transition: "endtransition",
-  motion: "endmotion",
-  scrollAnimate: "endscrollAnimate"
-};
 function updateDiagnostics(document, diagnosticCollection) {
   const config = vscode6.workspace.getConfiguration("stx.diagnostics");
   const diagnosticsEnabled = config.get("enable", true);
@@ -5098,7 +5277,7 @@ function updateDiagnostics(document, diagnosticCollection) {
     while (match !== null) {
       const directiveName = match[1];
       const position = match.index + 1;
-      if (directivePairs[directiveName]) {
+      if (STX_DIRECTIVE_PAIRS[directiveName]) {
         stack.push({
           name: directiveName,
           line: lineNum,
@@ -5107,14 +5286,14 @@ function updateDiagnostics(document, diagnosticCollection) {
       } else {
         const isEndDirective = directiveName.startsWith("end");
         if (isEndDirective) {
-          const openingName = Object.keys(directivePairs).find((key) => directivePairs[key] === directiveName);
+          const openingName = STX_OPENING_DIRECTIVE_BY_CLOSE.get(directiveName);
           if (openingName && validateMismatched) {
             if (stack.length > 0) {
               const lastOpening = stack[stack.length - 1];
               if (lastOpening.name === openingName) {
                 stack.pop();
               } else {
-                const diagnostic = new vscode6.Diagnostic(new vscode6.Range(new vscode6.Position(lineNum, position), new vscode6.Position(lineNum, position + directiveName.length)), `Mismatched directive. Expected @${directivePairs[lastOpening.name]} but found @${directiveName}`, vscode6.DiagnosticSeverity.Error);
+                const diagnostic = new vscode6.Diagnostic(new vscode6.Range(new vscode6.Position(lineNum, position), new vscode6.Position(lineNum, position + directiveName.length)), `Mismatched directive. Expected @${STX_DIRECTIVE_PAIRS[lastOpening.name]} but found @${directiveName}`, vscode6.DiagnosticSeverity.Error);
                 diagnostic.source = "stx";
                 diagnostics.push(diagnostic);
               }
@@ -5135,7 +5314,7 @@ function updateDiagnostics(document, diagnosticCollection) {
   }
   if (validateUnclosed) {
     for (const unclosed of stack) {
-      const diagnostic = new vscode6.Diagnostic(new vscode6.Range(new vscode6.Position(unclosed.line, unclosed.character), new vscode6.Position(unclosed.line, unclosed.character + unclosed.name.length)), `Unclosed @${unclosed.name} directive. Expected @${directivePairs[unclosed.name]}`, vscode6.DiagnosticSeverity.Warning);
+      const diagnostic = new vscode6.Diagnostic(new vscode6.Range(new vscode6.Position(unclosed.line, unclosed.character), new vscode6.Position(unclosed.line, unclosed.character + unclosed.name.length)), `Unclosed @${unclosed.name} directive. Expected @${STX_DIRECTIVE_PAIRS[unclosed.name]}`, vscode6.DiagnosticSeverity.Warning);
       diagnostic.source = "stx";
       diagnostics.push(diagnostic);
     }
@@ -5149,38 +5328,22 @@ function updateDiagnostics(document, diagnosticCollection) {
   diagnosticCollection.set(document.uri, diagnostics);
 }
 function validateTemplatePaths(document, diagnostics) {
-  const workspaceFolder = vscode6.workspace.workspaceFolders?.[0];
+  const workspaceFolder = vscode6.workspace.getWorkspaceFolder(document.uri);
   if (!workspaceFolder) {
     return;
   }
   const workspacePath = workspaceFolder.uri.fsPath;
-  const templateDirs = [
-    "views",
-    "templates",
-    "resources/views",
-    "src/views",
-    "src/templates",
-    "app/views",
-    "partials",
-    "components",
-    "layouts",
-    "src/components",
-    "app/components"
-  ];
-  const pathDirectiveRegex = /@(include(?:If|When|Unless|First)?|component|webcomponent)\s*\(\s*['"`]([^'"`]+)['"`]/g;
+  const templateDirs = [...new Set([
+    ...TEMPLATE_SEARCH_DIRECTORIES,
+    ...COMPONENT_SEARCH_DIRECTORIES
+  ])];
   for (let lineNum = 0;lineNum < document.lineCount; lineNum++) {
     const line = document.lineAt(lineNum);
     const text = line.text;
-    let match;
-    pathDirectiveRegex.lastIndex = 0;
-    match = pathDirectiveRegex.exec(text);
-    while (match !== null) {
-      const directiveName = match[1];
-      const templatePath = match[2];
-      const pathStart = match.index + match[0].indexOf(templatePath);
-      if (directiveName === "includeFirst") {
-        continue;
-      }
+    if (/@includeFirst\s*\(/.test(text))
+      continue;
+    for (const reference of findTemplatePathReferences(text)) {
+      const templatePath = reference.path;
       let found = false;
       for (const templateDir of templateDirs) {
         const stxPath = path4.join(workspacePath, templateDir, `${templatePath}.stx`);
@@ -5200,12 +5363,11 @@ function validateTemplatePaths(document, diagnostics) {
         }
       }
       if (!found) {
-        const diagnostic = new vscode6.Diagnostic(new vscode6.Range(new vscode6.Position(lineNum, pathStart), new vscode6.Position(lineNum, pathStart + templatePath.length)), `Template file '${templatePath}' not found in any template directory`, vscode6.DiagnosticSeverity.Warning);
+        const diagnostic = new vscode6.Diagnostic(new vscode6.Range(new vscode6.Position(lineNum, reference.start), new vscode6.Position(lineNum, reference.end)), `Template file '${templatePath}' not found in any template directory`, vscode6.DiagnosticSeverity.Warning);
         diagnostic.code = "template-not-found";
         diagnostic.source = "stx";
         diagnostics.push(diagnostic);
       }
-      match = pathDirectiveRegex.exec(text);
     }
   }
 }
@@ -5270,20 +5432,13 @@ function createDocumentLinkProvider() {
       const links = [];
       for (let lineIndex = 0;lineIndex < document.lineCount; lineIndex++) {
         const line = document.lineAt(lineIndex).text;
-        const isRegularDirective = /@(include|component)\s*\(/.test(line);
-        const isConditionalDirective = /@(includeIf|includeWhen|includeUnless|includeFirst)\s*\([^,]*,/.test(line);
-        if (isRegularDirective || isConditionalDirective) {
-          const templatePath = extractTemplatePath(line);
-          if (templatePath) {
-            const range = getTemplatePathRange(document, lineIndex);
-            if (range) {
-              const resolvedUri = resolveTemplatePath(document.uri, templatePath);
-              if (resolvedUri) {
-                const documentLink = new vscode7.DocumentLink(range, resolvedUri);
-                documentLink.tooltip = `Open ${templatePath}`;
-                links.push(documentLink);
-              }
-            }
+        for (const reference of findTemplatePathReferences(line)) {
+          const resolvedUri = resolveTemplatePath(document.uri, reference.path);
+          if (resolvedUri) {
+            const range = new vscode7.Range(lineIndex, reference.start, lineIndex, reference.end);
+            const documentLink = new vscode7.DocumentLink(range, resolvedUri);
+            documentLink.tooltip = `Open ${reference.path}`;
+            links.push(documentLink);
           }
         }
       }
@@ -5300,32 +5455,21 @@ function createPathCompletionProvider() {
     provideCompletionItems(document, position, _token, _context) {
       const line = document.lineAt(position.line).text;
       const linePrefix = line.substring(0, position.character);
-      const includeMatch = linePrefix.match(/@include(?:If|When|Unless|First)?\s*\(\s*['"`]([^'"`]*)$/);
-      const componentMatch = linePrefix.match(/@(?:component|webcomponent)\s*\(\s*['"`]([^'"`]*)$/);
-      if (!includeMatch && !componentMatch) {
+      const pathContext = getTemplatePathCompletionContext(linePrefix);
+      if (!pathContext) {
         return;
       }
-      const currentPath = includeMatch ? includeMatch[1] : componentMatch[1];
-      const isInclude = !!includeMatch;
-      const workspaceFolder = vscode8.workspace.workspaceFolders?.[0];
+      const currentPath = pathContext.path;
+      const isInclude = pathContext.kind === "include";
+      const workspaceFolder = vscode8.workspace.getWorkspaceFolder(document.uri);
       if (!workspaceFolder) {
         return;
       }
       const workspacePath = workspaceFolder.uri.fsPath;
-      const templateDirs = [
-        "views",
-        "templates",
-        "resources/views",
-        "src/views",
-        "src/templates",
-        "app/views",
-        "partials",
-        "components",
-        "layouts"
-      ];
-      if (!isInclude) {
-        templateDirs.push("src/components", "app/components", "ui", "src/ui");
-      }
+      const templateDirs = [...new Set([
+        ...TEMPLATE_SEARCH_DIRECTORIES.filter(Boolean),
+        ...!isInclude ? COMPONENT_SEARCH_DIRECTORIES : []
+      ])];
       const completions = [];
       let searchPath = workspacePath;
       let searchRelative = "";
@@ -5402,6 +5546,22 @@ function createPathCompletionProvider() {
 }
 // ../vscode/src/providers/codeActionsProvider.ts
 import * as vscode9 from "vscode";
+
+// ../vscode/src/utils/directive-code-actions.ts
+function directiveDiagnosticAction(message) {
+  const unclosed = message.match(/^Unclosed @\w+ directive\. Expected @(\w+)$/);
+  if (unclosed)
+    return { kind: "add-closing", directive: unclosed[1] };
+  const mismatched = message.match(/^Mismatched directive\. Expected @(\w+) but found @\w+$/);
+  if (mismatched)
+    return { kind: "replace-closing", directive: mismatched[1] };
+  const unexpected = message.match(/^Unexpected @(\w+)\. No matching opening directive found$/);
+  if (unexpected)
+    return { kind: "remove-closing", directive: unexpected[1] };
+  return;
+}
+
+// ../vscode/src/providers/codeActionsProvider.ts
 function createCodeActionsProvider() {
   return {
     provideCodeActions(document, range, context, _token) {
@@ -5411,92 +5571,44 @@ function createCodeActionsProvider() {
         return [];
       }
       const actions = [];
-      const _directivePairs = {
-        if: "endif",
-        unless: "endunless",
-        for: "endfor",
-        foreach: "endforeach",
-        forelse: "endforelse",
-        while: "endwhile",
-        switch: "endswitch",
-        ts: "endts",
-        js: "endjs",
-        script: "endscript",
-        css: "endcss",
-        markdown: "endmarkdown",
-        raw: "endraw",
-        verbatim: "endverbatim",
-        component: "endcomponent",
-        slot: "endslot",
-        webcomponent: "endwebcomponent",
-        section: "endsection",
-        push: "endpush",
-        pushIf: "endpushIf",
-        pushOnce: "endpushOnce",
-        prepend: "endprepend",
-        prependOnce: "endprependOnce",
-        auth: "endauth",
-        guest: "endguest",
-        can: "endcan",
-        cannot: "endcannot",
-        env: "endenv",
-        isset: "endisset",
-        empty: "endempty",
-        error: "enderror",
-        once: "endonce",
-        transition: "endtransition",
-        motion: "endmotion",
-        scrollAnimate: "endscrollAnimate"
-      };
       for (const diagnostic of context.diagnostics) {
-        if (diagnostic.message.includes("Unclosed @")) {
-          const match = diagnostic.message.match(/Unclosed @(\w).*Expected @(\w+)/);
-          if (match) {
-            const _directiveName = match[1];
-            const endDirective = match[2];
-            const fix = new vscode9.CodeAction(`Add missing @${endDirective}`, vscode9.CodeActionKind.QuickFix);
-            fix.diagnostics = [diagnostic];
-            fix.isPreferred = true;
-            let insertLine = document.lineCount - 1;
-            for (let i = diagnostic.range.start.line + 1;i < document.lineCount; i++) {
-              const line = document.lineAt(i).text.trim();
-              if (line.match(/^@\w+/) && !line.startsWith(`@end`)) {
-                insertLine = i - 1;
-                break;
-              }
+        const diagnosticAction = directiveDiagnosticAction(diagnostic.message);
+        if (diagnosticAction?.kind === "add-closing") {
+          const endDirective = diagnosticAction.directive;
+          const fix = new vscode9.CodeAction(`Add missing @${endDirective}`, vscode9.CodeActionKind.QuickFix);
+          fix.diagnostics = [diagnostic];
+          fix.isPreferred = true;
+          let insertLine = document.lineCount - 1;
+          for (let i = diagnostic.range.start.line + 1;i < document.lineCount; i++) {
+            const line = document.lineAt(i).text.trim();
+            if (line.match(/^@\w+/) && !line.startsWith(`@end`)) {
+              insertLine = i - 1;
+              break;
             }
-            const openingLine = document.lineAt(diagnostic.range.start.line);
-            const indent = openingLine.text.match(/^\s*/)?.[0] || "";
-            fix.edit = new vscode9.WorkspaceEdit;
-            fix.edit.insert(document.uri, new vscode9.Position(insertLine + 1, 0), `${indent}@${endDirective}
-`);
-            actions.push(fix);
           }
+          const openingLine = document.lineAt(diagnostic.range.start.line);
+          const indent = openingLine.text.match(/^\s*/)?.[0] || "";
+          fix.edit = new vscode9.WorkspaceEdit;
+          fix.edit.insert(document.uri, new vscode9.Position(insertLine + 1, 0), `${indent}@${endDirective}
+`);
+          actions.push(fix);
         }
-        if (diagnostic.message.includes("Mismatched directive")) {
-          const match = diagnostic.message.match(/Expected @(\w+) but found @(\w+)/);
-          if (match) {
-            const expectedEnd = match[1];
-            const _foundEnd = match[2];
-            const fix = new vscode9.CodeAction(`Change to @${expectedEnd}`, vscode9.CodeActionKind.QuickFix);
-            fix.diagnostics = [diagnostic];
-            fix.isPreferred = true;
-            fix.edit = new vscode9.WorkspaceEdit;
-            fix.edit.replace(document.uri, diagnostic.range, expectedEnd);
-            actions.push(fix);
-          }
+        if (diagnosticAction?.kind === "replace-closing") {
+          const expectedEnd = diagnosticAction.directive;
+          const fix = new vscode9.CodeAction(`Change to @${expectedEnd}`, vscode9.CodeActionKind.QuickFix);
+          fix.diagnostics = [diagnostic];
+          fix.isPreferred = true;
+          fix.edit = new vscode9.WorkspaceEdit;
+          fix.edit.replace(document.uri, diagnostic.range, expectedEnd);
+          actions.push(fix);
         }
-        if (diagnostic.message.includes("Unexpected @end")) {
-          const match = diagnostic.message.match(/Unexpected @(\w+)/);
-          if (match) {
-            const directiveName = match[1];
-            const removeFix = new vscode9.CodeAction(`Remove @${directiveName}`, vscode9.CodeActionKind.QuickFix);
-            removeFix.diagnostics = [diagnostic];
-            const line = document.lineAt(diagnostic.range.start.line);
-            removeFix.edit = new vscode9.WorkspaceEdit;
-            removeFix.edit.delete(document.uri, line.range);
-            actions.push(removeFix);
-          }
+        if (diagnosticAction?.kind === "remove-closing") {
+          const directiveName = diagnosticAction.directive;
+          const removeFix = new vscode9.CodeAction(`Remove @${directiveName}`, vscode9.CodeActionKind.QuickFix);
+          removeFix.diagnostics = [diagnostic];
+          removeFix.edit = new vscode9.WorkspaceEdit;
+          removeFix.edit.delete(document.uri, diagnostic.range.with(diagnostic.range.start.translate(0, -1), diagnostic.range.end));
+          actions.push(removeFix);
         }
       }
       const line = document.lineAt(range.start.line);
@@ -5544,43 +5656,6 @@ function createFoldingRangeProvider() {
         return [];
       }
       const foldingRanges = [];
-      const directivePairs = {
-        if: "endif",
-        unless: "endunless",
-        for: "endfor",
-        foreach: "endforeach",
-        forelse: "endforelse",
-        while: "endwhile",
-        switch: "endswitch",
-        ts: "endts",
-        js: "endjs",
-        script: "endscript",
-        css: "endcss",
-        markdown: "endmarkdown",
-        raw: "endraw",
-        verbatim: "endverbatim",
-        component: "endcomponent",
-        slot: "endslot",
-        webcomponent: "endwebcomponent",
-        section: "endsection",
-        push: "endpush",
-        pushIf: "endpushIf",
-        pushOnce: "endpushOnce",
-        prepend: "endprepend",
-        prependOnce: "endprependOnce",
-        auth: "endauth",
-        guest: "endguest",
-        can: "endcan",
-        cannot: "endcannot",
-        env: "endenv",
-        isset: "endisset",
-        empty: "endempty",
-        error: "enderror",
-        once: "endonce",
-        transition: "endtransition",
-        motion: "endmotion",
-        scrollAnimate: "endscrollAnimate"
-      };
       const stack = [];
       const directiveRegex = /@(\w+)(?:\(|$|\s)/g;
       function getFoldingKind(directiveName) {
@@ -5600,7 +5675,7 @@ function createFoldingRangeProvider() {
         match = directiveRegex.exec(text);
         while (match !== null) {
           const directiveName = match[1];
-          if (directivePairs[directiveName]) {
+          if (STX_DIRECTIVE_PAIRS[directiveName]) {
             stack.push({
               name: directiveName,
               line: lineNum,
@@ -5609,7 +5684,7 @@ function createFoldingRangeProvider() {
           } else {
             const isEndDirective = directiveName.startsWith("end");
             if (isEndDirective) {
-              const openingName = Object.keys(directivePairs).find((key) => directivePairs[key] === directiveName);
+              const openingName = STX_OPENING_DIRECTIVE_BY_CLOSE.get(directiveName);
               if (openingName && stack.length > 0) {
                 const lastOpening = stack[stack.length - 1];
                 if (lastOpening.name === openingName) {
@@ -6766,12 +6841,93 @@ function findForeachDeclarationForVariable(document, currentLine, variableName)
   return null;
 }
 // ../vscode/src/language.ts
+import * as path8 from "node:path";
+import * as vscode16 from "vscode";
+
+// ../vscode/src/commands/extractToComponent.ts
+import * as path7 from "node:path";
+import * as vscode14 from "vscode";
+
+// ../vscode/src/commands/extract-component.ts
 import * as path6 from "node:path";
-import * as vscode15 from "vscode";
+function normalizeComponentName(input) {
+  const trimmed = input.trim();
+  if (!trimmed || !/^[A-Za-z][A-Za-z0-9 _-]*$/.test(trimmed))
+    return;
+  if (/^[A-Z][A-Za-z0-9]*$/.test(trimmed))
+    return trimmed;
+  const words = trimmed.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[\s_-]+/).filter(Boolean);
+  return words.map((word) => word[0].toUpperCase() + word.slice(1)).join("");
+}
+function extractedComponentContent(selection) {
+  const lines = selection.replace(/\r\n/g, `
+`).split(`
+`);
+  while (lines[0]?.trim() === "")
+    lines.shift();
+  while (lines[lines.length - 1]?.trim() === "")
+    lines.pop();
+  const indents = lines.filter((line) => line.trim()).map((line) => line.match(/^\s*/)?.[0].length ?? 0);
+  const commonIndent = indents.length ? Math.min(...indents) : 0;
+  return `${lines.map((line) => line.slice(commonIndent)).join(`
+`)}
+`;
+}
+function componentDirectoryForDocument(workspacePath, documentPath) {
+  const relative2 = path6.relative(workspacePath, documentPath);
+  const segments = relative2.split(path6.sep);
+  if (segments[0] === "resources" && segments[1] === "views")
+    return path6.join(workspacePath, "resources", "views", "components");
+  if (segments[0] === "src")
+    return path6.join(workspacePath, "src", "components");
+  return path6.join(workspacePath, "components");
+}
+
+// ../vscode/src/commands/extractToComponent.ts
+function registerExtractToComponentCommand() {
+  return vscode14.commands.registerCommand("stx.extractToComponent", async (document, range) => {
+    const selection = document.getText(range);
+    if (!selection.trim())
+      return;
+    const requestedName = await vscode14.window.showInputBox({
+      prompt: "Name the extracted stx component",
+      placeHolder: "UserCard",
+      validateInput: (value) => normalizeComponentName(value) ? undefined : "Use a component name beginning with a letter"
+    });
+    if (!requestedName)
+      return;
+    const componentName = normalizeComponentName(requestedName);
+    if (!componentName)
+      return;
+    const workspaceFolder = vscode14.workspace.getWorkspaceFolder(document.uri);
+    if (!workspaceFolder) {
+      await vscode14.window.showErrorMessage("Open the stx file in a workspace before extracting a component.");
+      return;
+    }
+    const componentDirectory = componentDirectoryForDocument(workspaceFolder.uri.fsPath, document.uri.fsPath);
+    const componentUri = vscode14.Uri.file(path7.join(componentDirectory, `${componentName}.stx`));
+    try {
+      await vscode14.workspace.fs.stat(componentUri);
+      await vscode14.window.showErrorMessage(`Component ${componentName}.stx already exists.`);
+      return;
+    } catch {}
+    await vscode14.workspace.fs.createDirectory(vscode14.Uri.file(componentDirectory));
+    const edit = new vscode14.WorkspaceEdit;
+    edit.createFile(componentUri);
+    edit.insert(componentUri, new vscode14.Position(0, 0), extractedComponentContent(selection));
+    edit.replace(document.uri, range, `<${componentName} />`);
+    if (!await vscode14.workspace.applyEdit(edit)) {
+      await vscode14.window.showErrorMessage(`Could not extract ${componentName}.stx.`);
+      return;
+    }
+    const componentDocument = await vscode14.workspace.openTextDocument(componentUri);
+    await vscode14.window.showTextDocument(componentDocument);
+  });
+}
 
 // ../vscode/src/snippets.ts
 import * as fs5 from "node:fs";
-import * as vscode14 from "vscode";
+import * as vscode15 from "vscode";
 function snippetCompletionItems(file) {
   let definitions;
   try {
@@ -6786,10 +6942,10 @@ function snippetCompletionItems(file) {
     const body = Array.isArray(snippet.body) ? snippet.body.join(`
 `) : snippet.body;
     for (const prefix of prefixes) {
-      const item = new vscode14.CompletionItem(prefix, vscode14.CompletionItemKind.Snippet);
-      item.insertText = new vscode14.SnippetString(body);
+      const item = new vscode15.CompletionItem(prefix, vscode15.CompletionItemKind.Snippet);
+      item.insertText = new vscode15.SnippetString(body);
       item.detail = snippet.description ?? name;
-      item.documentation = new vscode14.MarkdownString().appendCodeblock(body, "stx");
+      item.documentation = new vscode15.MarkdownString().appendCodeblock(body, "stx");
       items.push(item);
     }
   }
@@ -6797,7 +6953,7 @@ function snippetCompletionItems(file) {
 }
 function registerSnippetCompletions(file) {
   const items = snippetCompletionItems(file);
-  return vscode14.languages.registerCompletionItemProvider("stx", {
+  return vscode15.languages.registerCompletionItemProvider("stx", {
     provideCompletionItems: () => items
   });
 }
@@ -6816,32 +6972,32 @@ async function activateStxLanguage(context, options) {
   });
   componentRegistry.watchWorkspace(context);
   if (options.snippets)
-    context.subscriptions.push(registerSnippetCompletions(path6.join(options.assetsPath, "snippets", "stx.json")));
-  vscode15.workspace.textDocuments.forEach((document) => {
+    context.subscriptions.push(registerSnippetCompletions(path8.join(options.assetsPath, "snippets", "stx.json")));
+  vscode16.workspace.textDocuments.forEach((document) => {
     if (document.fileName.endsWith(".stx") && document.languageId !== "stx") {
-      vscode15.languages.setTextDocumentLanguage(document, "stx").then(() => console.log(`Set language ID for ${document.fileName} to stx`));
+      vscode16.languages.setTextDocumentLanguage(document, "stx").then(() => console.log(`Set language ID for ${document.fileName} to stx`));
     }
   });
-  const hoverProvider = vscode15.languages.registerHoverProvider("stx", createHoverProvider(virtualTsDocumentProvider));
-  const definitionProvider = vscode15.languages.registerDefinitionProvider("stx", createDefinitionProvider(virtualTsDocumentProvider));
-  const documentLinkProvider = vscode15.languages.registerDocumentLinkProvider("stx", createDocumentLinkProvider());
+  const hoverProvider = vscode16.languages.registerHoverProvider("stx", createHoverProvider(virtualTsDocumentProvider));
+  const definitionProvider = vscode16.languages.registerDefinitionProvider("stx", createDefinitionProvider(virtualTsDocumentProvider));
+  const documentLinkProvider = vscode16.languages.registerDocumentLinkProvider("stx", createDocumentLinkProvider());
   const completionProvider = createCompletionProvider();
-  const atTriggerCompletionProvider = vscode15.languages.registerCompletionItemProvider("stx", completionProvider, "@");
-  const parameterCompletionProvider = vscode15.languages.registerCompletionItemProvider("stx", completionProvider, "'", '"', "`", ",", ".");
-  const pathCompletionProvider = vscode15.languages.registerCompletionItemProvider("stx", createPathCompletionProvider(), "/", "'", '"');
-  context.subscriptions.push(vscode15.workspace.registerTextDocumentContentProvider("stx-ts", virtualTsDocumentProvider));
+  const languageCompletionProvider = vscode16.languages.registerCompletionItemProvider("stx", completionProvider, "@", ":", "-", "'", '"', "`", ",", ".");
+  const pathCompletionProvider = vscode16.languages.registerCompletionItemProvider("stx", createPathCompletionProvider(), "/", "'", '"');
+  context.subscriptions.push(vscode16.workspace.registerTextDocumentContentProvider("stx-ts", virtualTsDocumentProvider));
   createDiagnosticsProvider(context);
-  const codeActionsProvider = vscode15.languages.registerCodeActionsProvider("stx", createCodeActionsProvider(), {
+  const codeActionsProvider = vscode16.languages.registerCodeActionsProvider("stx", createCodeActionsProvider(), {
     providedCodeActionKinds: [
-      vscode15.CodeActionKind.QuickFix,
-      vscode15.CodeActionKind.RefactorRewrite,
-      vscode15.CodeActionKind.RefactorExtract
+      vscode16.CodeActionKind.QuickFix,
+      vscode16.CodeActionKind.RefactorRewrite,
+      vscode16.CodeActionKind.RefactorExtract
     ]
   });
-  const foldingRangeProvider = vscode15.languages.registerFoldingRangeProvider("stx", createFoldingRangeProvider());
-  const semanticTokensProvider = vscode15.languages.registerDocumentSemanticTokensProvider("stx", createSemanticTokensProvider(), legend);
+  const extractToComponentCommand = registerExtractToComponentCommand();
+  const foldingRangeProvider = vscode16.languages.registerFoldingRangeProvider("stx", createFoldingRangeProvider());
+  const semanticTokensProvider = vscode16.languages.registerDocumentSemanticTokensProvider("stx", createSemanticTokensProvider(), legend);
   let updateTimeout;
-  const documentChangeListener = vscode15.workspace.onDidChangeTextDocument((event) => {
+  const documentChangeListener = vscode16.workspace.onDidChangeTextDocument((event) => {
     if (event.document.languageId === "stx" || event.document.languageId === "markdown" && event.document.fileName.endsWith(".md")) {
       clearTimeout(updateTimeout);
       updateTimeout = setTimeout(() => {
@@ -6849,7 +7005,7 @@ async function activateStxLanguage(context, options) {
       }, 150);
     }
   });
-  const documentOpenListener = vscode15.workspace.onDidOpenTextDocument(async (document) => {
+  const documentOpenListener = vscode16.workspace.onDidOpenTextDocument(async (document) => {
     const isStx = document.languageId === "stx" || document.fileName.endsWith(".stx");
     const isMarkdown = document.languageId === "markdown" && document.fileName.endsWith(".md");
     if (!isStx && !isMarkdown)
@@ -6857,7 +7013,7 @@ async function activateStxLanguage(context, options) {
     virtualTsDocumentProvider.trackDocument(document);
     if (isStx && document.languageId !== "stx") {
       try {
-        await vscode15.languages.setTextDocumentLanguage(document, "stx");
+        await vscode16.languages.setTextDocumentLanguage(document, "stx");
       } catch {}
     }
     const virtualUri = document.uri.with({
@@ -6865,12 +7021,12 @@ async function activateStxLanguage(context, options) {
       path: `${document.uri.path}.ts`
     });
     try {
-      await vscode15.workspace.openTextDocument(virtualUri);
+      await vscode16.workspace.openTextDocument(virtualUri);
     } catch (error) {
       console.error("Failed to open virtual TypeScript document:", error);
     }
   });
-  vscode15.workspace.textDocuments.forEach((document) => {
+  vscode16.workspace.textDocuments.forEach((document) => {
     if (document.languageId === "stx" || document.fileName.endsWith(".stx")) {
       virtualTsDocumentProvider.trackDocument(document);
     }
@@ -6878,8 +7034,8 @@ async function activateStxLanguage(context, options) {
       virtualTsDocumentProvider.trackDocument(document);
     }
   });
-  context.subscriptions.push(documentChangeListener, documentOpenListener, hoverProvider, definitionProvider, documentLinkProvider, atTriggerCompletionProvider, parameterCompletionProvider, pathCompletionProvider, codeActionsProvider, foldingRangeProvider, semanticTokensProvider);
-  const utilityClassesEnabled = vscode15.workspace.getConfiguration("stx.utilityClasses").get("enable", true);
+  context.subscriptions.push(documentChangeListener, documentOpenListener, hoverProvider, definitionProvider, documentLinkProvider, languageCompletionProvider, pathCompletionProvider, codeActionsProvider, extractToComponentCommand, foldingRangeProvider, semanticTokensProvider);
+  const utilityClassesEnabled = vscode16.workspace.getConfiguration("stx.utilityClasses").get("enable", true);
   if (utilityClassesEnabled) {
     try {
       await Promise.resolve().then(() => init_ts_css());
@@ -6887,7 +7043,7 @@ async function activateStxLanguage(context, options) {
       console.log("stx Extension - Css utility class features activated");
     } catch (error) {
       console.error("stx Extension - Failed to activate Css features:", error);
-      vscode15.window.showErrorMessage(`Failed to activate Css: ${error}`);
+      vscode16.window.showErrorMessage(`Failed to activate Css: ${error}`);
     }
   }
   console.log("stx language support activated (with Markdown frontmatter support)");
@@ -6897,8 +7053,8 @@ function deactivateStxLanguage() {
   console.log("stx language support deactivated");
 }
 // ../vscode/src/extension.ts
-import * as path7 from "node:path";
-import * as vscode16 from "vscode";
+import * as path9 from "node:path";
+import * as vscode17 from "vscode";
 
 // ../vscode/src/stand-down.ts
 async function stacksProvidesStx(api) {
@@ -6940,15 +7096,15 @@ async function configureTypeScriptPlugin(api, subscriptions) {
 
 // ../vscode/src/extension.ts
 async function activate(context) {
-  configureTypeScriptPlugin(vscode16, context.subscriptions).catch((error) => {
+  configureTypeScriptPlugin(vscode17, context.subscriptions).catch((error) => {
     console.error("stx Extension - could not configure the TypeScript plugin:", error);
   });
-  if (await stacksProvidesStx(vscode16)) {
+  if (await stacksProvidesStx(vscode17)) {
     console.log(`stx Extension - ${STACKS_EXTENSION_ID} provides stx support in this window; not registering it twice`);
     return;
   }
   await activateStxLanguage(context, {
-    assetsPath: path7.join(context.extensionPath, "src"),
+    assetsPath: path9.join(context.extensionPath, "src"),
     snippets: false
   });
 }
@@ -6961,6 +7117,9 @@ export {
   DEFAULT_TRANSITION_OPTIONS,
   PropsTypeExtractor,
   STACKS_EXTENSION_ID,
+  STX_ATTRIBUTE_DIRECTIVES,
+  STX_DIRECTIVES,
+  STX_DIRECTIVE_PAIRS,
   STX_EXTENSION_ID,
   TS_PLUGIN_NAME,
   TS_PLUGIN_SETTINGS,
@@ -7002,6 +7161,10 @@ export {
   formatJSDoc,
   getClassAtPosition,
   getDefaultConfig as getCssDefaultConfig,
+  getStxAttributeAtOffset,
+  getStxAttributeCompletionContext,
+  getStxAttributeDefinition,
+  getStxDirectiveAtOffset,
   getTemplatePathRange,
   isColorClass,
   isCssClassName,
@@ -7017,6 +7180,7 @@ export {
   snippetCompletionItems,
   sortClasses,
   stacksProvidesStx,
+  stxSnippetPreview,
   tokenModifiers,
   tokenTypes
 };