@stacksjs/stx 0.2.94 → 0.2.96

package/dist/visual-editor.js

@@ -1,13 +1,438 @@
-// @bun
-import"./chunk-3jm3snz8.js";var P={if:"control-flow",else:"control-flow",elseif:"control-flow",unless:"control-flow",switch:"control-flow",case:"control-flow",default:"control-flow",for:"loop",foreach:"loop",forelse:"loop",while:"loop",empty:"loop",break:"loop",continue:"loop",extends:"layout",section:"layout",yield:"layout",parent:"layout",include:"layout",includeIf:"layout",includeWhen:"layout",includeFirst:"layout",once:"layout",push:"layout",prepend:"layout",stack:"layout",component:"component",slot:"component",props:"component",webcomponent:"component",auth:"auth",guest:"auth",can:"auth",cannot:"auth",role:"auth",hasRole:"auth",hasAnyRole:"auth",csrf:"form",method:"form",error:"form",old:"form",input:"form",textarea:"form",select:"form",checkbox:"form",radio:"form",meta:"seo",title:"seo",seo:"seo",jsonld:"seo",canonical:"seo",translate:"i18n",lang:"i18n",choice:"i18n"},f={"control-flow":"symbol-branch",loop:"symbol-loop",layout:"symbol-structure",component:"symbol-class",auth:"shield",form:"symbol-field",seo:"search",i18n:"globe",custom:"symbol-misc"};function d(B){let Q={type:"document",name:"document",label:"Document",range:{start:0,end:B.length,line:1,column:1},children:[]},j=[Q],Y=0,V=1,G=1,W=(J)=>{if(J===`
-`)V++,G=1;else G++;Y++},Z=()=>({start:Y,end:Y,line:V,column:G});while(Y<B.length){let J=B.slice(Y),A=J.match(/^@(\w+)(?:\s*\(([^)]*)\))?/);if(A){let[X,H,q]=A,F=P[H]||"custom";if(H.startsWith("end")){let K=H.slice(3),$=j[j.length-1];if($.name===K&&j.length>1)$.range.end=Y+X.length,j.pop()}else{let K=C(H),$={type:"directive",name:H,label:`@${H}${q?`(${S(q,30)})`:""}`,range:Z(),children:[],directiveCategory:F,isClosable:K,icon:f[F],description:q};if(j[j.length-1].children.push($),K)j.push($)}for(let K of X)W(K);continue}let z=J.match(/^<([A-Z][A-Za-z0-9]+)([^>]*)>/);if(z){let[X,H,q]=z,F={type:"component",name:H,label:`<${H}>`,range:Z(),children:[],attributes:b(q),icon:"symbol-class",isClosable:!X.endsWith("/>")};if(j[j.length-1].children.push(F),F.isClosable)j.push(F);for(let K of X)W(K);continue}let U=J.match(/^<\/([A-Z][A-Za-z0-9]+)>/);if(U){let[X,H]=U,q=j[j.length-1];if(q.name===H&&q.type==="component"&&j.length>1)q.range.end=Y+X.length,j.pop();for(let F of X)W(F);continue}let D=J.match(/^<([a-z][a-z0-9-]*)([^>]*)>/i);if(D){let[X,H,q]=D,F=X.endsWith("/>")||v(H),K={type:"element",name:H,label:`<${H}>`,range:Z(),children:[],attributes:b(q),isClosable:!F};if(j[j.length-1].children.push(K),K.isClosable)j.push(K);for(let $ of X)W($);continue}let O=J.match(/^<\/([a-z][a-z0-9-]*)>/i);if(O){let[X,H]=O,q=j[j.length-1];if(q.name===H&&q.type==="element"&&j.length>1)q.range.end=Y+X.length,j.pop();for(let F of X)W(F);continue}let R=J.match(/^\{\{([^}]+)\}\}/);if(R){let[X,H]=R,q={type:"expression",name:"expression",label:`{{ ${S(H.trim(),30)} }}`,range:Z(),children:[],icon:"symbol-variable"};j[j.length-1].children.push(q);for(let F of X)W(F);continue}let L=J.match(/^<script([^>]*)>/);if(L){let[X]=L,H={type:"script",name:"script",label:"<script>",range:Z(),children:[],icon:"symbol-event",isClosable:!0};j[j.length-1].children.push(H),j.push(H);for(let q of X)W(q);continue}if(J.startsWith("</script>")){let H=j[j.length-1];if(H.type==="script"&&j.length>1)H.range.end=Y+9,j.pop();for(let q of"</script>")W(q);continue}let T=J.match(/^<style([^>]*)>/);if(T){let[X]=T,H={type:"style",name:"style",label:"<style>",range:Z(),children:[],icon:"symbol-color",isClosable:!0};j[j.length-1].children.push(H),j.push(H);for(let q of X)W(q);continue}if(J.startsWith("</style>")){let H=j[j.length-1];if(H.type==="style"&&j.length>1)H.range.end=Y+8,j.pop();for(let q of"</style>")W(q);continue}let E=J.match(/^\{\{--([^}]*?)--\}\}/);if(E){let[X,H]=E,q={type:"comment",name:"comment",label:`{{-- ${S(H.trim(),30)} --}}`,range:Z(),children:[],icon:"comment"};j[j.length-1].children.push(q);for(let F of X)W(F);continue}W(B[Y])}return Q}function h(B){return y(B)}function u(B){return y(B)}function y(B){let Q=[],j=[],Y=[],V=[],G=[],W=[],Z=[],J,A=/\{\{\s*([^}]+?)\s*\}\}/g,z=B.matchAll(A);for(let q of z){let K=q[1].match(/^([a-z_$][\w$]*)/i);if(K){let $=I(B,q.index);Q.push({name:K[1],line:$,column:g(B,q.index),context:"expression"})}}let U=/@(\w+)(?:\s*\(([^)]*)\))?/g,D=B.matchAll(U);for(let q of D){let F=q[1],K=q[2],$=I(B,q.index);if(F==="extends"&&K)J={extends:K.replace(/['"]/g,""),line:$,sections:[]};else if(F==="section"&&K){let _=K.replace(/['"]/g,"").split(",")[0].trim();if(G.push({name:_,line:$,content:""}),J)J.sections.push(_)}else if(F==="slot")V.push({name:K?K.replace(/['"]/g,""):"default",line:$,isNamed:!!K});else if(F==="component"&&K){let _=K.replace(/['"]/g,"").split(",")[0].trim();j.push({name:_,line:$,props:{},hasSlot:!1})}Y.push({name:F,category:P[F]||"custom",line:$,params:K,hasEndTag:C(F)})}let O=/<([A-Z][A-Za-z0-9]+)([^>]*)>/g,R=B.matchAll(O);for(let q of R){let F=q[1],K=q[2],$=I(B,q.index),_=B.indexOf(`</${F}>`,q.index),w=_!==-1&&B.slice(q.index+q[0].length,_).trim().length>0;j.push({name:F,line:$,props:b(K),hasSlot:w})}let L=/<script([^>]*)>([\s\S]*?)<\/script>/g,T=B.matchAll(L);for(let q of T){let F=q[1],K=q[2],$=I(B,q.index),_=F.includes('lang="ts"')||F.includes("lang='ts'"),w=[],N=/export\s+(?:const|let|var|function|class)\s+(\w+)/g,x=K.matchAll(N);for(let M of x)w.push(M[1]);W.push({type:_?"typescript":"javascript",line:$,content:K,exports:w})}let E=/<style([^>]*)>([\s\S]*?)<\/style>/g,X=B.matchAll(E);for(let q of X){let F=q[1],K=q[2],$=I(B,q.index),_="css";if(F.includes('lang="scss"')||F.includes("lang='scss'"))_="scss";if(F.includes('lang="less"')||F.includes("lang='less'"))_="less";Z.push({type:_,line:$,content:K,scoped:F.includes("scoped")})}let H=k(B,Y,j,Q);return{variables:Q,components:j,directives:Y,slots:V,sections:G,scripts:W,styles:Z,layout:J,metrics:H}}function k(B,Q,j,Y){let V=B.split(`
-`).length,G=B.length,W=0,Z=0;for(let z of Q)if(z.hasEndTag&&!z.name.startsWith("end"))Z++,W=Math.max(W,Z);else if(z.name.startsWith("end"))Z--;let A=1+Q.filter((z)=>z.category==="control-flow"||z.category==="loop").length;return{lines:V,characters:G,maxNestingDepth:W,directiveCount:Q.length,componentCount:j.length,expressionCount:Y.length,complexity:A}}async function l(B,Q={}){let{context:j={},includeStyles:Y=!0,includeScripts:V=!1,wrapInDocument:G=!0,baseUrl:W="",customCss:Z=""}=Q,J=B;if(J=J.replace(/\{\{\s*([^}]+?)\s*\}\}/g,(z,U)=>{let D=U.trim().split(".")[0].split("[")[0];if(D in j){let O=j[D];return typeof O==="object"?JSON.stringify(O):String(O)}return`<span class="stx-preview-placeholder">${U}</span>`}),J=J.replace(/@(\w+)(?:\s*\([^)]*\))?/g,(z,U)=>{if(U.startsWith("end"))return"";return`<span class="stx-preview-directive" data-directive="${U}">${z}</span>`}),!V)J=J.replace(/<script[\s\S]*?<\/script>/gi,"");let A="";if(Y){let z=J.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi);for(let U of z)A+=U[1];J=J.replace(/<style[\s\S]*?<\/style>/gi,"")}if(G)return`<!DOCTYPE html>
+const DIRECTIVE_CATEGORIES = {
+  if: "control-flow",
+  else: "control-flow",
+  elseif: "control-flow",
+  unless: "control-flow",
+  switch: "control-flow",
+  case: "control-flow",
+  default: "control-flow",
+  for: "loop",
+  foreach: "loop",
+  forelse: "loop",
+  while: "loop",
+  empty: "loop",
+  break: "loop",
+  continue: "loop",
+  extends: "layout",
+  section: "layout",
+  yield: "layout",
+  parent: "layout",
+  include: "layout",
+  includeIf: "layout",
+  includeWhen: "layout",
+  includeFirst: "layout",
+  once: "layout",
+  push: "layout",
+  prepend: "layout",
+  stack: "layout",
+  component: "component",
+  slot: "component",
+  props: "component",
+  webcomponent: "component",
+  auth: "auth",
+  guest: "auth",
+  can: "auth",
+  cannot: "auth",
+  role: "auth",
+  hasRole: "auth",
+  hasAnyRole: "auth",
+  csrf: "form",
+  method: "form",
+  error: "form",
+  old: "form",
+  input: "form",
+  textarea: "form",
+  select: "form",
+  checkbox: "form",
+  radio: "form",
+  meta: "seo",
+  title: "seo",
+  seo: "seo",
+  jsonld: "seo",
+  canonical: "seo",
+  translate: "i18n",
+  lang: "i18n",
+  choice: "i18n"
+}, DIRECTIVE_ICONS = {
+  "control-flow": "symbol-branch",
+  loop: "symbol-loop",
+  layout: "symbol-structure",
+  component: "symbol-class",
+  auth: "shield",
+  form: "symbol-field",
+  seo: "search",
+  i18n: "globe",
+  custom: "symbol-misc"
+};
+export function getTemplateOutline(template) {
+  const root = {
+    type: "document",
+    name: "document",
+    label: "Document",
+    range: { start: 0, end: template.length, line: 1, column: 1 },
+    children: []
+  }, stack = [root];
+  let pos = 0, line = 1, column = 1;
+  const updatePosition = (char) => {
+    if (char === `
+`) {
+      line++;
+      column = 1;
+    } else
+      column++;
+    pos++;
+  }, getPosition = () => ({ start: pos, end: pos, line, column });
+  while (pos < template.length) {
+    const remaining = template.slice(pos), directiveMatch = remaining.match(/^@(\w+)(?:\s*\(([^)]*)\))?/);
+    if (directiveMatch) {
+      const [full, name, params] = directiveMatch, category = DIRECTIVE_CATEGORIES[name] || "custom";
+      if (name.startsWith("end")) {
+        const baseName = name.slice(3), parent = stack[stack.length - 1];
+        if (parent.name === baseName && stack.length > 1) {
+          parent.range.end = pos + full.length;
+          stack.pop();
+        }
+      } else {
+        const isClosable = hasEndTag(name), node = {
+          type: "directive",
+          name,
+          label: `@${name}${params ? `(${truncate(params, 30)})` : ""}`,
+          range: getPosition(),
+          children: [],
+          directiveCategory: category,
+          isClosable,
+          icon: DIRECTIVE_ICONS[category],
+          description: params
+        };
+        stack[stack.length - 1].children.push(node);
+        if (isClosable)
+          stack.push(node);
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const componentMatch = remaining.match(/^<([A-Z][A-Za-z0-9]+)([^>]*)>/);
+    if (componentMatch) {
+      const [full, name, attrs] = componentMatch, node = {
+        type: "component",
+        name,
+        label: `<${name}>`,
+        range: getPosition(),
+        children: [],
+        attributes: parseSimpleAttributes(attrs),
+        icon: "symbol-class",
+        isClosable: !full.endsWith("/>")
+      };
+      stack[stack.length - 1].children.push(node);
+      if (node.isClosable)
+        stack.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const componentCloseMatch = remaining.match(/^<\/([A-Z][A-Za-z0-9]+)>/);
+    if (componentCloseMatch) {
+      const [full, name] = componentCloseMatch, parent = stack[stack.length - 1];
+      if (parent.name === name && parent.type === "component" && stack.length > 1) {
+        parent.range.end = pos + full.length;
+        stack.pop();
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const elementMatch = remaining.match(/^<([a-z][a-z0-9-]*)([^>]*)>/i);
+    if (elementMatch) {
+      const [full, tag, attrs] = elementMatch, isSelfClosing = full.endsWith("/>") || isVoidElement(tag), node = {
+        type: "element",
+        name: tag,
+        label: `<${tag}>`,
+        range: getPosition(),
+        children: [],
+        attributes: parseSimpleAttributes(attrs),
+        isClosable: !isSelfClosing
+      };
+      stack[stack.length - 1].children.push(node);
+      if (node.isClosable)
+        stack.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const elementCloseMatch = remaining.match(/^<\/([a-z][a-z0-9-]*)>/i);
+    if (elementCloseMatch) {
+      const [full, tag] = elementCloseMatch, parent = stack[stack.length - 1];
+      if (parent.name === tag && parent.type === "element" && stack.length > 1) {
+        parent.range.end = pos + full.length;
+        stack.pop();
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const exprMatch = remaining.match(/^\{\{([^}]+)\}\}/);
+    if (exprMatch) {
+      const [full, expr] = exprMatch, node = {
+        type: "expression",
+        name: "expression",
+        label: `{{ ${truncate(expr.trim(), 30)} }}`,
+        range: getPosition(),
+        children: [],
+        icon: "symbol-variable"
+      };
+      stack[stack.length - 1].children.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const scriptMatch = remaining.match(/^<script([^>]*)>/);
+    if (scriptMatch) {
+      const [full] = scriptMatch, node = {
+        type: "script",
+        name: "script",
+        label: "<script>",
+        range: getPosition(),
+        children: [],
+        icon: "symbol-event",
+        isClosable: !0
+      };
+      stack[stack.length - 1].children.push(node);
+      stack.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    if (remaining.startsWith("</script>")) {
+      const full = "</script>", parent = stack[stack.length - 1];
+      if (parent.type === "script" && stack.length > 1) {
+        parent.range.end = pos + full.length;
+        stack.pop();
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const styleMatch = remaining.match(/^<style([^>]*)>/);
+    if (styleMatch) {
+      const [full] = styleMatch, node = {
+        type: "style",
+        name: "style",
+        label: "<style>",
+        range: getPosition(),
+        children: [],
+        icon: "symbol-color",
+        isClosable: !0
+      };
+      stack[stack.length - 1].children.push(node);
+      stack.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    if (remaining.startsWith("</style>")) {
+      const full = "</style>", parent = stack[stack.length - 1];
+      if (parent.type === "style" && stack.length > 1) {
+        parent.range.end = pos + full.length;
+        stack.pop();
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const commentMatch = remaining.match(/^\{\{--([^}]*?)--\}\}/);
+    if (commentMatch) {
+      const [full, content] = commentMatch, node = {
+        type: "comment",
+        name: "comment",
+        label: `{{-- ${truncate(content.trim(), 30)} --}}`,
+        range: getPosition(),
+        children: [],
+        icon: "comment"
+      };
+      stack[stack.length - 1].children.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    updatePosition(template[pos]);
+  }
+  return root;
+}
+export function analyzeVisualEditorTemplate(template) {
+  return analyzeTemplateContentImpl(template);
+}
+export function analyzeTemplateContent(template) {
+  return analyzeTemplateContentImpl(template);
+}
+function analyzeTemplateContentImpl(template) {
+  const variables = [], components = [], directives = [], slots = [], sections = [], scripts = [], styles = [];
+  let layout;
+  const exprRegex = /\{\{\s*([^}]+?)\s*\}\}/g, exprMatches = template.matchAll(exprRegex);
+  for (const match of exprMatches) {
+    const varMatch = match[1].match(/^([a-z_$][\w$]*)/i);
+    if (varMatch) {
+      const lineNum = getLineNumber(template, match.index);
+      variables.push({
+        name: varMatch[1],
+        line: lineNum,
+        column: getColumnNumber(template, match.index),
+        context: "expression"
+      });
+    }
+  }
+  const directiveRegex = /@(\w+)(?:\s*\(([^)]*)\))?/g, directiveMatches = template.matchAll(directiveRegex);
+  for (const match of directiveMatches) {
+    const name = match[1], params = match[2], lineNum = getLineNumber(template, match.index);
+    if (name === "extends" && params)
+      layout = {
+        extends: params.replace(/['"]/g, ""),
+        line: lineNum,
+        sections: []
+      };
+    else if (name === "section" && params) {
+      const sectionName = params.replace(/['"]/g, "").split(",")[0].trim();
+      sections.push({
+        name: sectionName,
+        line: lineNum,
+        content: ""
+      });
+      if (layout)
+        layout.sections.push(sectionName);
+    } else if (name === "slot")
+      slots.push({
+        name: params ? params.replace(/['"]/g, "") : "default",
+        line: lineNum,
+        isNamed: !!params
+      });
+    else if (name === "component" && params) {
+      const componentName = params.replace(/['"]/g, "").split(",")[0].trim();
+      components.push({
+        name: componentName,
+        line: lineNum,
+        props: {},
+        hasSlot: !1
+      });
+    }
+    directives.push({
+      name,
+      category: DIRECTIVE_CATEGORIES[name] || "custom",
+      line: lineNum,
+      params,
+      hasEndTag: hasEndTag(name)
+    });
+  }
+  const componentRegex = /<([A-Z][A-Za-z0-9]+)([^>]*)>/g, componentMatches = template.matchAll(componentRegex);
+  for (const match of componentMatches) {
+    const name = match[1], attrsStr = match[2], lineNum = getLineNumber(template, match.index), closeTagPos = template.indexOf(`</${name}>`, match.index), hasSlot = closeTagPos !== -1 && template.slice(match.index + match[0].length, closeTagPos).trim().length > 0;
+    components.push({
+      name,
+      line: lineNum,
+      props: parseSimpleAttributes(attrsStr),
+      hasSlot
+    });
+  }
+  const scriptRegex = /<script([^>]*)>([\s\S]*?)<\/script>/g, scriptMatches = template.matchAll(scriptRegex);
+  for (const match of scriptMatches) {
+    const attrs = match[1], content = match[2], lineNum = getLineNumber(template, match.index), isTS = attrs.includes('lang="ts"') || attrs.includes("lang='ts'"), exports = [], exportRegex = /export\s+(?:const|let|var|function|class)\s+(\w+)/g, exportMatches = content.matchAll(exportRegex);
+    for (const exportMatch of exportMatches)
+      exports.push(exportMatch[1]);
+    scripts.push({
+      type: isTS ? "typescript" : "javascript",
+      line: lineNum,
+      content,
+      exports
+    });
+  }
+  const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/g, styleMatches = template.matchAll(styleRegex);
+  for (const match of styleMatches) {
+    const attrs = match[1], content = match[2], lineNum = getLineNumber(template, match.index);
+    let type = "css";
+    if (attrs.includes('lang="scss"') || attrs.includes("lang='scss'"))
+      type = "scss";
+    if (attrs.includes('lang="less"') || attrs.includes("lang='less'"))
+      type = "less";
+    styles.push({
+      type,
+      line: lineNum,
+      content,
+      scoped: attrs.includes("scoped")
+    });
+  }
+  const metrics = calculateMetrics(template, directives, components, variables);
+  return {
+    variables,
+    components,
+    directives,
+    slots,
+    sections,
+    scripts,
+    styles,
+    layout,
+    metrics
+  };
+}
+function calculateMetrics(template, directives, components, variables) {
+  const lines = template.split(`
+`).length, characters = template.length;
+  let maxDepth = 0, currentDepth = 0;
+  for (const dir of directives)
+    if (dir.hasEndTag && !dir.name.startsWith("end")) {
+      currentDepth++;
+      maxDepth = Math.max(maxDepth, currentDepth);
+    } else if (dir.name.startsWith("end"))
+      currentDepth--;
+  const complexity = 1 + directives.filter((d) => d.category === "control-flow" || d.category === "loop").length;
+  return {
+    lines,
+    characters,
+    maxNestingDepth: maxDepth,
+    directiveCount: directives.length,
+    componentCount: components.length,
+    expressionCount: variables.length,
+    complexity
+  };
+}
+export async function generatePreview(template, options = {}) {
+  const {
+    context = {},
+    includeStyles = !0,
+    includeScripts = !1,
+    wrapInDocument = !0,
+    baseUrl = "",
+    customCss = ""
+  } = options;
+  let preview = template;
+  preview = preview.replace(/\{\{\s*([^}]+?)\s*\}\}/g, (_, expr) => {
+    const varName = expr.trim().split(".")[0].split("[")[0];
+    if (varName in context) {
+      const value = context[varName];
+      return typeof value === "object" ? JSON.stringify(value) : String(value);
+    }
+    return `<span class="stx-preview-placeholder">${expr}</span>`;
+  });
+  preview = preview.replace(/@(\w+)(?:\s*\([^)]*\))?/g, (match, name) => {
+    if (name.startsWith("end"))
+      return "";
+    return `<span class="stx-preview-directive" data-directive="${name}">${match}</span>`;
+  });
+  if (!includeScripts)
+    preview = preview.replace(/<script[\s\S]*?<\/script>/gi, "");
+  let styles = "";
+  if (includeStyles) {
+    const styleMatches = preview.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi);
+    for (const match of styleMatches)
+      styles += match[1];
+    preview = preview.replace(/<style[\s\S]*?<\/style>/gi, "");
+  }
+  if (wrapInDocument)
+    return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>STX Preview</title>
-  ${W?`<base href="${W}">`:""}
+  ${baseUrl ? `<base href="${baseUrl}">` : ""}
   <style>
     .stx-preview-placeholder {
       background: #fff3cd;
@@ -23,53 +448,288 @@ import"./chunk-3jm3snz8.js";var P={if:"control-flow",else:"control-flow",elseif:
       font-family: monospace;
       font-size: 0.9em;
     }
-    ${Z}
-    ${A}
+    ${customCss}
+    ${styles}
   </style>
 </head>
 <body>
-  ${J}
+  ${preview}
 </body>
-</html>`;return J}function p(){return[{name:"extends",displayName:"Use Layout",category:"Layout",description:"Use a layout template",icon:"symbol-structure",snippet:`@layout('$1')
+</html>`;
+  return preview;
+}
+export function getDefaultPalette() {
+  return [
+    {
+      name: "extends",
+      displayName: "Use Layout",
+      category: "Layout",
+      description: "Use a layout template",
+      icon: "symbol-structure",
+      snippet: `@layout('$1')
 
 @section('content')
   $0
-@endsection`},{name:"section",displayName:"Section",category:"Layout",description:"Define a section within a layout",icon:"symbol-structure",snippet:`@section('$1')
+@endsection`
+    },
+    {
+      name: "section",
+      displayName: "Section",
+      category: "Layout",
+      description: "Define a section within a layout",
+      icon: "symbol-structure",
+      snippet: `@section('$1')
   $0
-@endsection`},{name:"include",displayName:"Include Partial",category:"Layout",description:"Include another template",icon:"file-add",snippet:"@include('$1')"},{name:"if",displayName:"If Block",category:"Control Flow",description:"Conditional rendering",icon:"symbol-branch",snippet:`@if($1)
+@endsection`
+    },
+    {
+      name: "include",
+      displayName: "Include Partial",
+      category: "Layout",
+      description: "Include another template",
+      icon: "file-add",
+      snippet: "@include('$1')"
+    },
+    {
+      name: "if",
+      displayName: "If Block",
+      category: "Control Flow",
+      description: "Conditional rendering",
+      icon: "symbol-branch",
+      snippet: `@if($1)
   $0
-@endif`},{name:"if-else",displayName:"If-Else Block",category:"Control Flow",description:"Conditional with else branch",icon:"symbol-branch",snippet:`@if($1)
+@endif`
+    },
+    {
+      name: "if-else",
+      displayName: "If-Else Block",
+      category: "Control Flow",
+      description: "Conditional with else branch",
+      icon: "symbol-branch",
+      snippet: `@if($1)
   $2
 @else
   $0
-@endif`},{name:"switch",displayName:"Switch Block",category:"Control Flow",description:"Switch statement for multiple conditions",icon:"symbol-branch",snippet:`@switch($1)
+@endif`
+    },
+    {
+      name: "switch",
+      displayName: "Switch Block",
+      category: "Control Flow",
+      description: "Switch statement for multiple conditions",
+      icon: "symbol-branch",
+      snippet: `@switch($1)
   @case($2)
     $3
     @break
   @default
     $0
-@endswitch`},{name:"foreach",displayName:"For Each Loop",category:"Loops",description:"Iterate over a collection",icon:"symbol-loop",snippet:`@foreach($1 as $2)
+@endswitch`
+    },
+    {
+      name: "foreach",
+      displayName: "For Each Loop",
+      category: "Loops",
+      description: "Iterate over a collection",
+      icon: "symbol-loop",
+      snippet: `@foreach($1 as $2)
   $0
-@endforeach`},{name:"forelse",displayName:"For Else Loop",category:"Loops",description:"Loop with empty state",icon:"symbol-loop",snippet:`@forelse($1 as $2)
+@endforeach`
+    },
+    {
+      name: "forelse",
+      displayName: "For Else Loop",
+      category: "Loops",
+      description: "Loop with empty state",
+      icon: "symbol-loop",
+      snippet: `@forelse($1 as $2)
   $3
 @empty
   $0
-@endforelse`},{name:"for",displayName:"For Loop",category:"Loops",description:"Traditional for loop",icon:"symbol-loop",snippet:`@for($1 = 0; $1 < $2; $1++)
+@endforelse`
+    },
+    {
+      name: "for",
+      displayName: "For Loop",
+      category: "Loops",
+      description: "Traditional for loop",
+      icon: "symbol-loop",
+      snippet: `@for($1 = 0; $1 < $2; $1++)
   $0
-@endfor`},{name:"component",displayName:"Component",category:"Components",description:"Include a reusable component",icon:"symbol-class",snippet:`@component('$1')
+@endfor`
+    },
+    {
+      name: "component",
+      displayName: "Component",
+      category: "Components",
+      description: "Include a reusable component",
+      icon: "symbol-class",
+      snippet: `@component('$1')
   $0
-@endcomponent`},{name:"slot",displayName:"Slot",category:"Components",description:"Define slot content placeholder",icon:"symbol-class",snippet:`@slot('$1')
+@endcomponent`
+    },
+    {
+      name: "slot",
+      displayName: "Slot",
+      category: "Components",
+      description: "Define slot content placeholder",
+      icon: "symbol-class",
+      snippet: `@slot('$1')
   $0
-@endslot`},{name:"csrf",displayName:"CSRF Token",category:"Forms",description:"Insert CSRF protection token",icon:"shield",snippet:"@csrf"},{name:"error",displayName:"Error Display",category:"Forms",description:"Display validation error",icon:"error",snippet:`@error('$1')
+@endslot`
+    },
+    {
+      name: "csrf",
+      displayName: "CSRF Token",
+      category: "Forms",
+      description: "Insert CSRF protection token",
+      icon: "shield",
+      snippet: "@csrf"
+    },
+    {
+      name: "error",
+      displayName: "Error Display",
+      category: "Forms",
+      description: "Display validation error",
+      icon: "error",
+      snippet: `@error('$1')
   <span class="error">{{ \\$message }}</span>
-@enderror`},{name:"auth",displayName:"Auth Check",category:"Auth",description:"Show content for authenticated users",icon:"shield",snippet:`@auth
+@enderror`
+    },
+    {
+      name: "auth",
+      displayName: "Auth Check",
+      category: "Auth",
+      description: "Show content for authenticated users",
+      icon: "shield",
+      snippet: `@auth
   $0
-@endauth`},{name:"guest",displayName:"Guest Check",category:"Auth",description:"Show content for guests",icon:"shield",snippet:`@guest
+@endauth`
+    },
+    {
+      name: "guest",
+      displayName: "Guest Check",
+      category: "Auth",
+      description: "Show content for guests",
+      icon: "shield",
+      snippet: `@guest
   $0
-@endguest`},{name:"meta",displayName:"Meta Tag",category:"SEO",description:"Insert meta tag",icon:"search",snippet:"@meta('$1', '$2')"},{name:"title",displayName:"Page Title",category:"SEO",description:"Set page title",icon:"search",snippet:"@title('$1')"},{name:"translate",displayName:"Translation",category:"i18n",description:"Translate a string",icon:"globe",snippet:"@translate('$1')"}]}function i(B,Q,j=""){let G=B.snippet.split(`
-`).map((O,R)=>R===0?O:j+O).join(`
-`),W=G.match(/\$\d/),Z=G.length;if(W)Z=G.indexOf(W[0]);let J=G.replace(/\$\d/g,""),A=J.slice(0,Z),z=A.split(`
-`).length-1,U=A.lastIndexOf(`
-`)+1,D=Z-U;return{content:J,cursorPosition:{line:Q.line+z,column:z===0?Q.column+D:D,offset:Q.offset+Z}}}function C(B){return["if","unless","switch","for","foreach","forelse","while","section","component","slot","push","prepend","auth","guest","can","cannot","role","hasRole","hasAnyRole","error","isset","empty","ts","js","css","markdown","verbatim","once"].includes(B)}function v(B){return["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"].includes(B.toLowerCase())}function b(B){let Q={},j=/([^\s=]+)(?:=["']([^"']*)["'])?/g,Y=B.matchAll(j);for(let V of Y){let[,G,W]=V;Q[G]=W??!0}return Q}function S(B,Q){if(B.length<=Q)return B;return`${B.slice(0,Q-3)}...`}function I(B,Q){return B.slice(0,Q).split(`
-`).length}function g(B,Q){let j=B.lastIndexOf(`
-`,Q-1);return Q-j}export{i as insertPaletteItem,d as getTemplateOutline,p as getDefaultPalette,l as generatePreview,h as analyzeVisualEditorTemplate,u as analyzeTemplateContent};
+@endguest`
+    },
+    {
+      name: "meta",
+      displayName: "Meta Tag",
+      category: "SEO",
+      description: "Insert meta tag",
+      icon: "search",
+      snippet: "@meta('$1', '$2')"
+    },
+    {
+      name: "title",
+      displayName: "Page Title",
+      category: "SEO",
+      description: "Set page title",
+      icon: "search",
+      snippet: "@title('$1')"
+    },
+    {
+      name: "translate",
+      displayName: "Translation",
+      category: "i18n",
+      description: "Translate a string",
+      icon: "globe",
+      snippet: "@translate('$1')"
+    }
+  ];
+}
+export function insertPaletteItem(item, position, indentation = "") {
+  const content = item.snippet.split(`
+`).map((line, i) => i === 0 ? line : indentation + line).join(`
+`), cursorMatch = content.match(/\$\d/);
+  let cursorOffset = content.length;
+  if (cursorMatch)
+    cursorOffset = content.indexOf(cursorMatch[0]);
+  const newContent = content.replace(/\$\d/g, ""), beforeCursor = newContent.slice(0, cursorOffset), cursorLine = beforeCursor.split(`
+`).length - 1, lastLineStart = beforeCursor.lastIndexOf(`
+`) + 1, cursorColumn = cursorOffset - lastLineStart;
+  return {
+    content: newContent,
+    cursorPosition: {
+      line: position.line + cursorLine,
+      column: cursorLine === 0 ? position.column + cursorColumn : cursorColumn,
+      offset: position.offset + cursorOffset
+    }
+  };
+}
+function hasEndTag(directiveName) {
+  return [
+    "if",
+    "unless",
+    "switch",
+    "for",
+    "foreach",
+    "forelse",
+    "while",
+    "section",
+    "component",
+    "slot",
+    "push",
+    "prepend",
+    "auth",
+    "guest",
+    "can",
+    "cannot",
+    "role",
+    "hasRole",
+    "hasAnyRole",
+    "error",
+    "isset",
+    "empty",
+    "ts",
+    "js",
+    "css",
+    "markdown",
+    "verbatim",
+    "once"
+  ].includes(directiveName);
+}
+function isVoidElement(tag) {
+  return [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ].includes(tag.toLowerCase());
+}
+function parseSimpleAttributes(attrsStr) {
+  const attrs = {}, regex = /([^\s=]+)(?:=["']([^"']*)["'])?/g, matches = attrsStr.matchAll(regex);
+  for (const match of matches) {
+    const [, name, value] = match;
+    attrs[name] = value ?? !0;
+  }
+  return attrs;
+}
+function truncate(str, maxLength) {
+  if (str.length <= maxLength)
+    return str;
+  return `${str.slice(0, maxLength - 3)}...`;
+}
+function getLineNumber(template, offset) {
+  return template.slice(0, offset).split(`
+`).length;
+}
+function getColumnNumber(template, offset) {
+  const lastNewline = template.lastIndexOf(`
+`, offset - 1);
+  return offset - lastNewline;
+}