kss-modern 1.7.0-beta.0 → 1.7.0-beta.2

package/dist/node/lib/index.mjs

@@ -3,16 +3,13 @@ import process from 'node:process';
 import { fileURLToPath } from 'node:url';
 import fs from 'fs-extra';
 import { glob } from 'tinyglobby';
-import { l as logger, s as sanitizeSpecialCharacters, P as PUG_ERROR_OVERLAY_TAG, r as requireZod, e as evaluateMixinSchema, c as compileMixinModule, p as pugErrorFile, a as compileMarkup, g as getZodVersion, M as MIXIN_COMPILE_OPTIONS, b as getMixinWrapperSource, d as slugify, I as INSERT_VITE_PUG_TAG_RE, f as PUG_SRC_RE, t as themeClassList, h as ensureStartingSlash, i as sectionSanitizeId, j as stripPugErrorOverlay, k as generateId, m as replaceWrapperContent, n as formatSourceCode, o as htmlToSearchText } from '../shared/kss-modern.N3ElcapL.mjs';
-export { q as createLogger } from '../shared/kss-modern.N3ElcapL.mjs';
+import { l as logger, s as sanitizeSpecialCharacters, P as PUG_ERROR_OVERLAY_TAG, r as requireZod, e as evaluateMixinSchema, c as compileMixinModule, p as pugErrorFile, a as compileMarkup, g as getZodVersion, d as discoverMixins, M as MIXIN_COMPILE_OPTIONS, b as getMixinWrapperSource, f as slugify, I as INSERT_VITE_PUG_TAG_RE, h as PUG_SRC_RE, t as themeClassList, i as ensureStartingSlash, j as sectionSanitizeId, k as stripPugErrorOverlay, m as generateId, n as replaceWrapperContent, o as formatSourceCode, q as htmlToSearchText } from '../shared/kss-modern.BOTbHnCm.mjs';
+export { u as createLogger } from '../shared/kss-modern.BOTbHnCm.mjs';
 import { existsSync, readFileSync } from 'node:fs';
 import fs$1 from 'node:fs/promises';
 import { createHash } from 'node:crypto';
 import os from 'node:os';
 import { Worker } from 'node:worker_threads';
-import lex from 'pug-lexer';
-import parse$1 from 'pug-parser';
-import walk from 'pug-walk';
 import htmlLang from '@shikijs/langs/html';
 import markdownLang from '@shikijs/langs/markdown';
 import scssLang from '@shikijs/langs/scss';
@@ -30,6 +27,9 @@ import 'pug';
 import 'consola';
 import 'consola/utils';
 import 'node:module';
+import 'pug-walk';
+import 'pug-lexer';
+import 'pug-parser';
 import 'pug-load';
 
 const HEX_COLOR_RE = /^#[0-9A-F]{6}$/i;
@@ -586,42 +586,6 @@ async function logicalWriteFile(filepath, content) {
   await fs.writeFile(filepath, content);
 }
 
-const MIXIN_SCHEMA_RE = /\bmixinSchema\s*=/;
-const MIXIN_NAME_RE = /^\s*(?:var|let|const)\s+mixinName\s*=\s*(['"])([^'"\n]*)\1\s*(?:;\s*)?$/;
-const MIXIN_KEYWORD_RE = /^\s*mixin\s/m;
-function findMixinCode(block) {
-  const found = {};
-  walk(block, (node) => {
-    if (node.type === "Mixin")
-      return false;
-    if (node.type !== "Code" || node.buffer)
-      return;
-    if (found.schemaSource === void 0 && MIXIN_SCHEMA_RE.test(node.val))
-      found.schemaSource = node.val;
-    const name = MIXIN_NAME_RE.exec(node.val)?.[2];
-    if (found.mixinName === void 0 && name !== void 0)
-      found.mixinName = name;
-  });
-  return found;
-}
-function discoverMixins(source, filename) {
-  if (!MIXIN_KEYWORD_RE.test(source))
-    return [];
-  const ast = parse$1(lex(source, { filename }), { filename, src: source });
-  const mixins = [];
-  for (const node of ast.nodes) {
-    if (node.type !== "Mixin" || node.call)
-      continue;
-    mixins.push({
-      name: node.name,
-      args: node.args ?? null,
-      line: node.line,
-      ...node.block ? findMixinCode(node.block) : {}
-    });
-  }
-  return mixins;
-}
-
 const MIXIN_MANIFEST_PATH = "mixins/manifest.json";
 const MIXIN_OVERVIEW_FILE = "mixins.html";
 function getMixinExplorerHref(id) {
@@ -1846,7 +1810,7 @@ async function generateFullPageFile(data) {
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${data.brandColor.dark}">
       ` : `<meta name="theme-color" content="${data.brandColor}">`}
     <script type="module" src="styleguide-assets/fullpage-aWqc0gjm.js"><\/script>
-    ${data.playgroundConfig ? '<script type="module" src="styleguide-assets/playground-D9faUdLy.js"><\/script>' : ""}
+    ${data.playgroundConfig ? '<script type="module" src="styleguide-assets/playground-BuO-B-Kx.js"><\/script>' : ""}
     ${computedStyleTags}
     ${computedThemeStyleTags}
 </head>
@@ -2957,7 +2921,7 @@ document.addEventListener("DOMContentLoaded", () => {
 //#endregion
 ;
 <\/script>
-    <script type="module" src="styleguide-assets/preview-CsX9psV8.js"><\/script>
+    <script type="module" src="styleguide-assets/preview-C3WnTlhx.js"><\/script>
     <link rel="preload" href="styleguide-assets/fonts/geist-mono-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="styleguide-assets/fonts/geist-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="styleguide-assets/fonts/geist-mono-latin-300-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">

package/dist/node/lib/pug/worker.mjs

@@ -1,5 +1,5 @@
 import { parentPort } from 'node:worker_threads';
-import { r as requireZod, e as evaluateMixinSchema, c as compileMixinModule, a as compileMarkup, p as pugErrorFile } from '../../shared/kss-modern.N3ElcapL.mjs';
+import { r as requireZod, e as evaluateMixinSchema, c as compileMixinModule, a as compileMarkup, p as pugErrorFile } from '../../shared/kss-modern.BOTbHnCm.mjs';
 import 'node:path';
 import 'pug';
 import 'node:fs';
@@ -8,6 +8,8 @@ import 'consola';
 import 'consola/utils';
 import 'node:module';
 import 'pug-walk';
+import 'pug-lexer';
+import 'pug-parser';
 import 'pug-load';
 
 if (!parentPort) {

package/dist/node/shared/{kss-modern.N3ElcapL.mjs → kss-modern.BOTbHnCm.mjs}

@@ -6,6 +6,8 @@ import { createConsola } from 'consola';
 import { colors } from 'consola/utils';
 import { createRequire } from 'node:module';
 import walk from 'pug-walk';
+import lex from 'pug-lexer';
+import parse from 'pug-parser';
 import pugLoad from 'pug-load';
 
 const sectionSanitizeId = (id2) => id2.toLowerCase().replaceAll(".", "-");
@@ -98,6 +100,72 @@ function generateId() {
   return value;
 }
 
+const MIXIN_SCHEMA_RE = /\bmixinSchema\s*=/;
+const MIXIN_NAME_RE = /^\s*(?:var|let|const)\s+mixinName\s*=\s*(['"])([^'"\n]*)\1\s*(?:;\s*)?$/;
+const MIXIN_KEYWORD_RE = /^\s*mixin\s/m;
+function findMixinCode(block) {
+  const found = {};
+  walk(block, (node) => {
+    if (node.type === "Mixin")
+      return false;
+    if (node.type !== "Code" || node.buffer)
+      return;
+    if (found.schemaSource === void 0 && MIXIN_SCHEMA_RE.test(node.val))
+      found.schemaSource = node.val;
+    const name = MIXIN_NAME_RE.exec(node.val)?.[2];
+    if (found.mixinName === void 0 && name !== void 0)
+      found.mixinName = name;
+  });
+  return found;
+}
+function discoverMixins(source, filename) {
+  if (!MIXIN_KEYWORD_RE.test(source))
+    return [];
+  const ast = parse(lex(source, { filename }), { filename, src: source });
+  const mixins = [];
+  for (const node of ast.nodes) {
+    if (node.type !== "Mixin" || node.call)
+      continue;
+    mixins.push({
+      name: node.name,
+      args: node.args ?? null,
+      line: node.line,
+      ...node.block ? findMixinCode(node.block) : {}
+    });
+  }
+  return mixins;
+}
+
+function getMixinMarkerName(name, mixinName) {
+  const segment = mixinName?.split("/").map((part) => part.trim()).filter(Boolean).at(-1) ?? name;
+  return segment.replace(/([a-z\d])([A-Z])/g, "$1 $2").replace(/[-_\s]+/g, " ").trim().toUpperCase();
+}
+function createComment(val, node) {
+  return { type: "Comment", val, buffer: true, line: node.line, column: node.column, filename: node.filename };
+}
+function hasStartMarker(nodes) {
+  return nodes.some((node) => node.type === "Comment" && node.buffer === true && node.val?.trim().startsWith("START "));
+}
+const mixinMarkerPlugin = {
+  preCodeGen(ast) {
+    return walk(ast, (node) => {
+      if (node.type !== "Mixin" || node.call || !node.block || typeof node.name !== "string")
+        return;
+      if (hasStartMarker(node.block.nodes))
+        return;
+      const { schemaSource, mixinName } = findMixinCode(node.block);
+      if (schemaSource === void 0)
+        return;
+      const markerName = getMixinMarkerName(node.name, mixinName);
+      node.block.nodes = [
+        createComment(` START ${markerName}`, node),
+        ...node.block.nodes,
+        createComment(` END ${markerName}`, node)
+      ];
+    });
+  }
+};
+
 const parseCache = /* @__PURE__ */ new Map();
 function signatureOf(filename) {
   try {
@@ -178,7 +246,7 @@ function compileMixinModule(file, name) {
     ...MIXIN_COMPILE_OPTIONS,
     // a sibling of the mixin's file, so its relative includes resolve exactly as in the file itself
     filename: path.join(path.dirname(absoluteFile), `__kss-mixin-${name}.pug`),
-    plugins: [mixinPugPlugin]
+    plugins: [mixinPugPlugin, mixinMarkerPlugin]
   });
   return {
     code: `${body}
@@ -195,6 +263,7 @@ const BOOLEAN_KEYS = ["type", "enum", "const", ...ANNOTATION_KEYS];
 const ARRAY_KEYS = ["type", "items", "minItems", "maxItems", ...ANNOTATION_KEYS];
 const LITERAL_UNION_KEYS = ["anyOf", ...ANNOTATION_KEYS];
 const ROOT_KEYS = ["$schema", "type", "properties", "required", "additionalProperties", ...ANNOTATION_KEYS];
+const ENTRY_KEYS = ["type", "properties", "required", "additionalProperties", ...ANNOTATION_KEYS];
 const CHECKED_FORMATS = ["email", "uri"];
 function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -205,7 +274,19 @@ function isLiteral(value) {
 function checkKeys(schema, allowed) {
   return Object.keys(schema).filter((key) => !allowed.includes(key)).map((key) => `uses "${key}", which comes from a zod feature the playground does not support`);
 }
-function checkValue(schema, isArrayItem) {
+function checkEntry(schema) {
+  if (!isObject(schema.properties))
+    return ["is an object without fields, which is not supported"];
+  const errors = checkKeys(schema, ENTRY_KEYS);
+  if (schema.additionalProperties !== void 0 && schema.additionalProperties !== false)
+    errors.push("allows unknown keys (z.looseObject or .catchall()), which is not supported");
+  for (const [key, field] of Object.entries(schema.properties)) {
+    const fieldErrors = isObject(field) ? checkValue(field, "entry-field") : ["is not a schema"];
+    errors.push(...fieldErrors.map((error) => `field "${key}" ${error}`));
+  }
+  return errors;
+}
+function checkValue(schema, position) {
   if (Array.isArray(schema.anyOf)) {
     if (!schema.anyOf.every(isLiteral))
       return ["is a union, only unions of z.literal() values are supported"];
@@ -226,17 +307,23 @@ function checkValue(schema, isArrayItem) {
     case "boolean":
       return checkKeys(schema, BOOLEAN_KEYS);
     case "array": {
-      if (isArrayItem)
-        return ["is an array of arrays, only arrays of strings, numbers, booleans and enums are supported"];
+      if (position === "array-item")
+        return ["is an array of arrays, only arrays of scalars or of flat objects are supported"];
+      if (position === "entry-field")
+        return ["is an array, the fields of a list entry must be scalars"];
       if (!isObject(schema.items))
         return ["is an array without an item type (a tuple), which is not supported"];
       return [
         ...checkKeys(schema, ARRAY_KEYS),
-        ...checkValue(schema.items, true).map((error) => `items ${error}`)
+        ...checkValue(schema.items, "array-item").map((error) => `items ${error}`)
       ];
     }
     case "object":
-      return [isArrayItem ? "is an array of objects, only arrays of strings, numbers, booleans and enums are supported" : "is an object (or record), nested objects are not supported"];
+      if (position === "array-item")
+        return checkEntry(schema);
+      if (position === "entry-field")
+        return ["is an object, the fields of a list entry must be scalars"];
+      return ["is an object (or record), nested objects are not supported; use an array of objects for a list of entries"];
     default:
       return ["has a type the playground cannot edit (e.g. z.any() or z.unknown())"];
   }
@@ -248,7 +335,7 @@ function checkSchemaSupport(schema) {
   if (schema.additionalProperties !== void 0 && schema.additionalProperties !== false)
     errors.push("the schema allows unknown keys (z.looseObject or .catchall()), which is not supported");
   for (const [key, property] of Object.entries(schema.properties)) {
-    const propertyErrors = isObject(property) ? checkValue(property, false) : ["is not a schema"];
+    const propertyErrors = isObject(property) ? checkValue(property, "prop") : ["is not a schema"];
     errors.push(...propertyErrors.map((error) => `prop "${key}" ${error}`));
   }
   return errors;
@@ -417,8 +504,9 @@ function compilePugFile(pugFilePath, mode, sectionId, extraLocals = {}) {
     // line-mapping — measurably bloating codegen and `new Function`. We surface compile errors via
     // our own overlay, so the precise pug line in a runtime stack isn't worth the cost.
     compileDebug: false,
-    // records which mixins the section calls, see ./mixin-trace.ts
-    plugins: [mixinTracePlugin]
+    // START/END comments around public mixins, see ./mixin-markers.ts; records which mixins the
+    // section calls, see ./mixin-trace.ts
+    plugins: [mixinMarkerPlugin, mixinTracePlugin]
   });
   const dependencies = [path.resolve(pugFilePath), ...pugFn.dependencies.map((dep) => path.resolve(dep))];
   const locals = { modifierClass: "{{modifier_class}}", ...extraLocals, useId: createUseId(sectionId) };
@@ -480,4 +568,4 @@ async function compileMarkup(contentDir, mode, html, sectionId) {
   return { html: result, dependencies: [...new Set(dependencies)], mixinUsage: mergeMixinUsage(mixinUsage) };
 }
 
-export { INSERT_VITE_PUG_TAG_RE as I, MIXIN_COMPILE_OPTIONS as M, PUG_ERROR_OVERLAY_TAG as P, compileMarkup as a, getMixinWrapperSource as b, compileMixinModule as c, slugify as d, evaluateMixinSchema as e, PUG_SRC_RE as f, getZodVersion as g, ensureStartingSlash as h, sectionSanitizeId as i, stripPugErrorOverlay as j, generateId as k, logger as l, replaceWrapperContent as m, formatSourceCode as n, htmlToSearchText as o, pugErrorFile as p, createLogger as q, requireZod as r, sanitizeSpecialCharacters as s, themeClassList as t };
+export { INSERT_VITE_PUG_TAG_RE as I, MIXIN_COMPILE_OPTIONS as M, PUG_ERROR_OVERLAY_TAG as P, compileMarkup as a, getMixinWrapperSource as b, compileMixinModule as c, discoverMixins as d, evaluateMixinSchema as e, slugify as f, getZodVersion as g, PUG_SRC_RE as h, ensureStartingSlash as i, sectionSanitizeId as j, stripPugErrorOverlay as k, logger as l, generateId as m, replaceWrapperContent as n, formatSourceCode as o, pugErrorFile as p, htmlToSearchText as q, requireZod as r, sanitizeSpecialCharacters as s, themeClassList as t, createLogger as u };

package/dist/styleguide-assets/.vite/manifest.json

@@ -21,8 +21,8 @@
     "file": "code-highlight-Fm7cxf-E.js",
     "name": "code-highlight"
   },
-  "_controller-BLn-0hDZ.js": {
-    "file": "controller-BLn-0hDZ.js",
+  "_controller-BduQiyRp.js": {
+    "file": "controller-BduQiyRp.js",
     "name": "controller",
     "imports": [
       "_utils-DtB-AzJa.js",
@@ -147,14 +147,14 @@
     ]
   },
   "client/lib/playground/explorer.ts": {
-    "file": "explorer-ADHDxFj8.js",
+    "file": "explorer-B2UH96jd.js",
     "name": "explorer",
     "src": "client/lib/playground/explorer.ts",
     "isDynamicEntry": true,
     "imports": [
       "_code-highlight-Fm7cxf-E.js",
       "_utils-DtB-AzJa.js",
-      "_controller-BLn-0hDZ.js",
+      "_controller-BduQiyRp.js",
       "_alerts-DIQ8TeZB.js"
     ]
   },
@@ -169,13 +169,13 @@
     ]
   },
   "client/playground.ts": {
-    "file": "playground-D9faUdLy.js",
+    "file": "playground-BuO-B-Kx.js",
     "name": "playground",
     "src": "client/playground.ts",
     "isEntry": true,
     "imports": [
       "_shared-hGcWlnRM.js",
-      "_controller-BLn-0hDZ.js"
+      "_controller-BduQiyRp.js"
     ]
   },
   "client/preview-inline.ts": {
@@ -185,7 +185,7 @@
     "isEntry": true
   },
   "client/preview.ts": {
-    "file": "preview-CsX9psV8.js",
+    "file": "preview-C3WnTlhx.js",
     "name": "preview",
     "src": "client/preview.ts",
     "isEntry": true,

package/dist/styleguide-assets/{controller-BLn-0hDZ.js → controller-BduQiyRp.js}

@@ -64,13 +64,20 @@ function d(e) {
 			hasDefault: "default" in r,
 			hasExample: i.length > 0
 		};
-		return r.type === "array" ? {
-			...a,
-			kind: "array",
-			items: u(s(r.items) ? r.items : {}),
-			minItems: c(r.minItems),
-			maxItems: c(r.maxItems)
-		} : {
+		if (r.type === "array") {
+			let e = s(r.items) ? r.items : {};
+			return {
+				...a,
+				kind: "array",
+				items: e.type === "object" ? {
+					kind: "object",
+					fields: d(e)
+				} : u(e),
+				minItems: c(r.minItems),
+				maxItems: c(r.maxItems)
+			};
+		}
+		return {
 			...a,
 			...u(r)
 		};
@@ -86,99 +93,131 @@ function f(e) {
 	}
 }
 function p(e) {
+	if (e.kind !== "object") return f(e);
+	let t = {};
+	for (let n of e.fields) n.hasDefault ? t[n.key] = n.default : n.isOptional || (t[n.key] = f(n));
+	return t;
+}
+function m(e) {
 	if (e.hasDefault) return e.default;
 	if (e.hasExample) return e.example;
 	if (!e.isOptional) return e.kind === "array" ? [] : f(e);
 }
-function m(e, t) {
-	return Object.fromEntries(e.map((e) => [e.key, t ? t[e.key] : p(e)]));
-}
 function h(e, t) {
+	return Object.fromEntries(e.map((e) => [e.key, t ? t[e.key] : m(e)]));
+}
+function g(e, t) {
 	let n = {};
 	for (let r of e) t[r.key] !== void 0 && (n[r.key] = t[r.key]);
 	return n;
 }
 //#endregion
 //#region client/lib/playground/panel.css?inline
-var g = "@layer settings{:host{--color-surface-primary:var(--styleguide-color-background-highlight,light-dark(#fff,#0a0a0a));--color-surface-sunken:var(--styleguide-color-background,light-dark(#fafafa,#050505));--color-text-primary:var(--styleguide-color-highlight,light-dark(#111827,#fafafa));--color-text-secondary:var(--styleguide-color-regular,light-dark(#666,#a3a3a3));--color-border-default:var(--styleguide-color-border,light-dark(#ebebeb,#1f1f1f));--color-border-focus:var(--styleguide-color-theme-highlight,light-dark(#2463eb,#92c2fc));--color-status-error:light-dark(#ba1c1c,#f87272);--font-mono:ui-monospace, \"Geist Mono\", sfmono-regular, menlo, monospace;--radius-default:.75em;--radius-small:.5em;--duration-fast:.15s;--ease-out:cubic-bezier(.23, 1, .32, 1)}:host([data-standalone]){--color-surface-primary:light-dark(#fff,#0a0a0a);--color-surface-sunken:light-dark(#fafafa,#050505);--color-text-primary:light-dark(#111827,#fafafa);--color-text-secondary:light-dark(#525252,#a3a3a3);--color-border-default:light-dark(#e6e6e6,#262626);--color-border-focus:light-dark(#2463eb,#92c2fc);color-scheme:light dark}:host([data-scheme=light]){color-scheme:light}:host([data-scheme=dark]){color-scheme:dark}}@layer generic{:host{display:block}.c-panel,.c-launcher{color:var(--color-text-secondary);font-size:.875rem;line-height:1.45}:host([data-standalone]) :is(.c-panel,.c-launcher){font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px}*,:before,:after{box-sizing:border-box}:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}[hidden]{display:none!important}}@layer components{.c-panel{border:1px solid var(--color-border-default);border-radius:var(--radius-default);background:var(--color-surface-primary);flex-direction:column;min-block-size:0;max-block-size:100%;display:flex;overflow:hidden}:host([data-standalone]) .c-panel{block-size:100%;box-shadow:0 0 0 1px var(--color-border-default), 0 .5em 2em #0000001f;border-width:0;border-radius:0}:host([data-flush]) .c-panel{border-width:0;border-radius:0}:host([data-flush]) .c-panel__header{display:none}.c-panel__header{border-block-end:1px solid var(--color-border-default);align-items:center;gap:.5em;padding-block:.5em;padding-inline:1em .5em;display:flex}.c-panel__title{min-inline-size:0;color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:1em;font-weight:600;line-height:2em;overflow:hidden}.c-panel__body{gap:1em;min-block-size:0;padding:1em;display:grid;overflow-y:auto}.c-panel__message{border-radius:var(--radius-small);color:var(--color-status-error);white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid;margin:0;padding-block:.5em;padding-inline:.75em}.c-panel__footer{border-block-start:1px solid var(--color-border-default);background:var(--color-surface-sunken);justify-content:space-between;align-items:center;gap:.5em;padding-block:.5em;padding-inline:1em;display:flex}.c-panel__call{min-inline-size:0;font-family:var(--font-mono);color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.75em;overflow:hidden}.c-field{gap:.25em;display:grid}.c-field__label{font-family:var(--font-mono);color:var(--color-text-primary);font-weight:600}.c-field__type{font-family:var(--font-mono)}.c-field__help,.c-field__error{margin:0;font-size:.75em}.c-field__error{color:var(--color-status-error)}.c-control{border:1px solid var(--color-border-default);border-radius:var(--radius-small);background:var(--color-surface-sunken);inline-size:100%;color:var(--color-text-primary);font:inherit;margin:0;padding-block:.375em;padding-inline:.625em;font-size:max(16px,1em);line-height:1.4;display:block}@media (hover:hover) and (pointer:fine){.c-control{font-size:inherit}}.c-control--select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - .9375em),calc(100% - .625em);background-repeat:no-repeat;background-size:.3125em .3125em;padding-inline-end:2em}.c-control--textarea{resize:vertical;min-block-size:5.5em;font-family:var(--font-mono);font-size:.75em}.c-control[aria-invalid=true]{border-color:var(--color-status-error)}.c-control:disabled,.c-checkbox:disabled{opacity:.5;cursor:not-allowed}.c-checkbox-row{cursor:pointer;align-items:center;gap:.5em;display:inline-flex}.c-checkbox{block-size:1em;inline-size:1em;accent-color:var(--color-border-focus);cursor:pointer;margin:0}.c-button{border:1px solid var(--color-border-default);border-radius:var(--radius-small);background:var(--color-surface-primary);min-block-size:2em;min-inline-size:2em;color:var(--color-text-primary);font:inherit;white-space:nowrap;cursor:pointer;transition-property:border-color,scale;transition-duration:var(--duration-fast);transition-timing-function:var(--ease-out);justify-content:center;align-items:center;gap:.25em;margin:0;padding-block:.25em;padding-inline:.625em;font-size:.875em;display:inline-flex}.c-button:active{scale:.96}@media (hover:hover) and (pointer:fine){.c-button:hover{border-color:var(--color-border-focus)}}.c-button svg{block-size:1em;inline-size:1em}.c-button--icon{min-inline-size:2em;padding-inline:0}.c-button:disabled{opacity:.5;cursor:not-allowed}.c-list-editor{justify-items:start;gap:.5em;display:grid}.c-list{gap:.375em;inline-size:100%;margin:0;padding:0;list-style:none;display:grid}.c-list__item{grid-template-columns:minmax(0,1fr) repeat(3,auto);align-items:center;gap:.25em;display:grid}.c-resize-handle{z-index:1;touch-action:none;background:0 0;border:0;padding:0;position:absolute}.c-resize-handle:after{content:\"\";background:var(--color-text-secondary);opacity:0;transition:opacity var(--duration-fast) var(--ease-out);border-radius:999px;position:absolute}@media (hover:hover) and (pointer:fine){.c-resize-handle:hover:after{opacity:.4}}.c-resize-handle:focus-visible:after{opacity:.6}:host([data-dock=right]) .c-resize-handle{cursor:col-resize;inline-size:.5em;inset-block:0;inset-inline-start:-.25em}:host([data-dock=right]) .c-resize-handle:after{inline-size:2px;inset-block:40%;inset-inline-start:.1875em}:host([data-dock=bottom]) .c-resize-handle{cursor:row-resize;block-size:.5em;inset-block-start:-.25em;inset-inline:0}:host([data-dock=bottom]) .c-resize-handle:after{block-size:2px;inset-block-start:.1875em;inset-inline:40%}.c-launcher{box-shadow:0 .25em 1em #00000029}@media (prefers-reduced-motion:reduce){.c-button,.c-resize-handle:after{transition:none}}}@layer utilities{.u-sr-only{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}";
+var _ = "@layer settings{:host{--color-surface-primary:var(--styleguide-color-background-highlight,light-dark(#fff,#0a0a0a));--color-surface-sunken:var(--styleguide-color-background,light-dark(#fafafa,#050505));--color-text-primary:var(--styleguide-color-highlight,light-dark(#111827,#fafafa));--color-text-secondary:var(--styleguide-color-regular,light-dark(#666,#a3a3a3));--color-border-default:var(--styleguide-color-border,light-dark(#ebebeb,#1f1f1f));--color-border-focus:var(--styleguide-color-theme-highlight,light-dark(#2463eb,#92c2fc));--color-status-error:light-dark(#ba1c1c,#f87272);--font-mono:ui-monospace, \"Geist Mono\", sfmono-regular, menlo, monospace;--radius-default:.75em;--radius-small:.5em;--duration-fast:.15s;--ease-out:cubic-bezier(.23, 1, .32, 1)}:host([data-standalone]){--color-surface-primary:light-dark(#fff,#0a0a0a);--color-surface-sunken:light-dark(#fafafa,#050505);--color-text-primary:light-dark(#111827,#fafafa);--color-text-secondary:light-dark(#525252,#a3a3a3);--color-border-default:light-dark(#e6e6e6,#262626);--color-border-focus:light-dark(#2463eb,#92c2fc);color-scheme:light dark}:host([data-scheme=light]){color-scheme:light}:host([data-scheme=dark]){color-scheme:dark}}@layer generic{:host{display:block}.c-panel,.c-launcher{color:var(--color-text-secondary);font-size:.875rem;line-height:1.45}:host([data-standalone]) :is(.c-panel,.c-launcher){font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px}*,:before,:after{box-sizing:border-box}:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}[hidden]{display:none!important}}@layer components{.c-panel{border:1px solid var(--color-border-default);border-radius:var(--radius-default);background:var(--color-surface-primary);flex-direction:column;min-block-size:0;max-block-size:100%;display:flex;overflow:hidden}:host([data-standalone]) .c-panel{block-size:100%;box-shadow:0 0 0 1px var(--color-border-default), 0 .5em 2em #0000001f;border-width:0;border-radius:0}:host([data-flush]) .c-panel{border-width:0;border-radius:0}:host([data-flush]) .c-panel__header{display:none}.c-panel__header{border-block-end:1px solid var(--color-border-default);align-items:center;gap:.5em;padding-block:.5em;padding-inline:1em .5em;display:flex}.c-panel__title{min-inline-size:0;color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:1em;font-weight:600;line-height:2em;overflow:hidden}.c-panel__body{gap:1em;min-block-size:0;padding:1em;display:grid;overflow-y:auto}.c-panel__message{border-radius:var(--radius-small);color:var(--color-status-error);white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid;margin:0;padding-block:.5em;padding-inline:.75em}.c-panel__footer{border-block-start:1px solid var(--color-border-default);background:var(--color-surface-sunken);justify-content:space-between;align-items:center;gap:.5em;padding-block:.5em;padding-inline:1em;display:flex}.c-panel__call{min-inline-size:0;font-family:var(--font-mono);color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.75em;overflow:hidden}.c-field{gap:.25em;display:grid}.c-field__label{font-family:var(--font-mono);color:var(--color-text-primary);font-weight:600}.c-field__type{font-family:var(--font-mono)}.c-field__help,.c-field__error{margin:0;font-size:.75em}.c-field__error{color:var(--color-status-error)}.c-control{border:1px solid var(--color-border-default);border-radius:var(--radius-small);background:var(--color-surface-sunken);inline-size:100%;color:var(--color-text-primary);font:inherit;margin:0;padding-block:.375em;padding-inline:.625em;font-size:max(16px,1em);line-height:1.4;display:block}@media (hover:hover) and (pointer:fine){.c-control{font-size:inherit}}.c-control--select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - .9375em),calc(100% - .625em);background-repeat:no-repeat;background-size:.3125em .3125em;padding-inline-end:2em}.c-control--textarea{resize:vertical;min-block-size:5.5em;font-family:var(--font-mono);font-size:.75em}.c-control[aria-invalid=true]{border-color:var(--color-status-error)}.c-control:disabled,.c-checkbox:disabled{opacity:.5;cursor:not-allowed}.c-checkbox-row{cursor:pointer;align-items:center;gap:.5em;display:inline-flex}.c-checkbox{block-size:1em;inline-size:1em;accent-color:var(--color-border-focus);cursor:pointer;margin:0}.c-button{border:1px solid var(--color-border-default);border-radius:var(--radius-small);background:var(--color-surface-primary);min-block-size:2em;min-inline-size:2em;color:var(--color-text-primary);font:inherit;white-space:nowrap;cursor:pointer;transition-property:border-color,scale;transition-duration:var(--duration-fast);transition-timing-function:var(--ease-out);justify-content:center;align-items:center;gap:.25em;margin:0;padding-block:.25em;padding-inline:.625em;font-size:.875em;display:inline-flex}.c-button:active{scale:.96}@media (hover:hover) and (pointer:fine){.c-button:hover{border-color:var(--color-border-focus)}}.c-button svg{block-size:1em;inline-size:1em}.c-button--icon{min-inline-size:2em;padding-inline:0}.c-button:disabled{opacity:.5;cursor:not-allowed}.c-list-editor{justify-items:start;gap:.5em;display:grid}.c-list{gap:.375em;inline-size:100%;margin:0;padding:0;list-style:none;display:grid}.c-list__item{grid-template-columns:minmax(0,1fr) repeat(3,auto);align-items:center;gap:.25em;display:grid}.c-list__item--entry{align-items:start}.c-entry{border:1px solid var(--color-border-default);border-radius:var(--radius-small);gap:.375em;padding:.5em;display:grid}.c-entry__field{gap:.125em;display:grid}.c-entry__label{font-family:var(--font-mono);color:var(--color-text-primary);font-size:.875em}.c-resize-handle{z-index:1;touch-action:none;background:0 0;border:0;padding:0;position:absolute}.c-resize-handle:after{content:\"\";background:var(--color-text-secondary);opacity:0;transition:opacity var(--duration-fast) var(--ease-out);border-radius:999px;position:absolute}@media (hover:hover) and (pointer:fine){.c-resize-handle:hover:after{opacity:.4}}.c-resize-handle:focus-visible:after{opacity:.6}:host([data-dock=right]) .c-resize-handle{cursor:col-resize;inline-size:.5em;inset-block:0;inset-inline-start:-.25em}:host([data-dock=right]) .c-resize-handle:after{inline-size:2px;inset-block:40%;inset-inline-start:.1875em}:host([data-dock=bottom]) .c-resize-handle{cursor:row-resize;block-size:.5em;inset-block-start:-.25em;inset-inline:0}:host([data-dock=bottom]) .c-resize-handle:after{block-size:2px;inset-block-start:.1875em;inset-inline:40%}.c-launcher{box-shadow:0 .25em 1em #00000029}@media (prefers-reduced-motion:reduce){.c-button,.c-resize-handle:after{transition:none}}}@layer utilities{.u-sr-only{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}";
 //#endregion
 //#region client/lib/playground/panel.ts
-function _(e, t = {}, n = []) {
+function v(e, t = {}, n = []) {
 	let r = document.createElement(e);
 	for (let [e, n] of Object.entries(t)) n === void 0 || n === !1 || r.setAttribute(e, n === !0 ? "" : n);
 	return r.append(...n), r;
 }
-function v(e) {
+function y(e) {
 	return e === void 0 ? void 0 : String(e);
 }
-var y = "—";
-function b(e, t, n, r, i, a) {
-	let o = _("select", {
+var b = "—";
+function x(e, t, n, r, i, a) {
+	let o = v("select", {
 		...r,
 		class: "c-control c-control--select"
 	});
-	n && o.append(_("option", { value: "" }, [y]));
-	for (let t of e) o.append(_("option", { value: JSON.stringify(t) }, [String(t)]));
+	n && o.append(v("option", { value: "" }, [b]));
+	for (let t of e) o.append(v("option", { value: JSON.stringify(t) }, [String(t)]));
 	return o.value = t === void 0 ? n ? "" : JSON.stringify(e[0]) : JSON.stringify(t), o.addEventListener("change", () => i(o.value === "" ? void 0 : JSON.parse(o.value)), { signal: a }), o;
 }
-function x(e, t, n, r, i, a) {
+function S(e, t, n, r, i, a) {
 	switch (e.kind) {
 		case "boolean": {
-			if (n) return b([!0, !1], t, !0, r, i, a);
-			let e = _("input", {
+			if (n) return x([!0, !1], t, !0, r, i, a);
+			let e = v("input", {
 				...r,
 				class: "c-checkbox",
 				type: "checkbox"
 			});
 			return e.checked = t === !0, e.addEventListener("change", () => i(e.checked), { signal: a }), e;
 		}
-		case "enum": return b(e.options ?? [], t, n, r, i, a);
+		case "enum": return x(e.options ?? [], t, n, r, i, a);
 		case "number":
 		case "integer": {
-			let n = e.multipleOf ?? (e.kind === "integer" ? 1 : void 0), o = _("input", {
+			let n = e.multipleOf ?? (e.kind === "integer" ? 1 : void 0), o = v("input", {
 				...r,
 				class: "c-control",
 				type: "number",
 				inputmode: e.kind === "integer" ? "numeric" : "decimal",
 				step: n === void 0 ? "any" : String(n),
-				min: v(e.minimum ?? e.exclusiveMinimum),
-				max: v(e.maximum ?? e.exclusiveMaximum)
+				min: y(e.minimum ?? e.exclusiveMinimum),
+				max: y(e.maximum ?? e.exclusiveMaximum)
 			});
 			return o.value = typeof t == "number" ? String(t) : "", o.addEventListener("input", () => i(Number.isNaN(o.valueAsNumber) ? void 0 : o.valueAsNumber), { signal: a }), o;
 		}
 		case "string": {
-			let o = _("input", {
+			let o = v("input", {
 				...r,
 				class: "c-control",
 				type: "text",
 				inputmode: e.format === "email" ? "email" : e.format === "uri" ? "url" : void 0,
 				autocomplete: "off",
 				spellcheck: "false",
-				minlength: v(e.minLength),
-				maxlength: v(e.maxLength)
+				minlength: y(e.minLength),
+				maxlength: y(e.maxLength)
 			});
 			return o.value = typeof t == "string" ? t : "", o.addEventListener("input", () => i(n && o.value === "" ? void 0 : o.value), { signal: a }), o;
 		}
 	}
 }
-function S(e) {
+function C(e) {
+	return e instanceof HTMLInputElement && e.type === "checkbox" ? v("span", { class: "c-checkbox-row" }, [e]) : e;
+}
+function w(e, t, n, r, i, a) {
+	let o = typeof t == "object" && t && !Array.isArray(t) ? { ...t } : {}, s = [], c = e.fields.map((e) => {
+		let t = `${n}-${e.key}`, r = S(e, o[e.key], e.isOptional, {
+			id: t,
+			"aria-required": String(!e.isOptional)
+		}, (t) => {
+			let n = { ...o };
+			t === void 0 ? delete n[e.key] : n[e.key] = t, o = n, i(n);
+		}, a);
+		return s.push(r), v("div", { class: "c-entry__field" }, [v("label", {
+			class: "c-entry__label",
+			for: t
+		}, [e.key]), C(r)]);
+	});
+	return {
+		element: v("div", {
+			class: "c-entry",
+			role: "group",
+			"aria-label": r
+		}, c),
+		controls: s
+	};
+}
+function T(e) {
 	let { host: t, name: n, isStandalone: r = !1 } = e, i = new AbortController(), { signal: a } = i, o = t.shadowRoot ?? t.attachShadow({ mode: "open" });
 	o.replaceChildren(), r && t.setAttribute("data-standalone", "");
-	let s = _("style", {}, [g]), c = _("div", { class: "c-panel__header" }, [_("h2", { class: "c-panel__title" }, ["Props ", _("span", { class: "c-field__type" }, [`+${n}`])])]), l = _("p", {
+	let s = v("style", {}, [_]), c = v("div", { class: "c-panel__header" }, [v("h2", { class: "c-panel__title" }, ["Props ", v("span", { class: "c-field__type" }, [`+${n}`])])]), l = v("p", {
 		class: "c-panel__message",
 		role: "alert",
 		hidden: !0
-	}), u = _("form", {
+	}), u = v("form", {
 		class: "c-panel__body",
 		novalidate: !0,
 		"aria-label": `Props of ${n}`
-	}), d = _("code", {
+	}), d = v("code", {
 		class: "c-panel__call",
 		title: "Pug call"
-	}), p = _("button", {
+	}), f = v("button", {
 		class: "c-button",
 		type: "button"
-	}, ["Reset"]), m = _("div", { class: "c-panel__footer" }, [d, p]), h = _("section", {
+	}, ["Reset"]), m = v("div", { class: "c-panel__footer" }, [d, f]), h = v("section", {
 		class: "c-panel",
 		"aria-label": `Props of ${n}`
 	}, [
@@ -188,93 +227,101 @@ function S(e) {
 		m
 	]);
 	o.append(s, h);
-	let v = e.fields, y = structuredClone(e.values), b = /* @__PURE__ */ new Map(), S = () => e.onChange(structuredClone(y)), C = (e, t) => {
-		y[e] = t, S();
-	}, w = (e, t) => {
+	let g = e.fields, y = structuredClone(e.values), b = /* @__PURE__ */ new Map(), x = () => e.onChange(structuredClone(y)), T = (e, t) => {
+		y[e] = t, x();
+	}, E = (e, t) => {
 		let n = b.get(e);
 		n && (n.error.textContent = t ?? "", n.error.hidden = !t, n.controls().forEach((e) => e.setAttribute("aria-invalid", String(!!t))));
-	}, T = (e, t, n) => {
-		let r = _("ol", { class: "c-list" }), i = _("button", {
+	}, D = (e, t, n, r) => {
+		let i = v("ol", { class: "c-list" }), o = v("button", {
 			class: "c-button",
 			type: "button"
-		}, ["Add entry"]), o = _("div", {
+		}, ["Add entry"]), s = v("div", {
 			class: "c-list-editor",
 			role: "group",
-			"aria-labelledby": t,
-			"aria-describedby": n
-		}, [r, i]), s = [], c = new AbortController(), l = () => Array.isArray(y[e.key]) ? y[e.key] : [], u = (t) => C(e.key, e.isOptional && t.length === 0 ? void 0 : t), d = (t) => {
-			let n = (e, t) => {
-				u(e), d(t);
+			"aria-labelledby": n,
+			"aria-describedby": r
+		}, [i, o]), c = [], l = new AbortController(), u = () => Array.isArray(y[e.key]) ? y[e.key] : [], d = (t) => T(e.key, e.isOptional && t.length === 0 ? void 0 : t), f = (n) => {
+			let r = (e, t) => {
+				d(e), f(t);
 			};
-			c.abort(), c = new AbortController();
-			let a = l();
-			s = [], r.replaceChildren(...a.map((t, r) => {
-				let i = x(e.items, t, !1, { "aria-label": `${e.key} entry ${r + 1}` }, (e) => {
-					let t = [...l()];
-					t[r] = e, u(t);
-				}, c.signal);
-				s.push(i);
-				let o = (e) => {
-					let t = [...l()], [i] = t.splice(r, 1);
-					t.splice(r + e, 0, i), n(t, r + e);
-				}, d = _("button", {
+			l.abort(), l = new AbortController();
+			let a = u();
+			c = [];
+			let s = [];
+			i.replaceChildren(...a.map((n, i) => {
+				let o = e.items, f = `${e.key} entry ${i + 1}`, p = (e) => {
+					let t = [...u()];
+					t[i] = e, d(t);
+				}, m;
+				if (o.kind === "object") {
+					let e = w(o, n, `${t}-${i}`, f, p, l.signal);
+					m = e.element, c.push(...e.controls), s.push(e.controls[0] ?? m);
+				} else {
+					let e = S(o, n, !1, { "aria-label": f }, p, l.signal);
+					m = C(e), c.push(e), s.push(e);
+				}
+				let h = (e) => {
+					let t = [...u()], [n] = t.splice(i, 1);
+					t.splice(i + e, 0, n), r(t, i + e);
+				}, g = v("button", {
 					class: "c-button c-button--icon",
 					type: "button",
-					"aria-label": `Move entry ${r + 1} up`,
-					disabled: r === 0
-				}, ["↑"]), f = _("button", {
+					"aria-label": `Move entry ${i + 1} up`,
+					disabled: i === 0
+				}, ["↑"]), _ = v("button", {
 					class: "c-button c-button--icon",
 					type: "button",
-					"aria-label": `Move entry ${r + 1} down`,
-					disabled: r === a.length - 1
-				}, ["↓"]), p = _("button", {
+					"aria-label": `Move entry ${i + 1} down`,
+					disabled: i === a.length - 1
+				}, ["↓"]), y = v("button", {
 					class: "c-button c-button--icon",
 					type: "button",
-					"aria-label": `Remove entry ${r + 1}`
+					"aria-label": `Remove entry ${i + 1}`
 				}, ["✕"]);
-				return d.addEventListener("click", () => o(-1), { signal: c.signal }), f.addEventListener("click", () => o(1), { signal: c.signal }), p.addEventListener("click", () => {
-					let e = l().filter((e, t) => t !== r);
-					n(e, Math.min(r, e.length - 1));
-				}, { signal: c.signal }), _("li", { class: "c-list__item" }, [
-					e.items.kind === "boolean" ? _("span", { class: "c-checkbox-row" }, [i]) : i,
-					d,
-					f,
-					p
+				return g.addEventListener("click", () => h(-1), { signal: l.signal }), _.addEventListener("click", () => h(1), { signal: l.signal }), y.addEventListener("click", () => {
+					let e = u().filter((e, t) => t !== i);
+					r(e, Math.min(i, e.length - 1));
+				}, { signal: l.signal }), v("li", { class: o.kind === "object" ? "c-list__item c-list__item--entry" : "c-list__item" }, [
+					m,
+					g,
+					_,
+					y
 				]);
-			})), i.disabled = e.maxItems !== void 0 && a.length >= e.maxItems, t !== void 0 && (s[t] ?? i).focus();
+			})), o.disabled = e.maxItems !== void 0 && a.length >= e.maxItems, n !== void 0 && (s[n] ?? o).focus();
 		};
-		return i.addEventListener("click", () => {
-			let t = l();
-			u([...t, f(e.items)]), d(t.length);
-		}, { signal: a }), d(), {
-			group: o,
-			controls: () => [...s, i]
+		return o.addEventListener("click", () => {
+			let t = u();
+			d([...t, p(e.items)]), f(t.length);
+		}, { signal: a }), f(), {
+			group: s,
+			controls: () => [...c, o]
 		};
-	}, E = (e, t) => {
+	}, O = (e, t) => {
 		let n = `field-${t}`, r = `${n}-label`, i = `${n}-help`, o = `${n}-error`, s = [e.description ? i : "", o].filter(Boolean).join(" "), c, l;
 		if (e.kind === "array") {
-			let t = T(e, r, s);
+			let t = D(e, n, r, s);
 			c = t.group, l = t.controls;
 		} else {
-			let t = x(e, y[e.key], e.isOptional, {
+			let t = S(e, y[e.key], e.isOptional, {
 				id: n,
 				"aria-describedby": s,
 				"aria-required": String(!e.isOptional)
-			}, (t) => C(e.key, t), a);
-			c = t instanceof HTMLInputElement && t.type === "checkbox" ? _("span", { class: "c-checkbox-row" }, [t]) : t, l = () => [t];
+			}, (t) => T(e.key, t), a);
+			c = C(t), l = () => [t];
 		}
-		let u = e.kind === "array" ? _("span", {
+		let u = e.kind === "array" ? v("span", {
 			class: "c-field__label",
 			id: r
-		}, [e.key]) : _("label", {
+		}, [e.key]) : v("label", {
 			class: "c-field__label",
 			id: r,
 			for: n
-		}, [e.key]), d = _("p", {
+		}, [e.key]), d = v("p", {
 			class: "c-field__help",
 			id: i,
 			hidden: !e.description
-		}, [e.description ?? ""]), f = _("p", {
+		}, [e.description ?? ""]), f = v("p", {
 			class: "c-field__error",
 			id: o,
 			hidden: !0
@@ -282,7 +329,7 @@ function S(e) {
 		return b.set(e.key, {
 			controls: l,
 			error: f
-		}), _("div", {
+		}), v("div", {
 			class: "c-field",
 			"data-field": e.key
 		}, [
@@ -291,14 +338,14 @@ function S(e) {
 			d,
 			f
 		]);
-	}, D = () => {
-		b = /* @__PURE__ */ new Map(), u.replaceChildren(...v.map(E));
+	}, k = () => {
+		b = /* @__PURE__ */ new Map(), u.replaceChildren(...g.map(O));
 	};
-	return D(), u.addEventListener("submit", (e) => e.preventDefault(), { signal: a }), p.addEventListener("click", () => e.onReset(), { signal: a }), {
+	return k(), u.addEventListener("submit", (e) => e.preventDefault(), { signal: a }), f.addEventListener("click", () => e.onReset(), { signal: a }), {
 		shadowRoot: o,
 		header: c,
 		setFields: (e, t) => {
-			v = e, y = structuredClone(t), D();
+			g = e, y = structuredClone(t), k();
 		},
 		setIssues: (e) => {
 			let t = /* @__PURE__ */ new Map(), n = [];
@@ -307,10 +354,10 @@ function S(e) {
 					n.push(r.path.length > 0 ? `${r.path.join(".")}: ${r.message}` : r.message);
 					continue;
 				}
-				let e = r.path.slice(1), i = e.length > 0 ? `Entry ${Number(e[0]) + 1}: ${r.message}` : r.message;
-				t.set(r.key, [...t.get(r.key) ?? [], i]);
+				let [e, i] = r.path.slice(1), a = `${e === void 0 ? "" : `Entry ${Number(e) + 1}: ${i === void 0 ? "" : `${String(i)}: `}`}${r.message}`;
+				t.set(r.key, [...t.get(r.key) ?? [], a]);
 			}
-			for (let e of b.keys()) w(e, t.get(e)?.join("\n"));
+			for (let e of b.keys()) E(e, t.get(e)?.join("\n"));
 			l.textContent = n.join("\n"), l.hidden = n.length === 0;
 		},
 		setMessage: (e) => {
@@ -326,7 +373,7 @@ function S(e) {
 }
 //#endregion
 //#region lib/use-id.ts
-function C(t) {
+function E(t) {
 	let n = `id-${e(t)}`, r = 0;
 	return (e) => {
 		if (e === void 0) return `${n}-${r++}`;
@@ -336,39 +383,39 @@ function C(t) {
 }
 //#endregion
 //#region client/lib/playground/runtime.ts
-async function w(e, t) {
+async function D(e, t) {
 	let n = await fetch(new URL(e, document.baseURI), { cache: t ? "no-store" : "default" });
 	if (!n.ok) throw Error(`Could not load the mixin manifest (${n.status} ${n.statusText})`);
 	return n.json();
 }
-var T = /* @__PURE__ */ new Map();
-function E(e) {
+var O = /* @__PURE__ */ new Map();
+function k(e) {
 	if (!e.module) return Promise.reject(/* @__PURE__ */ Error(`Mixin "${e.name}" has no render module`));
-	let t = new URL(e.module, document.baseURI).href, n = T.get(t);
+	let t = new URL(e.module, document.baseURI).href, n = O.get(t);
 	return n || (n = import(
 		/* @vite-ignore */
 		t
 ).then((t) => {
 		if (typeof t.render != "function") throw TypeError(`${e.module} does not export render()`);
 		return t.render;
-	}), T.set(t, n)), n;
+	}), O.set(t, n)), n;
 }
-function D(e) {
+function A(e) {
 	return typeof e == "object" && !!e && Array.isArray(e.issues);
 }
-function O(e, t, r) {
+function j(e, t, r) {
 	try {
 		return {
 			isValid: !0,
 			html: e({
 				props: r,
 				z: n,
-				useId: C(`mixin-${t}`),
+				useId: E(`mixin-${t}`),
 				modifierClass: ""
 			})
 		};
 	} catch (e) {
-		return D(e) ? {
+		return A(e) ? {
 			isValid: !1,
 			issues: e.issues.map((e) => {
 				let t = e.path.filter((e) => typeof e != "symbol");
@@ -386,8 +433,8 @@ function O(e, t, r) {
 }
 //#endregion
 //#region client/lib/playground/state.ts
-var k = "props";
-function A(e) {
+var M = "props";
+function N(e) {
 	if (e === null || e === "") return {};
 	try {
 		let t = JSON.parse(e);
@@ -396,64 +443,72 @@ function A(e) {
 		return { error: `\`props\` is not valid JSON: ${e instanceof Error ? e.message : String(e)}` };
 	}
 }
-var j = /^(?:javascript|vbscript|data):/i;
-function M(e) {
-	return j.test([...e].filter((e) => e.charCodeAt(0) > 32).join(""));
+var P = /^(?:javascript|vbscript|data):/i;
+function F(e) {
+	return P.test([...e].filter((e) => e.charCodeAt(0) > 32).join(""));
 }
-function N(e) {
-	if (typeof e == "string") return e.includes("<") || M(e) ? e : void 0;
+function I(e) {
+	if (typeof e == "string") return e.includes("<") || F(e) ? e : void 0;
 	if (typeof e == "object" && e) for (let t of Object.values(e)) {
-		let e = N(t);
+		let e = I(t);
 		if (e !== void 0) return e;
 	}
 }
-function P(e) {
-	let t = A(new URLSearchParams(e.hash.slice(1)).get(k) ?? e.searchParams.get(k)), n = t.props ? N(t.props) : void 0;
+function L(e) {
+	let t = N(new URLSearchParams(e.hash.slice(1)).get(M) ?? e.searchParams.get(M)), n = t.props ? I(t.props) : void 0;
 	return n === void 0 ? t : { error: `The props from the link were not applied: they contain markup or a script URL (${JSON.stringify(n.slice(0, 40))}). Enter such values in the controls instead.` };
 }
-function F(e, t) {
+function R(e, t) {
 	let n = new URL(e), r = new URLSearchParams(n.hash.slice(1));
-	return r.set(k, JSON.stringify(t)), n.hash = r.toString(), n;
+	return r.set(M, JSON.stringify(t)), n.hash = r.toString(), n;
 }
-function I(e, t) {
+function z(e, t) {
 	let n = new URL(e);
-	return n.searchParams.set(k, JSON.stringify(t)), n.hash = "", n;
+	return n.searchParams.set(M, JSON.stringify(t)), n.hash = "", n;
 }
-var L = /^[A-Z_$][\w$]*$/i;
-function R(e) {
+var B = /^[A-Z_$][\w$]*$/i;
+function V(e) {
 	if (typeof e == "string") return `'${e.replaceAll("\\", "\\\\").replaceAll("'", "\\'").replaceAll("\n", "\\n")}'`;
-	if (Array.isArray(e)) return `[${e.map(R).join(", ")}]`;
+	if (Array.isArray(e)) return `[${e.map(V).join(", ")}]`;
 	if (typeof e == "object" && e) {
 		let t = Object.entries(e);
-		return t.length === 0 ? "{}" : `{ ${t.map(([e, t]) => `${L.test(e) ? e : R(e)}: ${R(t)}`).join(", ")} }`;
+		return t.length === 0 ? "{}" : `{ ${t.map(([e, t]) => `${B.test(e) ? e : V(e)}: ${V(t)}`).join(", ")} }`;
 	}
 	return JSON.stringify(e) ?? "undefined";
 }
-function z(e, t, n = []) {
-	let r = new Map(n.filter((e) => e.hasDefault).map((e) => [e.key, JSON.stringify(e.default)]));
-	return `+${e}(${R(Object.fromEntries(Object.entries(t).filter(([e, t]) => r.get(e) !== JSON.stringify(t))))})`;
+function H(e, t) {
+	let n = new Map(t.filter((e) => e.hasDefault).map((e) => [e.key, JSON.stringify(e.default)]));
+	return Object.fromEntries(Object.entries(e).filter(([e, t]) => n.get(e) !== JSON.stringify(t)));
+}
+function U(e, t, n = []) {
+	let r = H(t, n);
+	for (let e of n) {
+		let { items: t } = e;
+		t?.kind === "object" && Array.isArray(r[e.key]) && (r[e.key] = r[e.key].map((e) => typeof e == "object" && e ? H(e, t.fields) : e));
+	}
+	return `+${e}(${V(r)})`;
 }
 //#endregion
 //#region client/lib/playground/validate.ts
-var B = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/;
-function V(e) {
+var W = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/;
+function G(e) {
 	return typeof e == "string" ? `"${e}"` : String(e);
 }
-function H(e) {
+function K(e) {
 	try {
 		return !!new URL(e);
 	} catch {
 		return !1;
 	}
 }
-function U(e, t) {
+function q(e, t) {
 	return `${e} ${t}${e === 1 ? "" : "s"}`;
 }
-function W(e, t) {
+function J(e, t) {
 	switch (e.kind) {
-		case "enum": return e.options?.includes(t) ? void 0 : `Must be one of ${(e.options ?? []).map(V).join(", ")}`;
+		case "enum": return e.options?.includes(t) ? void 0 : `Must be one of ${(e.options ?? []).map(G).join(", ")}`;
 		case "boolean": return typeof t == "boolean" ? void 0 : "Must be true or false";
-		case "string": return typeof t == "string" ? e.minLength !== void 0 && t.length < e.minLength ? e.minLength === 1 ? "Must not be empty" : `Must be at least ${U(e.minLength, "character")}` : e.maxLength !== void 0 && t.length > e.maxLength ? `Must be at most ${U(e.maxLength, "character")}` : e.format === "email" && !B.test(t) ? "Must be an email address" : e.format === "uri" && !H(t) ? "Must be a URL" : e.pattern !== void 0 && e.format !== "email" && !new RegExp(e.pattern).test(t) ? `Must match ${e.pattern}` : void 0 : "Must be text";
+		case "string": return typeof t == "string" ? e.minLength !== void 0 && t.length < e.minLength ? e.minLength === 1 ? "Must not be empty" : `Must be at least ${q(e.minLength, "character")}` : e.maxLength !== void 0 && t.length > e.maxLength ? `Must be at most ${q(e.maxLength, "character")}` : e.format === "email" && !W.test(t) ? "Must be an email address" : e.format === "uri" && !K(t) ? "Must be a URL" : e.pattern !== void 0 && e.format !== "email" && !new RegExp(e.pattern).test(t) ? `Must match ${e.pattern}` : void 0 : "Must be text";
 		case "number":
 		case "integer":
 			if (typeof t != "number" || Number.isNaN(t)) return "Must be a number";
@@ -469,40 +524,46 @@ function W(e, t) {
 			return;
 	}
 }
-function G(e, t) {
+function Y(e, t) {
+	return typeof t != "object" || !t || Array.isArray(t) ? ["Must be an object"] : e.fields.flatMap((e) => X(e, t[e.key]).map((t) => `${e.key}: ${t}`));
+}
+function X(e, t) {
 	if (t === void 0) return e.isOptional ? [] : ["Required"];
 	if (e.kind !== "array") {
-		let n = W(e, t);
+		let n = J(e, t);
 		return n ? [n] : [];
 	}
 	if (!Array.isArray(t)) return ["Must be a list"];
 	let n = [];
-	return e.minItems !== void 0 && t.length < e.minItems && n.push(`Needs at least ${U(e.minItems, "entry").replace("entrys", "entries")}`), e.maxItems !== void 0 && t.length > e.maxItems && n.push(`Allows at most ${U(e.maxItems, "entry").replace("entrys", "entries")}`), t.forEach((t, r) => {
-		let i = e.items ? W(e.items, t) : void 0;
-		i && n.push(`Entry ${r + 1}: ${i}`);
+	e.minItems !== void 0 && t.length < e.minItems && n.push(`Needs at least ${q(e.minItems, "entry").replace("entrys", "entries")}`), e.maxItems !== void 0 && t.length > e.maxItems && n.push(`Allows at most ${q(e.maxItems, "entry").replace("entrys", "entries")}`);
+	let { items: r } = e;
+	return t.forEach((e, t) => {
+		if (!r) return;
+		let i = r.kind === "object" ? Y(r, e) : [J(r, e)].filter((e) => e !== void 0);
+		n.push(...i.map((e) => `Entry ${t + 1}: ${e}`));
 	}), n;
 }
-function K(e, t) {
+function Z(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	for (let r of e) {
-		let e = G(r, t[r.key]);
+		let e = X(r, t[r.key]);
 		e.length > 0 && n.set(r.key, e);
 	}
 	return n;
 }
 //#endregion
 //#region client/lib/playground/controller.ts
-var q = 1e3;
-async function J(e, n, r = {}) {
-	let i = (await w(e.manifestUrl, e.isDevelopment)).mixins.find((t) => t.id === e.id);
+var Q = 1e3;
+async function $(e, n, r = {}) {
+	let i = (await D(e.manifestUrl, e.isDevelopment)).mixins.find((t) => t.id === e.id);
 	if (!i || !i.hasSchema) throw Error(`Mixin "${e.name}" has no playground in ${e.manifestUrl}`);
-	let a = d(i.jsonSchema), o = m(a, r.props), s = i.module ? await E(i) : void 0, c, l = () => h(a, o), u = () => z(i.name, l(), a), f = () => {
+	let a = d(i.jsonSchema), o = h(a, r.props), s = i.module ? await k(i) : void 0, c, l = () => g(a, o), u = () => U(i.name, l(), a), f = () => {
 		let e = l();
 		if (c?.setPugCall(u()), !s) {
 			c?.setMessage(i.error?.message ?? "The mixin has not compiled yet.");
 			return;
 		}
-		let t = K(a, o);
+		let t = Z(a, o);
 		if (t.size > 0) {
 			let r = [...t].flatMap(([e, t]) => t.map((t) => ({
 				key: e,
@@ -515,14 +576,14 @@ async function J(e, n, r = {}) {
 			}, e);
 			return;
 		}
-		let r = O(s, i.id, e);
+		let r = j(s, i.id, e);
 		if (r.isValid) {
 			c?.setIssues([]), n.onRender(r.html, e);
 			return;
 		}
 		"issues" in r ? c?.setIssues(r.issues) : (c?.setIssues([]), c?.setMessage(r.error)), n.onInvalid?.(r, e);
 	};
-	if (n.panelHost && (c = S({
+	if (n.panelHost && (c = T({
 		host: n.panelHost,
 		name: i.name,
 		fields: a,
@@ -532,7 +593,7 @@ async function J(e, n, r = {}) {
 			o = e, n.onPropsChange?.(l()), f();
 		},
 		onReset: () => {
-			o = m(a), c.setFields(a, o), n.onPropsChange?.(l()), f();
+			o = h(a), c.setFields(a, o), n.onPropsChange?.(l()), f();
 		}
 	}), n.onPanel?.(c)), n.onCompileError?.(i.error), f(), r.error) {
 		let e = {
@@ -545,33 +606,33 @@ async function J(e, n, r = {}) {
 			issues: [e]
 		}, l());
 	}
-	let p, g = new AbortController();
+	let p, m = new AbortController();
 	if (e.isDevelopment) {
 		let r = !1;
 		p = new t(async () => {
 			if (!r) {
 				r = !0;
 				try {
-					let t = (await w(e.manifestUrl, !0)).mixins.find((t) => t.id === e.id);
+					let t = (await D(e.manifestUrl, !0)).mixins.find((t) => t.id === e.id);
 					if (!t || !t.hasSchema) return;
 					let r = i;
 					i = t;
 					let u = JSON.stringify(t.jsonSchema) !== JSON.stringify(r.jsonSchema);
 					if (u) {
 						a = d(t.jsonSchema);
-						let e = l(), n = m(a);
+						let e = l(), n = h(a);
 						o = Object.fromEntries(a.map((t) => [t.key, t.key in e ? e[t.key] : n[t.key]])), c?.setFields(a, o);
 					}
-					JSON.stringify(t.error) !== JSON.stringify(r.error) && n.onCompileError?.(t.error), t.module !== r.module && t.module && (s = await E(t)), (t.module !== r.module || u) && f();
+					JSON.stringify(t.error) !== JSON.stringify(r.error) && n.onCompileError?.(t.error), t.module !== r.module && t.module && (s = await k(t)), (t.module !== r.module || u) && f();
 				} catch (e) {
 					console.warn("[kss-modern] Could not check the mixin manifest for updates", e);
 				} finally {
 					r = !1;
 				}
 			}
-		}, q), document.visibilityState === "visible" && p.start(), document.addEventListener("visibilitychange", () => {
+		}, Q), document.visibilityState === "visible" && p.start(), document.addEventListener("visibilitychange", () => {
 			document.visibilityState === "visible" ? p.resume() : p.pause();
-		}, { signal: g.signal });
+		}, { signal: m.signal });
 	}
 	return {
 		get entry() {
@@ -584,9 +645,9 @@ async function J(e, n, r = {}) {
 		getPugCall: u,
 		render: f,
 		destroy: () => {
-			p?.stop(), g.abort(), c?.destroy();
+			p?.stop(), m.abort(), c?.destroy();
 		}
 	};
 }
 //#endregion
-export { w as a, o as c, I as i, i as l, P as n, _ as o, F as r, a as s, J as t, r as u };
+export { D as a, o as c, z as i, i as l, L as n, v as o, R as r, a as s, $ as t, r as u };

package/dist/styleguide-assets/{explorer-ADHDxFj8.js → explorer-B2UH96jd.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./code-highlight-Fm7cxf-E.js";
 import { n as t } from "./utils-DtB-AzJa.js";
-import { a as n, i as r, n as i, r as a, s as o, t as s, u as c } from "./controller-BLn-0hDZ.js";
+import { a as n, i as r, n as i, r as a, s as o, t as s, u as c } from "./controller-BduQiyRp.js";
 import { t as l } from "./alerts-DIQ8TeZB.js";
 //#region client/lib/playground/format-html.ts
 var u = /* @__PURE__ */ new Set([

package/dist/styleguide-assets/{playground-D9faUdLy.js → playground-BuO-B-Kx.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./shared-hGcWlnRM.js";
-import { c as t, i as n, l as r, n as i, o as a, r as o, t as s } from "./controller-BLn-0hDZ.js";
+import { c as t, i as n, l as r, n as i, o as a, r as o, t as s } from "./controller-BduQiyRp.js";
 //#region client/playground.ts
 var c = "kss-modern:playground-panel", l = {
 	dock: "right",

package/dist/styleguide-assets/{preview-CsX9psV8.js → preview-C3WnTlhx.js}

@@ -1139,7 +1139,7 @@ ot && import("./global-theme-select-CdFgPJ0T.js").then(({ default: e }) => e(ot)
 var st = document.querySelectorAll("[data-section-theme-select]");
 st.length > 0 && import("./section-theme-select-CO65kL5N.js").then(({ default: e }) => e(st)).catch(console.error);
 var ct = document.querySelector("[data-mixin-explorer]");
-ct && import("./explorer-ADHDxFj8.js").then(({ default: e }) => e(ct)).catch(console.error);
+ct && import("./explorer-B2UH96jd.js").then(({ default: e }) => e(ct)).catch(console.error);
 var lt = document.querySelector(".editor-select");
 lt && import("./editor-select-DIZFtqe7.js").then(({ default: e }) => e(lt)).catch(console.error);
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kss-modern",
   "type": "module",
-  "version": "1.7.0-beta.0",
+  "version": "1.7.0-beta.2",
   "description": "Modern KSS compatible styleguide generator",
   "keywords": [
     "kss",