npm - tutuca - Versions diffs - 0.9.103 → 0.9.105 - Mend

tutuca 0.9.103 → 0.9.105

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/tutuca-cli.js +83 -25
package/package.json +1 -1
package/skill/margaui/SKILL.md +6 -2
package/skill/margaui/components/aura.md +97 -0
package/skill/margaui/components/megamenu.md +131 -0
package/skill/margaui/components/menu.md +1 -0
package/skill/margaui/components/otp.md +171 -0
package/skill/margaui/components/range.md +1 -1
package/skill/margaui/components/stack.md +1 -1
package/skill/margaui/components/tooltip.md +1 -1

package/dist/tutuca-cli.js CHANGED Viewed

@@ -16170,7 +16170,37 @@ function tutucaSource(base) {
     return "node_modules";
   return "local dist";
 }
-function buildImports(base, { margaui }) {
+function findInstalledPackage(startDir, pkg, probe) {
+  let dir = resolve5(startDir);
+  for (;; ) {
+    const candidate = resolve5(dir, "node_modules", pkg);
+    if (existsSync4(resolve5(candidate, probe)))
+      return candidate;
+    const parent = dirname4(dir);
+    if (parent === dir)
+      return null;
+    dir = parent;
+  }
+}
+function resolveMargaui(projectDir, { forCdn, override }) {
+  if (override) {
+    const jsUrl = override.startsWith("http") ? override : `/${relative2(projectDir, resolve5(projectDir, override)).split(sep).join("/")}`;
+    return { jsUrl, themeUrl: MARGAUI_THEME, source: "override", serveDir: null };
+  }
+  if (!forCdn) {
+    const pkgDir = findInstalledPackage(projectDir, "margaui", "dist/margaui.min.js");
+    if (pkgDir) {
+      return {
+        jsUrl: `${MARGAUI_PREFIX}margaui.min.js`,
+        themeUrl: `${MARGAUI_PREFIX}themes/theme.css`,
+        source: "node_modules",
+        serveDir: resolve5(pkgDir, "dist")
+      };
+    }
+  }
+  return { jsUrl: MARGAUI_CDN, themeUrl: MARGAUI_THEME, source: "CDN", serveDir: null };
+}
+function buildImports(base, { margauiEnabled, margauiJsUrl }) {
   const dev = `${base}/tutuca-dev.js`;
   const imports = {
     tutuca: dev,
@@ -16179,13 +16209,13 @@ function buildImports(base, { margaui }) {
     "tutuca/storybook": `${base}/tutuca-storybook.js`,
     "tutuca/components": `${base}/tutuca-components.js`
   };
-  if (margaui)
-    imports.margaui = MARGAUI_CDN;
+  if (margauiEnabled)
+    imports.margaui = margauiJsUrl;
   return imports;
 }
-function renderIndexHtml(imports, { margaui, bootstrapUrl }) {
-  const theme = margaui ? `
-    <link rel="stylesheet" href="${MARGAUI_THEME}" />` : "";
+function renderIndexHtml(imports, { margauiEnabled, margauiThemeUrl, bootstrapUrl }) {
+  const theme = margauiEnabled ? `
+    <link rel="stylesheet" href="${margauiThemeUrl}" />` : "";
   return `<!doctype html>
 <html lang="en">
   <head>
@@ -16203,9 +16233,9 @@ ${JSON.stringify({ imports }, null, 6)}
 </html>
 `;
 }
-function renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3, noCache }) {
+function renderBootstrap(devModuleUrls, { margauiEnabled, check, inspect: inspect3, noCache }) {
   const lines = ['import { mountStorybook } from "tutuca/storybook";'];
-  if (margaui) {
+  if (margauiEnabled) {
     lines.push('import { compileClassesToStyleText } from "tutuca/extra";');
     lines.push('import { compile } from "margaui";');
   }
@@ -16219,7 +16249,7 @@ function renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3, noC
   });
   const modules = devModuleUrls.map((_, i) => `m${i}`).join(", ");
   const optParts = [];
-  if (margaui)
+  if (margauiEnabled)
     optParts.push("compileCss: (app) => compileClassesToStyleText(app, compile)");
   if (inspect3)
     optParts.push("dev: { shadowCheckComponent, runTests, expect }");
@@ -16354,6 +16384,8 @@ async function run4(argv, opts = {}) {
     options: {
       port: { type: "string" },
       out: { type: "string" },
+      margaui: { type: "string" },
+      "margaui-cdn": { type: "boolean", default: false },
       "no-margaui": { type: "boolean", default: false },
       "no-check": { type: "boolean", default: false },
       "no-inspect": { type: "boolean", default: false },
@@ -16366,20 +16398,27 @@ async function run4(argv, opts = {}) {
   });
   if (parsed.values.help) {
     process.stdout.write(`tutuca storybook [dir] [--port <n>] [--out <dir>] [--dry-run]
-                 [--no-margaui] [--no-check] [--no-inspect] [--no-tests]
-                 [--no-cache]
+                 [--margaui <url|path>] [--margaui-cdn] [--no-margaui]
+                 [--no-check] [--no-inspect] [--no-tests] [--no-cache]
   Auto-discovers co-located *.dev.js modules (recursively, skipping
   node_modules/dotdirs) and serves a live storybook that mounts them via
   the tutuca/storybook library. Zero setup.
+  margaui styling loads local-first: it's used from node_modules/margaui
+  when installed (offline-capable), else from the CDN.
   [dir]          project root to scan and serve (default: cwd)
   --port <n>     preferred port (default 4321; falls back to a free port)
-  --out <dir>    write a static index.html + bootstrap (CDN import map)
-                 instead of serving; host it from the project root
+  --out <dir>    write a static index.html + bootstrap (CDN import map for
+                 both tutuca and margaui) instead of serving; host it from
+                 the project root
   --dry-run      do all the prep (discover, import and normalize modules,
                  resolve the runtime, run tests) and print what would be
                  shown instead of serving; pass --json for structured output
+  --margaui <url|path>  use a specific margaui build (URL, or path inside
+                 the project) instead of auto-detecting / the CDN
+  --margaui-cdn  force the margaui CDN even if node_modules/margaui exists
   --no-margaui   skip margaui styling (renders functional but unstyled)
   --no-check     skip the in-browser check(app) dev validation
   --no-inspect   skip the per-example Component/Instance/Data/Lint/Test tabs
@@ -16404,7 +16443,9 @@ async function run4(argv, opts = {}) {
       hint: "Create a co-located <name>.dev.js exporting getComponents() and getExamples()."
     });
   }
-  const margaui = !parsed.values["no-margaui"];
+  const margauiEnabled = !parsed.values["no-margaui"];
+  const margauiOverride = parsed.values.margaui;
+  const forceMargauiCdn = parsed.values["margaui-cdn"];
   const check = !parsed.values["no-check"];
   const inspect3 = !parsed.values["no-inspect"];
   const noCache = parsed.values["no-cache"];
@@ -16413,10 +16454,15 @@ async function run4(argv, opts = {}) {
     const outDir = resolve5(parsed.values.out);
     mkdirSync3(outDir, { recursive: true });
     const { base: base2 } = resolveTutucaBase(projectDir, self, true);
-    const imports2 = buildImports(base2, { margaui });
+    const mg2 = resolveMargaui(projectDir, { forCdn: true, override: margauiOverride });
+    const imports2 = buildImports(base2, { margauiEnabled, margauiJsUrl: mg2.jsUrl });
     const bootstrapName = "tutuca-storybook.bootstrap.js";
-    writeFileSync(resolve5(outDir, "index.html"), renderIndexHtml(imports2, { margaui, bootstrapUrl: `./${bootstrapName}` }));
-    writeFileSync(resolve5(outDir, bootstrapName), renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3, noCache }));
+    writeFileSync(resolve5(outDir, "index.html"), renderIndexHtml(imports2, {
+      margauiEnabled,
+      margauiThemeUrl: mg2.themeUrl,
+      bootstrapUrl: `./${bootstrapName}`
+    }));
+    writeFileSync(resolve5(outDir, bootstrapName), renderBootstrap(devModuleUrls, { margauiEnabled, check, inspect: inspect3, noCache }));
     process.stdout.write(`wrote static storybook → ${relative2(process.cwd(), outDir) || "."}/
   index.html + ${bootstrapName} (${devModuleUrls.length} dev modules, CDN import map)
   Host it from the project root so /*.dev.js paths resolve.
@@ -16425,7 +16471,8 @@ async function run4(argv, opts = {}) {
   }
   if (parsed.values["dry-run"]) {
     const { base: base2 } = resolveTutucaBase(projectDir, self, false);
-    const imports2 = buildImports(base2, { margaui });
+    const mg2 = resolveMargaui(projectDir, { forCdn: forceMargauiCdn, override: margauiOverride });
+    const imports2 = buildImports(base2, { margauiEnabled, margauiJsUrl: mg2.jsUrl });
     const modules = await discoverModules(projectDir, devModuleUrls);
     const tests = parsed.values["no-tests"] ? null : await runDevTests(projectDir, devModuleUrls);
     const componentNameConflicts = await checkComponentNameConflicts(projectDir, devModuleUrls);
@@ -16433,7 +16480,8 @@ async function run4(argv, opts = {}) {
     const result = {
       projectDir,
       tutuca: { source, base: base2, version: self.version },
-      options: { margaui, check, noCache, runTests: !parsed.values["no-tests"] },
+      margaui: margauiEnabled ? { source: mg2.source, jsUrl: mg2.jsUrl, themeUrl: mg2.themeUrl } : null,
+      options: { margaui: margauiEnabled, check, noCache, runTests: !parsed.values["no-tests"] },
       imports: imports2,
       modules,
       tests,
@@ -16447,7 +16495,7 @@ async function run4(argv, opts = {}) {
     process.stdout.write(`tutuca storybook dry run (no server started)
   project: ${projectDir}
   tutuca runtime: ${source} (${base2}, version ${self.version})
-  margaui: ${margaui ? "on" : "off"}, in-browser check: ${check ? "on" : "off"}, cache: ${noCache ? "off" : "on"}
+  margaui: ${margauiEnabled ? `on (${mg2.source})` : "off"}, in-browser check: ${check ? "on" : "off"}, cache: ${noCache ? "off" : "on"}
   ${modules.length} dev module(s):
 `);
     for (const m of modules) {
@@ -16507,9 +16555,14 @@ async function run4(argv, opts = {}) {
     process.stdout.write(formatComponentNameConflict(c));
   }
   const { base, serveDist } = resolveTutucaBase(projectDir, self, false);
-  const imports = buildImports(base, { margaui });
-  const indexHtml = renderIndexHtml(imports, { margaui, bootstrapUrl: BOOTSTRAP_URL });
-  const bootstrapJs = renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3, noCache });
+  const mg = resolveMargaui(projectDir, { forCdn: forceMargauiCdn, override: margauiOverride });
+  const imports = buildImports(base, { margauiEnabled, margauiJsUrl: mg.jsUrl });
+  const indexHtml = renderIndexHtml(imports, {
+    margauiEnabled,
+    margauiThemeUrl: mg.themeUrl,
+    bootstrapUrl: BOOTSTRAP_URL
+  });
+  const bootstrapJs = renderBootstrap(devModuleUrls, { margauiEnabled, check, inspect: inspect3, noCache });
   const server = createServer((req, res) => {
     const path = req.url.split("?")[0];
     if (path === "/" || path === "/index.html") {
@@ -16526,6 +16579,10 @@ async function run4(argv, opts = {}) {
       serveFile(res, safeJoin(serveDist, `/${path.slice(DIST_PREFIX.length)}`));
       return;
     }
+    if (mg.serveDir && path.startsWith(MARGAUI_PREFIX)) {
+      serveFile(res, safeJoin(mg.serveDir, `/${path.slice(MARGAUI_PREFIX.length)}`));
+      return;
+    }
     serveFile(res, safeJoin(projectDir, path));
   });
   const preferred = Number.parseInt(parsed.values.port ?? "4321", 10);
@@ -16539,12 +16596,13 @@ async function run4(argv, opts = {}) {
   server.on("listening", () => {
     const actual = server.address().port;
     const where = tutucaSource(base);
-    process.stdout.write(`tutuca storybook: http://localhost:${actual}/  (${devModuleUrls.length} dev modules, tutuca from ${where})
+    const margauiFrom = margauiEnabled ? `, margaui from ${mg.source}` : "";
+    process.stdout.write(`tutuca storybook: http://localhost:${actual}/  (${devModuleUrls.length} dev modules, tutuca from ${where}${margauiFrom})
 `);
   });
   server.listen(preferred);
 }
-var describe4 = "Serve a storybook for the project's co-located *.dev.js modules (auto-discovered).", BOOTSTRAP_URL = "/__tutuca_storybook__.js", DIST_PREFIX = "/__tutuca__/", MIME, MARGAUI_CDN = "https://cdn.jsdelivr.net/npm/margaui/+esm", MARGAUI_THEME = "https://marianoguerra.github.io/margaui/themes/theme.css";
+var describe4 = "Serve a storybook for the project's co-located *.dev.js modules (auto-discovered).", BOOTSTRAP_URL = "/__tutuca_storybook__.js", DIST_PREFIX = "/__tutuca__/", MARGAUI_PREFIX = "/__margaui__/", MIME, MARGAUI_CDN = "https://cdn.jsdelivr.net/npm/margaui/+esm", MARGAUI_THEME = "https://marianoguerra.github.io/margaui/themes/theme.css";
 var init_storybook = __esm(() => {
   init_chai2();
   init_test();

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "tutuca",
-  "version": "0.9.103",
+  "version": "0.9.105",
   "type": "module",
   "description": "Zero-dependency SPA framework with immutable state and virtual DOM",
   "main": "./dist/tutuca.js",

package/skill/margaui/SKILL.md CHANGED Viewed

@@ -5,11 +5,11 @@ description: Use when writing HTML/CSS that uses the margaui component library
 # margaui
-margaui is a Tailwind v4–native CSS component library: 65 components defined as Tailwind v4 `@utility` classes, plus 35 themes selected via `data-theme` on any ancestor element.
+margaui is a Tailwind v4–native CSS component library: 68 components defined as Tailwind v4 `@utility` classes, plus 35 themes selected via `data-theme` on any ancestor element.
 ## Relationship to daisyUI
-margaui is **API-compatible with [daisyUI](https://daisyui.com/)**. The class names (`btn`, `btn-primary`, `card`, `card-body`, `alert-info`, `modal-box`, `dropdown-content`, …), modifier vocabulary, and DOM structure mirror daisyUI. Differences are implementation-level (Tailwind v4 native, in-browser compiler, `@supports` fallbacks for `color-mix`), not API-level.
+margaui is **API-compatible with [daisyUI](https://daisyui.com/)** and currently tracks **daisyUI v5.6.6**. The class names (`btn`, `btn-primary`, `card`, `card-body`, `alert-info`, `modal-box`, `dropdown-content`, …), modifier vocabulary, and DOM structure mirror daisyUI. Differences are implementation-level (Tailwind v4 native, in-browser compiler, `@supports` fallbacks for `color-mix`), not API-level.
 Practical implication: **daisyUI documentation and examples are valid references** when this skill doesn't cover something. If a component is documented for daisyUI, the same markup works in margaui.
@@ -29,6 +29,7 @@ Set on any element (most often `<html>` or `<body>`):
 - **Modifier suffixes are consistent.** Most components share the same vocabulary: color (`-primary`, `-secondary`, `-accent`, `-info`, `-success`, `-warning`, `-error`, `-neutral`, `-ghost`), style (`-outline`, `-soft`, `-dash`), size (`-xs`, `-sm`, `-md`, `-lg`, `-xl`), state (`-active`, `-disabled`).
 - **Tailwind utilities work normally.** Responsive prefixes (`sm:`, `md:`, …), state variants (`hover:`, `focus:`, …), and arbitrary values all compose with margaui classes.
 - **`@utility` classes, not `@apply`.** Internally components are defined with Tailwind v4's `@utility` directive, so they tree-shake on demand and can be combined freely.
+- **Color modifiers are generated, not hand-written.** A component's color variants (`btn-primary`, `badge-success`, `alert-info`, …) resolve from the theme's 16 semantic colors via Tailwind v4's `--value(--color-*)`, so one definition per component covers every color and tracks the active `data-theme`.
 ## Component index
@@ -36,6 +37,7 @@ Read the linked file when the user's task involves that component. Each file has
 - [accordion](components/accordion.md) — collapsible sections (single-open via radio, free via details)
 - [alert](components/alert.md) — inline notification box (info / success / warning / error)
+- [aura](components/aura.md) — animated glowing border wrapper (rainbow, holo, dual, silver, gold, glow)
 - [avatar](components/avatar.md) — user picture / placeholder, with optional ring, mask, presence
 - [badge](components/badge.md) — small label / counter chip
 - [breadcrumbs](components/breadcrumbs.md) — path-style navigation trail
@@ -69,6 +71,7 @@ Read the linked file when the user's task involves that component. Each file has
 - [list](components/list.md) — vertical list with grid-style columns
 - [loading](components/loading.md) — loading spinner / dots / bars / ring / ball / infinity
 - [mask](components/mask.md) — clip an element to a shape (circle, hex, star, …)
+- [megamenu](components/megamenu.md) — large horizontal nav bar whose items open big popover panels
 - [menu](components/menu.md) — vertical/horizontal nav list (sidebar, sub-menus)
 - [mockup-browser](components/mockup-browser.md) — browser-window chrome wrapper for screenshots
 - [mockup-code](components/mockup-code.md) — terminal/code-block visual
@@ -76,6 +79,7 @@ Read the linked file when the user's task involves that component. Each file has
 - [mockup-window](components/mockup-window.md) — OS-window chrome wrapper for screenshots
 - [modal](components/modal.md) — dialog / pop-up (native `<dialog>` or checkbox-driven)
 - [navbar](components/navbar.md) — top navigation bar with start/center/end slots
+- [otp](components/otp.md) — one-time-password digit input (2FA / verification codes)
 - [pagination](components/pagination.md) — paged-navigation button row
 - [progress](components/progress.md) — linear progress bar (`<progress>`)
 - [radial-progress](components/radial-progress.md) — circular progress indicator

package/skill/margaui/components/aura.md ADDED Viewed

@@ -0,0 +1,97 @@
+# aura
+_animated glowing border wrapper (rainbow, holo, dual, silver, gold, glow)_
+## What it does
+Wraps any element in an animated conic-gradient border light. Auto-picks corner radius when wrapping a card/alert/button/input/select/checkbox/toggle/badge.
+## When to use
+- Highlighting the single most important button, card, or promo element on a page.
+- Not for general emphasis — use sparingly, it's an eye-catching animated effect.
+## Core classes
+`aura`; style `aura-rainbow|holo|dual|silver|gold|glow`; size `aura-xs|sm|md|lg|xl`.
+## Examples
+### Aura sizes
+Source: `playground/components/aura/aura-sizes.html`
+```html
+<div class="flex flex-wrap gap-6 items-center">
+  <div class="aura aura-xs">
+    <button class="btn btn-primary">xs</button>
+  </div>
+  <div class="aura aura-sm">
+    <button class="btn btn-primary">sm</button>
+  </div>
+  <div class="aura aura-md">
+    <button class="btn btn-primary">md</button>
+  </div>
+  <div class="aura aura-lg">
+    <button class="btn btn-primary">lg</button>
+  </div>
+  <div class="aura aura-xl">
+    <button class="btn btn-primary">xl</button>
+  </div>
+</div>
+```
+### Aura styles
+Source: `playground/components/aura/aura-styles.html`
+```html
+<div class="flex flex-wrap gap-6 items-center">
+  <div class="aura">
+    <button class="btn">default</button>
+  </div>
+  <div class="aura aura-rainbow">
+    <button class="btn">rainbow</button>
+  </div>
+  <div class="aura aura-holo">
+    <button class="btn">holo</button>
+  </div>
+  <div class="aura aura-dual">
+    <button class="btn">dual</button>
+  </div>
+  <div class="aura aura-silver">
+    <button class="btn">silver</button>
+  </div>
+  <div class="aura aura-gold">
+    <button class="btn">gold</button>
+  </div>
+  <div class="aura aura-glow">
+    <button class="btn">glow</button>
+  </div>
+</div>
+```
+### Aura wrapping a button
+Source: `playground/components/aura/aura-wrapping-a-button.html`
+```html
+<div class="aura">
+  <button class="btn btn-primary">Buy now</button>
+</div>
+```
+### Aura wrapping a card
+Source: `playground/components/aura/aura-wrapping-a-card.html`
+```html
+<div class="aura aura-rainbow">
+  <div class="card bg-base-100 w-64 shadow-sm">
+    <div class="card-body">
+      <h2 class="card-title">Featured</h2>
+      <p>This card is wrapped in an aura effect.</p>
+    </div>
+  </div>
+</div>
+```

package/skill/margaui/components/megamenu.md ADDED Viewed

@@ -0,0 +1,131 @@
+# megamenu
+_large horizontal nav bar whose items open big popover panels_
+## What it does
+Top-of-page horizontal menu where each item opens a popover (via the native Popover API) containing a menu or arbitrary content. Collapses to a vertical popover on small screens via `megamenu-vertical`.
+## When to use
+- Large-screen primary navigation with rich per-item content (site-wide nav with categorized links).
+- For a simple sidebar/dropdown list without per-item popovers, use **menu** instead.
+- Requires a browser with Popover API + CSS anchor positioning support.
+## Core classes
+`megamenu` on the container (a `popover` element); `megamenu-active` on the sliding indicator `<span>`; width `megamenu-wide|full`; direction `megamenu-vertical`; size `megamenu-xs|sm|md|lg|xl`.
+## Examples
+### Megamenu
+Source: `playground/components/megamenu/megamenu.html`
+```html
+<!-- popovertarget must match the id of the corresponding popover, and each id must be unique -->
+<button class="btn sm:hidden" popovertarget="my-megamenu-1">Menu</button>
+<div class="megamenu max-sm:megamenu-vertical p-2 border border-base-300" id="my-megamenu-1" popover>
+  <span class="megamenu-active"></span>
+  <button popovertarget="a1">Services</button>
+  <div id="a1" popover>
+    <ul class="menu">
+      <li><a>Enterprise</a></li>
+      <li><a>CRM software</a></li>
+      <li><a>Security</a></li>
+      <li><a>Consulting</a></li>
+    </ul>
+  </div>
+  <button popovertarget="a2">AI</button>
+  <div id="a2" popover>
+    <ul class="menu">
+      <li><a>AI infrastructure</a></li>
+      <li><a>Image generation</a></li>
+      <li><a>MCP servers</a></li>
+    </ul>
+  </div>
+  <button popovertarget="a3">Cloud Solutions</button>
+  <div id="a3" popover>
+    <ul class="menu">
+      <li><a>Cloud computing</a></li>
+      <li><a>Storage solutions</a></li>
+      <li><a>Database services</a></li>
+      <li><a>CDN performance</a></li>
+    </ul>
+  </div>
+</div>
+```
+### Megamenu sizes
+Source: `playground/components/megamenu/megamenu-sizes.html`
+```html
+<div class="flex flex-col gap-2">
+  <div class="megamenu megamenu-sm p-2 border border-base-300" id="my-megamenu-sm" popover="manual">
+    <span class="megamenu-active"></span>
+    <button popovertarget="c1">One</button>
+    <div id="c1" popover>
+      <ul class="menu">
+        <li><a>Link</a></li>
+      </ul>
+    </div>
+    <button popovertarget="c2">Two</button>
+    <div id="c2" popover>
+      <ul class="menu">
+        <li><a>Link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="megamenu megamenu-lg p-2 border border-base-300" id="my-megamenu-lg" popover="manual">
+    <span class="megamenu-active"></span>
+    <button popovertarget="c3">One</button>
+    <div id="c3" popover>
+      <ul class="menu">
+        <li><a>Link</a></li>
+      </ul>
+    </div>
+    <button popovertarget="c4">Two</button>
+    <div id="c4" popover>
+      <ul class="menu">
+        <li><a>Link</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+```
+### Megamenu wide
+Source: `playground/components/megamenu/megamenu-wide.html`
+```html
+<button class="btn sm:hidden" popovertarget="my-megamenu-2">Menu</button>
+<div class="megamenu megamenu-wide max-sm:megamenu-vertical p-2 border border-base-300" id="my-megamenu-2" popover>
+  <span class="megamenu-active"></span>
+  <button popovertarget="b1">Products</button>
+  <div id="b1" popover>
+    <ul class="menu md:menu-horizontal">
+      <li><a>Analytics</a></li>
+      <li><a>Automation</a></li>
+      <li><a>Reporting</a></li>
+    </ul>
+  </div>
+  <button popovertarget="b2">Pricing</button>
+  <div id="b2" popover>
+    <ul class="menu md:menu-horizontal">
+      <li><a>Starter</a></li>
+      <li><a>Team</a></li>
+      <li><a>Enterprise</a></li>
+    </ul>
+  </div>
+</div>
+```

package/skill/margaui/components/menu.md CHANGED Viewed

@@ -9,6 +9,7 @@ Versatile nav list for sidebars, sub-menus, mega-menus, file trees.
 ## When to use
 - Sidebars, dropdown contents, mobile drawer contents.
+- For a large horizontal nav bar with per-item popover panels, use **megamenu** instead.
 ## Core classes

package/skill/margaui/components/otp.md ADDED Viewed

@@ -0,0 +1,171 @@
+# otp
+_one-time-password digit input (2FA / verification codes)_
+## What it does
+A `<label class="otp">` wrapping N empty `<span>` boxes (one per digit) plus a single real `<input>`; the spans render as the visual digit boxes overlaying the input.
+## When to use
+- 2FA / passwordless-login verification code entry.
+- Number of `<span>` elements must match the input's `maxlength`/`pattern`.
+## Core classes
+`otp`; modifier `otp-joined`; size `otp-xs|sm|md|lg|xl`; color `otp-neutral|primary|secondary|accent|info|success|warning|error`.
+## Examples
+### Otp
+Source: `playground/components/otp/otp.html`
+```html
+<label class="otp">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+</label>
+```
+### Otp joined
+Source: `playground/components/otp/otp-joined.html`
+```html
+<label class="otp otp-joined">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+</label>
+```
+### Otp sizes
+Source: `playground/components/otp/otp-sizes.html`
+```html
+<div class="flex flex-col gap-4 items-center">
+  <label class="otp otp-xs">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-sm">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-md">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-lg">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-xl">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+</div>
+```
+### Otp with 6 digits
+Source: `playground/components/otp/otp-with-6-digits.html`
+```html
+<label class="otp">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="6" pattern="[0-9]{6}" required />
+</label>
+```
+### Otp with colors
+Source: `playground/components/otp/otp-with-colors.html`
+```html
+<div class="flex flex-col gap-4 items-center">
+  <label class="otp otp-neutral">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-primary">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-secondary">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-accent">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-info">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-success">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-warning">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-error">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+</div>
+```

package/skill/margaui/components/range.md CHANGED Viewed

@@ -12,7 +12,7 @@ Themed range slider.
 ## Core classes
-`range`; color `range-primary|secondary|accent|info|success|warning|error|neutral`; size `range-xs|sm|md|lg|xl`.
+`range`; color `range-primary|secondary|accent|info|success|warning|error|neutral`; size `range-xs|sm|md|lg|xl`; orientation `range-vertical`.
 ## Examples

package/skill/margaui/components/stack.md CHANGED Viewed

@@ -12,7 +12,7 @@ Stacks children on top of each other (Z-axis), with optional offset/spread for c
 ## Core classes
-`stack`; modifiers `stack-top|start|end` and shadow modifiers.
+`stack`; modifiers `stack-top|bottom|start|end` and shadow modifiers.
 ## Examples

package/skill/margaui/components/tooltip.md CHANGED Viewed

@@ -13,7 +13,7 @@ Hover/focus tooltip; content from `data-tip` or a child `tooltip-content` elemen
 ## Core classes
-`tooltip`; position `tooltip-top|bottom|left|right`; color `tooltip-primary|…`; modifier `tooltip-open` to force-show; `data-tip="…"` for text content.
+`tooltip`; position `tooltip-top|bottom|left|right`; align `tooltip-start|center|end`; color `tooltip-primary|…`; modifier `tooltip-open` to force-show; `data-tip="…"` for text content.
 ## Examples