@vizejs/vite-plugin-musea 0.426.2 → 0.427.0

package/dist/{gallery-DnAsudTG.mjs.map → gallery-qE5deHL0.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"gallery-DnAsudTG.mjs","names":["stylesBase","stylesLayout","stylesComponents"],"sources":["../src/gallery/styles-base.css?inline","../src/gallery/styles-layout.css?inline","../src/gallery/styles-components.css?inline","../src/gallery/styles.ts","../src/gallery/index.ts"],"sourcesContent":[":root {\n  --musea-bg-primary: #e6e2d6;\n  --musea-bg-secondary: #ddd9cd;\n  --musea-bg-tertiary: #d4d0c4;\n  --musea-bg-elevated: #e6e2d6;\n  --musea-accent: #121212;\n  --musea-accent-hover: #2a2a2a;\n  --musea-accent-subtle: rgba(18, 18, 18, 0.08);\n  --musea-text: #121212;\n  --musea-text-secondary: #3a3a3a;\n  --musea-text-muted: #6b6b6b;\n  --musea-border: #c8c4b8;\n  --musea-border-subtle: #d4d0c4;\n  --musea-success: #16a34a;\n  --musea-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\n  --musea-radius-sm: 4px;\n  --musea-radius-md: 6px;\n  --musea-radius-lg: 8px;\n  --musea-transition: 0.15s ease;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  background: var(--musea-bg-primary);\n  color: var(--musea-text);\n  min-height: 100vh;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\n","/* Header */\n.header {\n  background: var(--musea-bg-secondary);\n  border-bottom: 1px solid var(--musea-border);\n  padding: 0 1.5rem;\n  height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 1.125rem;\n  font-weight: 700;\n  color: var(--musea-accent);\n  text-decoration: none;\n}\n\n.logo-svg {\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n}\n\n.logo-icon svg {\n  width: 16px;\n  height: 16px;\n  color: var(--musea-text);\n}\n\n.header-subtitle {\n  color: var(--musea-text-muted);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  padding-left: 1.5rem;\n  border-left: 1px solid var(--musea-border);\n}\n\n.search-container {\n  position: relative;\n  width: 280px;\n}\n\n.search-input {\n  width: 100%;\n  background: var(--musea-bg-tertiary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-md);\n  padding: 0.5rem 0.75rem 0.5rem 2.25rem;\n  color: var(--musea-text);\n  font-size: 0.8125rem;\n  outline: none;\n  transition:\n    border-color var(--musea-transition),\n    background var(--musea-transition);\n}\n\n.search-input::placeholder {\n  color: var(--musea-text-muted);\n}\n\n.search-input:focus {\n  border-color: var(--musea-accent);\n  background: var(--musea-bg-elevated);\n}\n\n.search-icon {\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--musea-text-muted);\n  pointer-events: none;\n}\n\n/* Layout */\n.main {\n  display: grid;\n  grid-template-columns: 260px 1fr;\n  min-height: calc(100vh - 56px);\n}\n\n/* Sidebar */\n.sidebar {\n  background: var(--musea-bg-secondary);\n  border-right: 1px solid var(--musea-border);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.sidebar::-webkit-scrollbar {\n  width: 6px;\n}\n\n.sidebar::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.sidebar::-webkit-scrollbar-thumb {\n  background: var(--musea-border);\n  border-radius: 3px;\n}\n\n.sidebar-section {\n  padding: 0.75rem;\n}\n\n.category-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.625rem 0.75rem;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--musea-text-muted);\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--musea-radius-sm);\n  transition: background var(--musea-transition);\n}\n\n.category-header:hover {\n  background: var(--musea-bg-tertiary);\n}\n\n.category-icon {\n  width: 16px;\n  height: 16px;\n  transition: transform var(--musea-transition);\n}\n\n.category-header.collapsed .category-icon {\n  transform: rotate(-90deg);\n}\n\n.category-count {\n  margin-left: auto;\n  background: var(--musea-bg-tertiary);\n  padding: 0.125rem 0.375rem;\n  border-radius: 4px;\n  font-size: 0.625rem;\n}\n\n.art-list {\n  list-style: none;\n  margin-top: 0.25rem;\n}\n\n.art-item {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 0.5rem 0.75rem 0.5rem 1.75rem;\n  border-radius: var(--musea-radius-sm);\n  cursor: pointer;\n  font-size: 0.8125rem;\n  color: var(--musea-text-secondary);\n  transition: all var(--musea-transition);\n  position: relative;\n}\n\n.art-item::before {\n  content: \"\";\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--musea-border);\n  transition: background var(--musea-transition);\n}\n\n.art-item:hover {\n  background: var(--musea-bg-tertiary);\n  color: var(--musea-text);\n}\n\n.art-item:hover::before {\n  background: var(--musea-text-muted);\n}\n\n.art-item.active {\n  background: var(--musea-accent-subtle);\n  color: var(--musea-accent-hover);\n}\n\n.art-item.active::before {\n  background: var(--musea-accent);\n}\n\n.art-variant-count {\n  margin-left: auto;\n  font-size: 0.6875rem;\n  color: var(--musea-text-muted);\n  opacity: 0;\n  transition: opacity var(--musea-transition);\n}\n\n.art-item:hover .art-variant-count {\n  opacity: 1;\n}\n\n/* Content */\n.content {\n  background: var(--musea-bg-primary);\n  overflow-y: auto;\n}\n\n.content-inner {\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n.content-header {\n  margin-bottom: 2rem;\n}\n\n.content-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n.content-description {\n  color: var(--musea-text-muted);\n  font-size: 0.9375rem;\n  max-width: 600px;\n}\n\n.content-meta {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n\n.meta-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.25rem 0.625rem;\n  background: var(--musea-bg-secondary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-sm);\n  font-size: 0.75rem;\n  color: var(--musea-text-muted);\n}\n\n.meta-tag svg {\n  width: 12px;\n  height: 12px;\n}\n","/* Gallery Grid */\n.gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  gap: 1.25rem;\n}\n\n/* Variant Card */\n.variant-card {\n  background: var(--musea-bg-secondary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-lg);\n  overflow: hidden;\n}\n\n.variant-preview {\n  aspect-ratio: 16 / 7;\n  background: var(--musea-bg-tertiary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n}\n\n.variant-preview iframe {\n  width: 70%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: none;\n  background: white;\n  border-radius: var(--musea-radius-md);\n  box-shadow: 0 12px 30px rgba(13, 13, 13, 0.12);\n}\n\n.variant-preview-placeholder {\n  color: var(--musea-text-muted);\n  font-size: 0.8125rem;\n  text-align: center;\n  padding: 1rem;\n}\n\n.variant-preview-code {\n  font-family: \"JetBrains Mono\", \"SF Mono\", \"Fira Code\", monospace;\n  font-size: 0.75rem;\n  color: var(--musea-text-muted);\n  background: var(--musea-bg-primary);\n  padding: 1rem;\n  overflow: auto;\n  max-height: 100%;\n  width: 100%;\n}\n\n.variant-info {\n  padding: 1rem;\n  border-top: 1px solid var(--musea-border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.variant-name {\n  font-weight: 600;\n  font-size: 0.875rem;\n}\n\n.variant-badge {\n  font-size: 0.625rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 0.1875rem 0.5rem;\n  border-radius: 4px;\n  background: var(--musea-accent-subtle);\n  color: var(--musea-accent);\n}\n\n.variant-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.variant-action-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: var(--musea-bg-tertiary);\n  border-radius: var(--musea-radius-sm);\n  color: var(--musea-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--musea-transition);\n}\n\n.variant-action-btn:hover {\n  background: var(--musea-bg-elevated);\n  color: var(--musea-text);\n}\n\n.variant-action-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 400px;\n  text-align: center;\n  padding: 2rem;\n}\n\n.empty-state-icon {\n  width: 80px;\n  height: 80px;\n  background: var(--musea-bg-secondary);\n  border-radius: var(--musea-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 1.5rem;\n}\n\n.empty-state-icon svg {\n  width: 40px;\n  height: 40px;\n  color: var(--musea-text-muted);\n}\n\n.empty-state-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n.empty-state-text {\n  color: var(--musea-text-muted);\n  font-size: 0.875rem;\n  max-width: 300px;\n}\n\n/* Loading */\n.loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  color: var(--musea-text-muted);\n  gap: 0.75rem;\n}\n\n.loading-spinner {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--musea-border);\n  border-top-color: var(--musea-accent);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .main {\n    grid-template-columns: 1fr;\n  }\n  .sidebar {\n    display: none;\n  }\n  .header-subtitle {\n    display: none;\n  }\n}\n","/**\n * CSS theme variables and style definitions for the Musea gallery.\n *\n * CSS is split into separate .css files and imported as text\n * via tsdown's `?inline` support.\n */\n\n// @ts-expect-error -- CSS imported as text via tsdown `?inline`\nimport stylesBase from \"./styles-base.css?inline\";\n// @ts-expect-error -- CSS imported as text via tsdown `?inline`\nimport stylesLayout from \"./styles-layout.css?inline\";\n// @ts-expect-error -- CSS imported as text via tsdown `?inline`\nimport stylesComponents from \"./styles-components.css?inline\";\n\n/**\n * Generate the full gallery CSS styles string.\n */\nexport function generateGalleryStyles(): string {\n  return `${stylesBase}\\n${stylesLayout}\\n${stylesComponents}`;\n}\n","/**\n * Gallery HTML generation for the Musea component gallery.\n *\n * Contains the inline gallery SPA template (used as a fallback when the\n * pre-built gallery is not available) and the gallery virtual module.\n */\n\nimport { generateGalleryStyles } from \"./styles.js\";\nimport { generateGalleryBody, generateGalleryScript } from \"./template.js\";\nimport { generateGalleryGlobalsScript } from \"./globals.js\";\nimport type { MuseaTokenPreviewConfig } from \"../tokens/preview.js\";\n\nexport { generateGalleryModule } from \"./module.js\";\n\n/**\n * Generate the inline gallery HTML page.\n */\nexport function generateGalleryHtml(\n  basePath: string,\n  devSessionToken: string,\n  themeConfig?: { default: string; custom?: Record<string, unknown> },\n  tokenPreviewConfig?: MuseaTokenPreviewConfig,\n): string {\n  const globalsScript = generateGalleryGlobalsScript({\n    basePath,\n    devSessionToken,\n    themeConfig,\n    tokenPreviewConfig,\n  });\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Musea - Component Gallery</title>\n  <script>${globalsScript}${\"<\"}/script>\n  <style>${generateGalleryStyles()}\n  </style>\n</head>\n<body>${generateGalleryBody(basePath)}\n\n  <script type=\"module\">${generateGalleryScript(basePath)}\n  </script>\n</body>\n</html>`;\n}\n"],"mappings":";;AAAA,IAAA,sBAAM;;;ACAN,IAAA,wBAAG;;;ACAH,IAAA,4BAAG;;;;;;;;;;;;ACiBH,SAAgB,wBAAgC;CAC9C,OAAO,GAAGA,oBAAW,IAAIC,sBAAa,IAAIC;AAC5C;;;;;;;;;;;;ACFA,SAAgB,oBACd,UACA,iBACA,aACA,oBACQ;CAOR,OAAO;;;;;;YANe,6BAA6B;EACjD;EACA;EACA;EACA;CACF,CAOsB,EAAA;WACb,sBAAsB,EAAE;;;QAG3B,oBAAoB,QAAQ,EAAE;;0BAEZ,sBAAsB,QAAQ,EAAE;;;;AAI1D"}
+{"version":3,"file":"gallery-qE5deHL0.mjs","names":["stylesBase","stylesLayout","stylesComponents"],"sources":["../src/gallery/styles-base.css?inline","../src/gallery/styles-layout.css?inline","../src/gallery/styles-components.css?inline","../src/gallery/styles.ts","../src/gallery/index.ts"],"sourcesContent":[":root {\n  --musea-bg-primary: #e6e2d6;\n  --musea-bg-secondary: #ddd9cd;\n  --musea-bg-tertiary: #d4d0c4;\n  --musea-bg-elevated: #e6e2d6;\n  --musea-accent: #121212;\n  --musea-accent-hover: #2a2a2a;\n  --musea-accent-subtle: rgba(18, 18, 18, 0.08);\n  --musea-text: #121212;\n  --musea-text-secondary: #3a3a3a;\n  --musea-text-muted: #6b6b6b;\n  --musea-border: #c8c4b8;\n  --musea-border-subtle: #d4d0c4;\n  --musea-success: #16a34a;\n  --musea-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\n  --musea-radius-sm: 4px;\n  --musea-radius-md: 6px;\n  --musea-radius-lg: 8px;\n  --musea-transition: 0.15s ease;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  background: var(--musea-bg-primary);\n  color: var(--musea-text);\n  min-height: 100vh;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\n","/* Header */\n.header {\n  background: var(--musea-bg-secondary);\n  border-bottom: 1px solid var(--musea-border);\n  padding: 0 1.5rem;\n  height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 1.125rem;\n  font-weight: 700;\n  color: var(--musea-accent);\n  text-decoration: none;\n}\n\n.logo-svg {\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n}\n\n.logo-icon svg {\n  width: 16px;\n  height: 16px;\n  color: var(--musea-text);\n}\n\n.header-subtitle {\n  color: var(--musea-text-muted);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  padding-left: 1.5rem;\n  border-left: 1px solid var(--musea-border);\n}\n\n.search-container {\n  position: relative;\n  width: 280px;\n}\n\n.search-input {\n  width: 100%;\n  background: var(--musea-bg-tertiary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-md);\n  padding: 0.5rem 0.75rem 0.5rem 2.25rem;\n  color: var(--musea-text);\n  font-size: 0.8125rem;\n  outline: none;\n  transition:\n    border-color var(--musea-transition),\n    background var(--musea-transition);\n}\n\n.search-input::placeholder {\n  color: var(--musea-text-muted);\n}\n\n.search-input:focus {\n  border-color: var(--musea-accent);\n  background: var(--musea-bg-elevated);\n}\n\n.search-icon {\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--musea-text-muted);\n  pointer-events: none;\n}\n\n/* Layout */\n.main {\n  display: grid;\n  grid-template-columns: 260px 1fr;\n  min-height: calc(100vh - 56px);\n}\n\n/* Sidebar */\n.sidebar {\n  background: var(--musea-bg-secondary);\n  border-right: 1px solid var(--musea-border);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.sidebar::-webkit-scrollbar {\n  width: 6px;\n}\n\n.sidebar::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.sidebar::-webkit-scrollbar-thumb {\n  background: var(--musea-border);\n  border-radius: 3px;\n}\n\n.sidebar-section {\n  padding: 0.75rem;\n}\n\n.category-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.625rem 0.75rem;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--musea-text-muted);\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--musea-radius-sm);\n  transition: background var(--musea-transition);\n}\n\n.category-header:hover {\n  background: var(--musea-bg-tertiary);\n}\n\n.category-icon {\n  width: 16px;\n  height: 16px;\n  transition: transform var(--musea-transition);\n}\n\n.category-header.collapsed .category-icon {\n  transform: rotate(-90deg);\n}\n\n.category-count {\n  margin-left: auto;\n  background: var(--musea-bg-tertiary);\n  padding: 0.125rem 0.375rem;\n  border-radius: 4px;\n  font-size: 0.625rem;\n}\n\n.art-list {\n  list-style: none;\n  margin-top: 0.25rem;\n}\n\n.art-item {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 0.5rem 0.75rem 0.5rem 1.75rem;\n  border-radius: var(--musea-radius-sm);\n  cursor: pointer;\n  font-size: 0.8125rem;\n  color: var(--musea-text-secondary);\n  transition: all var(--musea-transition);\n  position: relative;\n}\n\n.art-item::before {\n  content: \"\";\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--musea-border);\n  transition: background var(--musea-transition);\n}\n\n.art-item:hover {\n  background: var(--musea-bg-tertiary);\n  color: var(--musea-text);\n}\n\n.art-item:hover::before {\n  background: var(--musea-text-muted);\n}\n\n.art-item.active {\n  background: var(--musea-accent-subtle);\n  color: var(--musea-accent-hover);\n}\n\n.art-item.active::before {\n  background: var(--musea-accent);\n}\n\n.art-variant-count {\n  margin-left: auto;\n  font-size: 0.6875rem;\n  color: var(--musea-text-muted);\n  opacity: 0;\n  transition: opacity var(--musea-transition);\n}\n\n.art-item:hover .art-variant-count {\n  opacity: 1;\n}\n\n/* Content */\n.content {\n  background: var(--musea-bg-primary);\n  overflow-y: auto;\n}\n\n.content-inner {\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n.content-header {\n  margin-bottom: 2rem;\n}\n\n.content-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n.content-description {\n  color: var(--musea-text-muted);\n  font-size: 0.9375rem;\n  max-width: 600px;\n}\n\n.content-meta {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n\n.meta-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.25rem 0.625rem;\n  background: var(--musea-bg-secondary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-sm);\n  font-size: 0.75rem;\n  color: var(--musea-text-muted);\n}\n\n.meta-tag svg {\n  width: 12px;\n  height: 12px;\n}\n","/* Gallery Grid */\n.gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  gap: 1.25rem;\n}\n\n/* Variant Card */\n.variant-card {\n  background: var(--musea-bg-secondary);\n  border: 1px solid var(--musea-border);\n  border-radius: var(--musea-radius-lg);\n  overflow: hidden;\n}\n\n.variant-preview {\n  aspect-ratio: 16 / 7;\n  background: var(--musea-bg-tertiary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n}\n\n.variant-preview iframe {\n  width: 70%;\n  height: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: none;\n  background: white;\n  border-radius: var(--musea-radius-md);\n  box-shadow: 0 12px 30px rgba(13, 13, 13, 0.12);\n}\n\n.variant-preview-placeholder {\n  color: var(--musea-text-muted);\n  font-size: 0.8125rem;\n  text-align: center;\n  padding: 1rem;\n}\n\n.variant-preview-code {\n  font-family: \"JetBrains Mono\", \"SF Mono\", \"Fira Code\", monospace;\n  font-size: 0.75rem;\n  color: var(--musea-text-muted);\n  background: var(--musea-bg-primary);\n  padding: 1rem;\n  overflow: auto;\n  max-height: 100%;\n  width: 100%;\n}\n\n.variant-info {\n  padding: 1rem;\n  border-top: 1px solid var(--musea-border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.variant-name {\n  font-weight: 600;\n  font-size: 0.875rem;\n}\n\n.variant-badge {\n  font-size: 0.625rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 0.1875rem 0.5rem;\n  border-radius: 4px;\n  background: var(--musea-accent-subtle);\n  color: var(--musea-accent);\n}\n\n.variant-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.variant-action-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: var(--musea-bg-tertiary);\n  border-radius: var(--musea-radius-sm);\n  color: var(--musea-text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--musea-transition);\n}\n\n.variant-action-btn:hover {\n  background: var(--musea-bg-elevated);\n  color: var(--musea-text);\n}\n\n.variant-action-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 400px;\n  text-align: center;\n  padding: 2rem;\n}\n\n.empty-state-icon {\n  width: 80px;\n  height: 80px;\n  background: var(--musea-bg-secondary);\n  border-radius: var(--musea-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 1.5rem;\n}\n\n.empty-state-icon svg {\n  width: 40px;\n  height: 40px;\n  color: var(--musea-text-muted);\n}\n\n.empty-state-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n.empty-state-text {\n  color: var(--musea-text-muted);\n  font-size: 0.875rem;\n  max-width: 300px;\n}\n\n/* Loading */\n.loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  color: var(--musea-text-muted);\n  gap: 0.75rem;\n}\n\n.loading-spinner {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--musea-border);\n  border-top-color: var(--musea-accent);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .main {\n    grid-template-columns: 1fr;\n  }\n  .sidebar {\n    display: none;\n  }\n  .header-subtitle {\n    display: none;\n  }\n}\n","/**\n * CSS theme variables and style definitions for the Musea gallery.\n *\n * CSS is split into separate .css files and imported as text\n * via tsdown's `?inline` support.\n */\n\n// @ts-expect-error -- CSS imported as text via tsdown `?inline`\nimport stylesBase from \"./styles-base.css?inline\";\n// @ts-expect-error -- CSS imported as text via tsdown `?inline`\nimport stylesLayout from \"./styles-layout.css?inline\";\n// @ts-expect-error -- CSS imported as text via tsdown `?inline`\nimport stylesComponents from \"./styles-components.css?inline\";\n\n/**\n * Generate the full gallery CSS styles string.\n */\nexport function generateGalleryStyles(): string {\n  return `${stylesBase}\\n${stylesLayout}\\n${stylesComponents}`;\n}\n","/**\n * Gallery HTML generation for the Musea component gallery.\n *\n * Contains the inline gallery SPA template (used as a fallback when the\n * pre-built gallery is not available) and the gallery virtual module.\n */\n\nimport { generateGalleryStyles } from \"./styles.js\";\nimport { generateGalleryBody, generateGalleryScript } from \"./template.js\";\nimport { generateGalleryGlobalsScript } from \"./globals.js\";\nimport type { MuseaTokenPreviewConfig } from \"../tokens/preview.js\";\n\nexport { generateGalleryModule } from \"./module.js\";\n\n/**\n * Generate the inline gallery HTML page.\n */\nexport function generateGalleryHtml(\n  basePath: string,\n  devSessionToken: string,\n  themeConfig?: { default: string; custom?: Record<string, unknown> },\n  tokenPreviewConfig?: MuseaTokenPreviewConfig,\n): string {\n  const globalsScript = generateGalleryGlobalsScript({\n    basePath,\n    devSessionToken,\n    themeConfig,\n    tokenPreviewConfig,\n  });\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Musea - Component Gallery</title>\n  <script>${globalsScript}${\"<\"}/script>\n  <style>${generateGalleryStyles()}\n  </style>\n</head>\n<body>${generateGalleryBody(basePath)}\n\n  <script type=\"module\">${generateGalleryScript(basePath)}\n  </script>\n</body>\n</html>`;\n}\n"],"mappings":";;AAAA,IAAA,sBAAM;;;ACAN,IAAA,wBAAG;;;ACAH,IAAA,4BAAG;;;;;;;;;;;;ACiBH,SAAgB,wBAAgC;CAC9C,OAAO,GAAGA,oBAAW,IAAIC,sBAAa,IAAIC;AAC5C;;;;;;;;;;;;ACFA,SAAgB,oBACd,UACA,iBACA,aACA,oBACQ;CAOR,OAAO;;;;;;YANe,6BAA6B;EACjD;EACA;EACA;EACA;CACF,CAOsB,EAAA;WACb,sBAAsB,EAAE;;;QAG3B,oBAAoB,QAAQ,EAAE;;0BAEZ,sBAAsB,QAAQ,EAAE;;;;AAI1D"}

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { A as resolveInsideAny, C as parseJsonBody, D as assertVueSourcePath, E as assertArtVueSourcePath, F as loadNative, M as resolveUrlPathInside, N as HttpError, O as decodeUrlComponent, P as analyzeSfcFallback, S as createDevSessionToken, T as validateDevApiRequest, _ as scanArtFiles, a as parseScriptSetupForArt, c as resolveArtComponent, d as resolveReadableArtPath, f as buildThemeConfig, g as resolveScanRoots, h as matchGlob, i as generateArtModule, j as resolveTrustedSourcePath, k as resolveInside, l as allowedSourceRoots, m as generateStorybookFiles, o as rewriteRelativeImportStatement, p as escapeHtml, r as processMuseaArtFile, s as expandSelfTag, t as attachMuseaOptions, u as resolveComponentSourcePath, v as shouldProcess, w as serializeScriptValue, x as collectRequestBody, y as toPascalCase } from "./options-CGA4BetG.mjs";
-import { a as generateGalleryGlobalsScript, i as generateDevGlobalsScript, n as generateGalleryScript, r as generateGalleryModule, t as generateGalleryBody } from "./template-B_y7_OsF.mjs";
+import { A as resolveInside, C as parseJsonBody, D as assertVueSourcePath, E as assertArtVueSourcePath, F as analyzeSfcFallback, I as loadNative, M as resolveTrustedSourcePath, N as resolveUrlPathInside, O as decodeUrlComponent, P as HttpError, S as createDevSessionToken, T as validateDevApiRequest, _ as scanArtFiles, a as parseScriptSetupForArt, c as resolveArtComponent, d as resolveReadableArtPath, f as buildThemeConfig, g as resolveScanRoots, h as matchGlob, i as generateArtModule, j as resolveInsideAny, k as isVueSourcePath, l as allowedSourceRoots, m as generateStorybookFiles, o as rewriteRelativeImportStatement, p as escapeHtml, r as processMuseaArtFile, s as expandSelfTag, t as attachMuseaOptions, u as resolveComponentSourcePath, v as shouldProcess, w as serializeScriptValue, x as collectRequestBody, y as toPascalCase } from "./options-Cd7bzLGr.mjs";
+import { a as generateGalleryGlobalsScript, i as generateDevGlobalsScript, n as generateGalleryScript, r as generateGalleryModule, t as generateGalleryBody } from "./template-DNhEgY8-.mjs";
 import { i as MuseaVrtRunner, n as generateVrtJsonReport, r as generateVrtReport } from "./vrt-UxzWFygI.mjs";
 import { t as MuseaA11yRunner } from "./a11y-Ci9EEv6F.mjs";
 import { n as writeArtFile, t as generateArtFile } from "./autogen-B-N0cJbZ.mjs";
@@ -8,6 +8,7 @@ import fs from "node:fs";
 import path from "node:path";
 import crypto from "node:crypto";
 import { fileURLToPath } from "node:url";
+import ts from "typescript";
 import { VIZE_CONFIG_FILE_ENV, loadConfig } from "@vizejs/vite-plugin";
 import { getResolvedVizeConfigRegistration } from "@vizejs/vite-plugin/internal/config-bridge";
 import * as vite from "vite";
@@ -768,7 +769,7 @@ async function tryLoadSourceGalleryHtml(devServer, url, basePath, devSessionToke
 	return devServer.transformIndexHtml(url, html);
 }
 async function generateFallbackGalleryHtml(basePath, devSessionToken, themeConfig, tokenPreviewConfig) {
-	const { generateGalleryHtml } = await import("./gallery-DnAsudTG.mjs");
+	const { generateGalleryHtml } = await import("./gallery-qE5deHL0.mjs");
 	return generateGalleryHtml(basePath, devSessionToken, themeConfig, tokenPreviewConfig);
 }
 async function serveGalleryAsset(galleryDistDir, requestUrl, res) {
@@ -1977,6 +1978,134 @@ async function handleTokensDelete(ctx, readBody, sendJson, sendError) {
 	}
 }
 //#endregion
+//#region src/script-component-analysis.ts
+/** Read a script component's runtime options without executing project code. */
+function scriptKind(filename) {
+	if (filename.endsWith(".tsx")) return ts.ScriptKind.TSX;
+	if (filename.endsWith(".jsx")) return ts.ScriptKind.JSX;
+	if (filename.endsWith(".js")) return ts.ScriptKind.JS;
+	return ts.ScriptKind.TS;
+}
+function unwrap(expression) {
+	while (ts.isParenthesizedExpression(expression) || ts.isAsExpression(expression) || ts.isSatisfiesExpression(expression) || ts.isNonNullExpression(expression)) expression = expression.expression;
+	return expression;
+}
+function nameOf(name) {
+	if (ts.isIdentifier(name) || ts.isStringLiteral(name) || ts.isNumericLiteral(name)) return name.text;
+	if (ts.isComputedPropertyName(name) && ts.isStringLiteral(name.expression)) return name.expression.text;
+}
+function variable(sourceFile, name) {
+	for (const statement of sourceFile.statements) {
+		if (!ts.isVariableStatement(statement)) continue;
+		for (const declaration of statement.declarationList.declarations) if (ts.isIdentifier(declaration.name) && declaration.name.text === name) return declaration.initializer;
+	}
+}
+function resolved(expression, sourceFile) {
+	expression = unwrap(expression);
+	if (ts.isIdentifier(expression)) {
+		const initializer = variable(sourceFile, expression.text);
+		if (initializer) return unwrap(initializer);
+	}
+	return expression;
+}
+function option(object, name, sourceFile) {
+	for (const property of object.properties) {
+		if (ts.isPropertyAssignment(property) && nameOf(property.name) === name) return resolved(property.initializer, sourceFile);
+		if (ts.isShorthandPropertyAssignment(property) && property.name.text === name) {
+			const initializer = variable(sourceFile, name);
+			if (initializer) return resolved(initializer, sourceFile);
+		}
+	}
+}
+function componentOptions(sourceFile) {
+	const assignment = sourceFile.statements.find((statement) => ts.isExportAssignment(statement));
+	if (!assignment || assignment.isExportEquals) return void 0;
+	let expression = resolved(assignment.expression, sourceFile);
+	if (ts.isCallExpression(expression)) {
+		const callee = expression.expression;
+		if (!(ts.isIdentifier(callee) && callee.text === "defineComponent" || ts.isPropertyAccessExpression(callee) && callee.name.text === "defineComponent") || !expression.arguments[0]) return void 0;
+		expression = resolved(expression.arguments[0], sourceFile);
+	}
+	return ts.isObjectLiteralExpression(expression) ? expression : void 0;
+}
+function literal(expression) {
+	expression = unwrap(expression);
+	if (ts.isStringLiteral(expression) || ts.isNoSubstitutionTemplateLiteral(expression)) return expression.text;
+	if (ts.isNumericLiteral(expression)) return Number(expression.text);
+	if (expression.kind === ts.SyntaxKind.TrueKeyword) return true;
+	if (expression.kind === ts.SyntaxKind.FalseKeyword) return false;
+	if (expression.kind === ts.SyntaxKind.NullKeyword) return null;
+	if (ts.isPrefixUnaryExpression(expression) && ts.isNumericLiteral(expression.operand)) {
+		const value = Number(expression.operand.text);
+		if (expression.operator === ts.SyntaxKind.MinusToken) return -value;
+		if (expression.operator === ts.SyntaxKind.PlusToken) return value;
+	}
+}
+function propType(expression) {
+	if (!expression) return "unknown";
+	expression = unwrap(expression);
+	if (ts.isArrayLiteralExpression(expression)) return expression.elements.map((element) => propType(element)).join(" | ") || "unknown";
+	switch (ts.isIdentifier(expression) ? expression.text : ts.isPropertyAccessExpression(expression) ? expression.name.text : void 0) {
+		case "String": return "string";
+		case "Number": return "number";
+		case "Boolean": return "boolean";
+		case "Array": return "unknown[]";
+		case "Object": return "Record<string, unknown>";
+		default: return "unknown";
+	}
+}
+function analyzeProps(expression, sourceFile) {
+	if (!expression) return [];
+	if (ts.isArrayLiteralExpression(expression)) return expression.elements.flatMap((element) => ts.isStringLiteral(element) ? [{
+		name: element.text,
+		type: "unknown",
+		required: false
+	}] : []);
+	if (!ts.isObjectLiteralExpression(expression)) return [];
+	const props = [];
+	for (const property of expression.properties) {
+		if (!ts.isPropertyAssignment(property)) continue;
+		const name = nameOf(property.name);
+		if (!name) continue;
+		const value = resolved(property.initializer, sourceFile);
+		if (ts.isObjectLiteralExpression(value)) {
+			const type = propType(option(value, "type", sourceFile));
+			const required = option(value, "required", sourceFile)?.kind === ts.SyntaxKind.TrueKeyword;
+			const defaultExpression = option(value, "default", sourceFile);
+			const defaultValue = defaultExpression ? literal(defaultExpression) : void 0;
+			props.push({
+				name,
+				type,
+				required,
+				...defaultValue !== void 0 ? { default_value: defaultValue } : {}
+			});
+		} else props.push({
+			name,
+			type: propType(value),
+			required: false
+		});
+	}
+	return props;
+}
+function analyzeEmits(expression) {
+	if (!expression) return [];
+	if (ts.isArrayLiteralExpression(expression)) return expression.elements.flatMap((element) => ts.isStringLiteral(element) ? [element.text] : []);
+	if (ts.isObjectLiteralExpression(expression)) return expression.properties.flatMap((property) => (ts.isPropertyAssignment(property) || ts.isMethodDeclaration(property)) && nameOf(property.name) ? [nameOf(property.name)] : []);
+	return [];
+}
+function analyzeScriptComponent(source, filename) {
+	const sourceFile = ts.createSourceFile(filename, source, ts.ScriptTarget.Latest, true, scriptKind(filename));
+	const options = componentOptions(sourceFile);
+	if (!options) return {
+		props: [],
+		emits: []
+	};
+	return {
+		props: analyzeProps(option(options, "props", sourceFile), sourceFile),
+		emits: analyzeEmits(option(options, "emits", sourceFile))
+	};
+}
+//#endregion
 //#region src/api-routes/handler-palette.ts
 /**
 * Palette handler for the Musea gallery API.
@@ -2011,7 +2140,7 @@ async function handleArtPalette(ctx, match, sendJson, sendError) {
 		}
 		try {
 			const componentSource = await fs.promises.readFile(resolvedComponentPath, "utf-8");
-			const analysis = binding.analyzeSfc ? binding.analyzeSfc(componentSource, { filename: resolvedComponentPath }) : analyzeSfcFallback(componentSource, { filename: resolvedComponentPath });
+			const analysis = isVueSourcePath(resolvedComponentPath) ? binding.analyzeSfc ? binding.analyzeSfc(componentSource, { filename: resolvedComponentPath }) : analyzeSfcFallback(componentSource, { filename: resolvedComponentPath }) : analyzeScriptComponent(componentSource, resolvedComponentPath);
 			if (analysis.props.length > 0) mergeSfcPropsIntoPalette(palette, analysis.props);
 		} catch {}
 		sendJson(palette);
@@ -2169,9 +2298,10 @@ async function handleArtAnalysis(ctx, match, sendJson, sendError) {
 		const resolvedComponentPath = resolveComponentSourcePath(art, artPath, allowedSourceRoots(ctx.config.root, ctx.scanRoots));
 		if (resolvedComponentPath) {
 			const source = await fs.promises.readFile(resolvedComponentPath, "utf-8");
-			const binding = loadNative();
-			if (binding.analyzeSfc) sendJson(binding.analyzeSfc(source, { filename: resolvedComponentPath }));
-			else sendJson(analyzeSfcFallback(source, { filename: resolvedComponentPath }));
+			if (isVueSourcePath(resolvedComponentPath)) {
+				const binding = loadNative();
+				sendJson(binding.analyzeSfc ? binding.analyzeSfc(source, { filename: resolvedComponentPath }) : analyzeSfcFallback(source, { filename: resolvedComponentPath }));
+			} else sendJson(analyzeScriptComponent(source, resolvedComponentPath));
 		} else sendJson({
 			props: [],
 			emits: []
@@ -2726,18 +2856,27 @@ function createHandleHotUpdate(state) {
 		const { file } = ctx;
 		if (file.endsWith(".art.vue") && state.artFiles.has(file)) {
 			await state.processArtFile(file);
-			const virtualId = VIRTUAL_MUSEA_PREFIX + file + "?musea-virtual";
-			const modules = state.getServer()?.moduleGraph.getModulesByFile(virtualId);
-			if (modules) return [...modules];
+			return artHotUpdateModules(state, file, ctx.modules);
 		}
 		if (state.inlineArt && file.endsWith(".vue") && !file.endsWith(".art.vue") && state.artFiles.has(file)) {
 			await state.processArtFile(file);
-			const virtualId = VIRTUAL_MUSEA_PREFIX + file;
-			const modules = state.getServer()?.moduleGraph.getModulesByFile(virtualId);
-			if (modules) return [...modules];
+			return artHotUpdateModules(state, file, ctx.modules);
 		}
 	};
 }
+function artHotUpdateModules(state, file, sourceModules) {
+	const modules = new Set(sourceModules);
+	const graph = state.getServer()?.moduleGraph;
+	if (!graph) return [...modules];
+	const exactIds = new Set([
+		`${VIRTUAL_MUSEA_PREFIX}${file}?musea-virtual`,
+		`\0musea-art:${file}?musea-virtual`,
+		`\0musea-shared:${file}?musea-virtual`
+	]);
+	const derivedPrefixes = [`\0musea-variant:${file}:`, `\0musea-preview:${file}:`];
+	for (const [id, module] of graph.idToModuleMap) if (exactIds.has(id) || derivedPrefixes.some((prefix) => id.startsWith(prefix))) modules.add(module);
+	return [...modules];
+}
 //#endregion
 //#region src/plugin/apply.ts
 function shouldApplyMuseaPlugin(env) {