@maizzle/framework 6.0.0-rc.11 → 6.0.0-rc.13

package/dist/server/sfc-utils.mjs

@@ -0,0 +1,184 @@
+import { existsSync } from "node:fs";
+import { basename, dirname, resolve } from "node:path";
+import { glob } from "tinyglobby";
+import { fileURLToPath } from "node:url";
+
+//#region src/server/sfc-utils.ts
+const __dirname = dirname(fileURLToPath(import.meta.url));
+function parseSfcBlocks(source) {
+	let template = null;
+	const styles = [];
+	const templateMatch = source.match(/<template\b[^>]*>([\s\S]*)<\/template>/);
+	if (templateMatch) {
+		const contentStart = source.indexOf(templateMatch[0]) + templateMatch[0].indexOf(templateMatch[1]);
+		const offset = source.slice(0, contentStart).split("\n").length - 1;
+		template = {
+			content: templateMatch[1],
+			offset
+		};
+	}
+	const styleRe = /<style\b([^>]*)>([\s\S]*?)<\/style>/g;
+	let m;
+	while ((m = styleRe.exec(source)) !== null) {
+		if (/\blang\s*=\s*["'](?!css)/i.test(m[1])) continue;
+		const contentStart = m.index + m[0].indexOf(m[2]);
+		const offset = source.slice(0, contentStart).split("\n").length - 1;
+		styles.push({
+			content: m[2],
+			offset
+		});
+	}
+	return {
+		template,
+		styles
+	};
+}
+/**
+* Standard HTML elements — anything not in this set is treated as a component.
+*/
+const HTML_ELEMENTS = new Set([
+	"a",
+	"abbr",
+	"address",
+	"area",
+	"article",
+	"aside",
+	"audio",
+	"b",
+	"base",
+	"bdi",
+	"bdo",
+	"blockquote",
+	"body",
+	"br",
+	"button",
+	"canvas",
+	"caption",
+	"cite",
+	"code",
+	"col",
+	"colgroup",
+	"data",
+	"datalist",
+	"dd",
+	"del",
+	"details",
+	"dfn",
+	"dialog",
+	"div",
+	"dl",
+	"dt",
+	"em",
+	"embed",
+	"fieldset",
+	"figcaption",
+	"figure",
+	"footer",
+	"form",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"head",
+	"header",
+	"hgroup",
+	"hr",
+	"html",
+	"i",
+	"iframe",
+	"img",
+	"input",
+	"ins",
+	"kbd",
+	"label",
+	"legend",
+	"li",
+	"link",
+	"main",
+	"map",
+	"mark",
+	"menu",
+	"meta",
+	"meter",
+	"nav",
+	"noscript",
+	"object",
+	"ol",
+	"optgroup",
+	"option",
+	"output",
+	"p",
+	"picture",
+	"pre",
+	"progress",
+	"q",
+	"rp",
+	"rt",
+	"ruby",
+	"s",
+	"samp",
+	"script",
+	"search",
+	"section",
+	"select",
+	"slot",
+	"small",
+	"source",
+	"span",
+	"strong",
+	"style",
+	"sub",
+	"summary",
+	"sup",
+	"table",
+	"tbody",
+	"td",
+	"template",
+	"textarea",
+	"tfoot",
+	"th",
+	"thead",
+	"time",
+	"title",
+	"tr",
+	"track",
+	"u",
+	"ul",
+	"var",
+	"video",
+	"wbr"
+]);
+function findComponentTags(templateContent) {
+	const tags = /* @__PURE__ */ new Set();
+	const pascalRe = /<([A-Z][a-zA-Z0-9]*)\b/g;
+	let m;
+	while ((m = pascalRe.exec(templateContent)) !== null) tags.add(m[1]);
+	const kebabRe = /<([a-z][a-z0-9]*(?:-[a-z0-9]+)+)\b/g;
+	while ((m = kebabRe.exec(templateContent)) !== null) if (!HTML_ELEMENTS.has(m[1])) tags.add(m[1]);
+	return [...tags];
+}
+async function buildComponentMap(root, componentDirs) {
+	const map = /* @__PURE__ */ new Map();
+	const dirs = [
+		resolve(__dirname, "../components"),
+		resolve(root, "components"),
+		...componentDirs
+	].filter((d) => existsSync(d));
+	for (const dir of dirs) {
+		const files = await glob(["**/*.vue"], {
+			cwd: dir,
+			absolute: true
+		});
+		for (const file of files) {
+			const name = basename(file, ".vue");
+			map.set(name.toLowerCase(), file);
+		}
+	}
+	return map;
+}
+
+//#endregion
+export { HTML_ELEMENTS, buildComponentMap, findComponentTags, parseSfcBlocks };
+//# sourceMappingURL=sfc-utils.mjs.map

package/dist/server/sfc-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sfc-utils.mjs","names":[],"sources":["../../src/server/sfc-utils.ts"],"sourcesContent":["import { existsSync } from 'node:fs'\nimport { resolve, dirname, basename } from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport { glob } from 'tinyglobby'\n\nconst __dirname = dirname(fileURLToPath(import.meta.url))\n\nexport interface SfcBlock {\n  content: string\n  offset: number\n}\n\nexport function parseSfcBlocks(source: string): { template: SfcBlock | null, styles: SfcBlock[] } {\n  let template: SfcBlock | null = null\n  const styles: SfcBlock[] = []\n\n  const templateMatch = source.match(/<template\\b[^>]*>([\\s\\S]*)<\\/template>/)\n  if (templateMatch) {\n    const contentStart = source.indexOf(templateMatch[0]) + templateMatch[0].indexOf(templateMatch[1])\n    const offset = source.slice(0, contentStart).split('\\n').length - 1\n    template = { content: templateMatch[1], offset }\n  }\n\n  const styleRe = /<style\\b([^>]*)>([\\s\\S]*?)<\\/style>/g\n  let m\n  while ((m = styleRe.exec(source)) !== null) {\n    // Skip preprocessor styles (scss, less, etc.) — caniemail only parses plain CSS\n    if (/\\blang\\s*=\\s*[\"'](?!css)/i.test(m[1])) continue\n\n    const contentStart = m.index + m[0].indexOf(m[2])\n    const offset = source.slice(0, contentStart).split('\\n').length - 1\n    styles.push({ content: m[2], offset })\n  }\n\n  return { template, styles }\n}\n\n/**\n * Standard HTML elements — anything not in this set is treated as a component.\n */\nexport const HTML_ELEMENTS = new Set([\n  'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base',\n  'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption',\n  'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del',\n  'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset',\n  'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5',\n  'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img',\n  'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map',\n  'mark', 'menu', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol',\n  'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q',\n  'rp', 'rt', 'ruby', 's', 'samp', 'script', 'search', 'section', 'select',\n  'slot', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary',\n  'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th',\n  'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr',\n])\n\nexport function findComponentTags(templateContent: string): string[] {\n  const tags = new Set<string>()\n\n  // PascalCase tags like <Section>, <Button>\n  const pascalRe = /<([A-Z][a-zA-Z0-9]*)\\b/g\n  let m\n  while ((m = pascalRe.exec(templateContent)) !== null) {\n    tags.add(m[1])\n  }\n\n  // kebab-case tags like <my-component>\n  const kebabRe = /<([a-z][a-z0-9]*(?:-[a-z0-9]+)+)\\b/g\n  while ((m = kebabRe.exec(templateContent)) !== null) {\n    if (!HTML_ELEMENTS.has(m[1])) {\n      tags.add(m[1])\n    }\n  }\n\n  return [...tags]\n}\n\nexport async function buildComponentMap(root: string, componentDirs: string[]): Promise<Map<string, string>> {\n  const map = new Map<string, string>()\n\n  const dirs = [\n    resolve(__dirname, '../components'),\n    resolve(root, 'components'),\n    ...componentDirs,\n  ].filter(d => existsSync(d))\n\n  for (const dir of dirs) {\n    const files = await glob(['**/*.vue'], { cwd: dir, absolute: true })\n    for (const file of files) {\n      const name = basename(file, '.vue')\n      // Store lowercased for case-insensitive matching\n      map.set(name.toLowerCase(), file)\n    }\n  }\n\n  return map\n}\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,QAAQ,cAAc,OAAO,KAAK,IAAI,CAAC;AAOzD,SAAgB,eAAe,QAAmE;CAChG,IAAI,WAA4B;CAChC,MAAM,SAAqB,EAAE;CAE7B,MAAM,gBAAgB,OAAO,MAAM,yCAAyC;AAC5E,KAAI,eAAe;EACjB,MAAM,eAAe,OAAO,QAAQ,cAAc,GAAG,GAAG,cAAc,GAAG,QAAQ,cAAc,GAAG;EAClG,MAAM,SAAS,OAAO,MAAM,GAAG,aAAa,CAAC,MAAM,KAAK,CAAC,SAAS;AAClE,aAAW;GAAE,SAAS,cAAc;GAAI;GAAQ;;CAGlD,MAAM,UAAU;CAChB,IAAI;AACJ,SAAQ,IAAI,QAAQ,KAAK,OAAO,MAAM,MAAM;AAE1C,MAAI,4BAA4B,KAAK,EAAE,GAAG,CAAE;EAE5C,MAAM,eAAe,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG;EACjD,MAAM,SAAS,OAAO,MAAM,GAAG,aAAa,CAAC,MAAM,KAAK,CAAC,SAAS;AAClE,SAAO,KAAK;GAAE,SAAS,EAAE;GAAI;GAAQ,CAAC;;AAGxC,QAAO;EAAE;EAAU;EAAQ;;;;;AAM7B,MAAa,gBAAgB,IAAI,IAAI;CACnC;CAAK;CAAQ;CAAW;CAAQ;CAAW;CAAS;CAAS;CAAK;CAClE;CAAO;CAAO;CAAc;CAAQ;CAAM;CAAU;CAAU;CAC9D;CAAQ;CAAQ;CAAO;CAAY;CAAQ;CAAY;CAAM;CAC7D;CAAW;CAAO;CAAU;CAAO;CAAM;CAAM;CAAM;CAAS;CAC9D;CAAc;CAAU;CAAU;CAAQ;CAAM;CAAM;CAAM;CAAM;CAClE;CAAM;CAAQ;CAAU;CAAU;CAAM;CAAQ;CAAK;CAAU;CAC/D;CAAS;CAAO;CAAO;CAAS;CAAU;CAAM;CAAQ;CAAQ;CAChE;CAAQ;CAAQ;CAAQ;CAAS;CAAO;CAAY;CAAU;CAC9D;CAAY;CAAU;CAAU;CAAK;CAAW;CAAO;CAAY;CACnE;CAAM;CAAM;CAAQ;CAAK;CAAQ;CAAU;CAAU;CAAW;CAChE;CAAQ;CAAS;CAAU;CAAQ;CAAU;CAAS;CAAO;CAC7D;CAAO;CAAS;CAAS;CAAM;CAAY;CAAY;CAAS;CAChE;CAAS;CAAQ;CAAS;CAAM;CAAS;CAAK;CAAM;CAAO;CAAS;CACrE,CAAC;AAEF,SAAgB,kBAAkB,iBAAmC;CACnE,MAAM,uBAAO,IAAI,KAAa;CAG9B,MAAM,WAAW;CACjB,IAAI;AACJ,SAAQ,IAAI,SAAS,KAAK,gBAAgB,MAAM,KAC9C,MAAK,IAAI,EAAE,GAAG;CAIhB,MAAM,UAAU;AAChB,SAAQ,IAAI,QAAQ,KAAK,gBAAgB,MAAM,KAC7C,KAAI,CAAC,cAAc,IAAI,EAAE,GAAG,CAC1B,MAAK,IAAI,EAAE,GAAG;AAIlB,QAAO,CAAC,GAAG,KAAK;;AAGlB,eAAsB,kBAAkB,MAAc,eAAuD;CAC3G,MAAM,sBAAM,IAAI,KAAqB;CAErC,MAAM,OAAO;EACX,QAAQ,WAAW,gBAAgB;EACnC,QAAQ,MAAM,aAAa;EAC3B,GAAG;EACJ,CAAC,QAAO,MAAK,WAAW,EAAE,CAAC;AAE5B,MAAK,MAAM,OAAO,MAAM;EACtB,MAAM,QAAQ,MAAM,KAAK,CAAC,WAAW,EAAE;GAAE,KAAK;GAAK,UAAU;GAAM,CAAC;AACpE,OAAK,MAAM,QAAQ,OAAO;GACxB,MAAM,OAAO,SAAS,MAAM,OAAO;AAEnC,OAAI,IAAI,KAAK,aAAa,EAAE,KAAK;;;AAIrC,QAAO"}

package/dist/server/ui/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, watchEffect } from 'vue'
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
-import { Monitor, CodeXml, Smartphone, ChevronDown, ArrowUp, ArrowDown, CornerDownLeft, Check, Search, Camera, FileCode, FileText, Code, BookText, MailQuestion } from 'lucide-vue-next'
-import { toBlob } from 'html-to-image'
+import { Monitor, CodeXml, Smartphone, ChevronDown, ArrowUp, ArrowDown, CornerDownLeft, Check, Search, FileCode, FileText, Code, BookText, MailQuestion } from 'lucide-vue-next'
+import SidebarClose from '@/components/SidebarClose.vue'
 import logoUrl from '@/logo.svg'
 import logoGradientUrl from '@/logo-gradient.svg'
 import { Kbd } from '@/components/ui/kbd'
@@ -136,32 +136,6 @@ watch(commandOpen, (open) => {
   if (!open) commandSearch.value = ''
 })
 
-const screenshotting = ref(false)
-
-async function copyScreenshot() {
-  commandOpen.value = false
-
-  const iframe = document.querySelector('iframe') as HTMLIFrameElement | null
-  const doc = iframe?.contentDocument
-  if (!doc?.body) return
-
-  screenshotting.value = true
-
-  try {
-    const blob = await toBlob(doc.body, {
-      width: doc.body.scrollWidth,
-      height: doc.body.scrollHeight,
-    })
-
-    if (blob) {
-      await navigator.clipboard.write([
-        new ClipboardItem({ 'image/png': blob })
-      ])
-    }
-  } finally {
-    screenshotting.value = false
-  }
-}
 
 async function copyHtml() {
   commandOpen.value = false
@@ -240,10 +214,6 @@ function onKeydown(e: KeyboardEvent) {
   // Copy shortcuts (Cmd on Mac, Alt on Win/Linux)
   if ((isMac ? e.metaKey : e.altKey) && !e.shiftKey && isPreviewRoute.value) {
     switch (e.key.toLowerCase()) {
-      case 's':
-        e.preventDefault()
-        copyScreenshot()
-        return
       case 'c':
         e.preventDefault()
         copyHtml()
@@ -289,13 +259,14 @@ onUnmounted(() => {
           <img :src="logoUrl" alt="Maizzle" class="h-4 dark:hidden">
           <img :src="logoGradientUrl" alt="Maizzle" class="hidden h-4 dark:block">
         </RouterLink>
-        <button class="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" @click="commandOpen = true">
+        <button class="hidden md:inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" @click="commandOpen = true">
           <Search class="size-3.5" />
           <kbd class="flex items-center gap-0.5 text-[10px] font-sans">
             <span>{{ modKey }}</span>
             <span class="text-gray-300 dark:text-gray-600">K</span>
           </kbd>
         </button>
+        <SidebarClose />
       </SidebarHeader>
 
       <SidebarContent>
@@ -406,14 +377,6 @@ onUnmounted(() => {
 
         <!-- Copy to clipboard commands -->
         <CommandGroup v-if="isPreviewRoute" heading="Copy to clipboard">
-          <CommandItem
-            value="Screenshot"
-            @select="copyScreenshot"
-          >
-            <Camera class="size-3 shrink-0 opacity-50" />
-            <span>Screenshot</span>
-            <CommandShortcut>{{ isMac ? '⌘' : 'ALT+' }}S</CommandShortcut>
-          </CommandItem>
           <CommandItem
             value="HTML"
             @select="copyHtml"

package/dist/server/ui/components/SidebarClose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { PanelRightOpen } from 'lucide-vue-next'
+import { useSidebar } from '@/components/ui/sidebar'
+
+const { setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <button class="md:hidden text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" @click="setOpenMobile(false)">
+    <PanelRightOpen class="size-4" :stroke-width="1" />
+  </button>
+</template>

package/dist/server/ui/components/ui/command/Command.vue

@@ -80,6 +80,7 @@ provideCommandContext({
   <ListboxRoot
     data-slot="command"
     v-bind="forwarded"
+    highlight-on-hover
     :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
   >
     <slot />

package/dist/server/ui/components/ui/input/Input.vue

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
     v-model="modelValue"
     data-slot="input"
     :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'file:text-foreground placeholder:text-gray-400 dark:placeholder:text-gray-500 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
       'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
       'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
       props.class,

package/dist/server/ui/components/ui/sidebar/SidebarTrigger.vue

@@ -21,7 +21,7 @@ const { isMobile, open, toggleSidebar } = useSidebar()
     :class="cn('h-7 w-7 hover:bg-transparent', props.class)"
     @click="toggleSidebar"
   >
-    <svg v-if="isMobile" class="size-4 dark:text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><line x1="3" y1="7" x2="21" y2="7" /><line x1="3" y1="12" x2="15" y2="12" /><line x1="3" y1="17" x2="18" y2="17" /></svg>
+    <PanelRightClose v-if="isMobile" class="size-4 dark:text-gray-400" :stroke-width="1" />
     <PanelRightOpen v-else-if="open" class="dark:text-gray-400" :stroke-width="1" />
     <PanelRightClose v-else class="dark:text-gray-400" :stroke-width="1" />
     <span class="sr-only">Toggle Sidebar</span>

package/dist/server/ui/components/ui/tags-input/TagsInputInput.vue

@@ -13,5 +13,5 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1 placeholder:text-gray-400 dark:placeholder:text-gray-500', props.class)" />
 </template>