{
  "$schema": "https://comp.meowda.xyz/registry.schema.json",
  "name": "meowda",
  "homepage": "https://comp.meowda.xyz",
  "style": "house",
  "theme": "void",
  "css": {
    "meowda.css": "https://comp.meowda.xyz/static/meowda.css"
  },
  "js": {
    "behaviors.js": "https://comp.meowda.xyz/static/behaviors.js"
  },
  "cssVars": {
    "--void": "#0b0d11",
    "--surface": "#12151c",
    "--surface-2": "#171b24",
    "--line": "#242a36",
    "--line-2": "#323a4a",
    "--ink": "#e9ecef",
    "--muted": "#8b94a3",
    "--faint": "#5b6473",
    "--accent": "#e8b04b",
    "--ok": "#5ddba0",
    "--no": "#ff7a7a"
  },
  "components": [
    {
      "name": "alert",
      "description": "An inline notice for ok, error and informational states, drawn from the CoE Print apps' .notice blocks.",
      "docs": "https://comp.meowda.xyz/docs/alert",
      "files": [
        {
          "path": "components/alert.html",
          "content": "<div class=\"stack\">\n  <div class=\"notice ok\">Job approved — queued on Prusa MK4.</div>\n  <div class=\"notice no\">Upload failed: file exceeds 250 MB.</div>\n  <div class=\"notice info\">Print hours reset on the 1st of each month.</div>\n</div>"
        }
      ],
      "js": false
    },
    {
      "name": "avatar",
      "description": "A circular avatar with a monospace initial fallback, used in the print app's account menu.",
      "docs": "https://comp.meowda.xyz/docs/avatar",
      "files": [
        {
          "path": "components/avatar.html",
          "content": "<span class=\"avatar\">XY</span>\n<span class=\"avatar lg\">ME</span>"
        }
      ],
      "js": false
    },
    {
      "name": "badge",
      "description": "Status stamps, mono pills and live dots — the vocabulary of state used across all three sites.",
      "docs": "https://comp.meowda.xyz/docs/badge",
      "files": [
        {
          "path": "components/badge.html",
          "content": "<span class=\"stamp ok\">Approved</span>\n<span class=\"stamp no\">Rejected</span>\n<span class=\"stamp wait\">Waiting</span>\n<span class=\"stamp dim\">Archived</span>\n\n<span class=\"pill ok\"><i></i>Online</span>\n<span class=\"chip\">PLA</span>\n<span class=\"dot live\"></span>"
        }
      ],
      "js": false
    },
    {
      "name": "bars",
      "description": "The 90-day uptime bar strip from the tyrone dashboard, with the service row it lives beside.",
      "docs": "https://comp.meowda.xyz/docs/bars",
      "files": [
        {
          "path": "components/bars.html",
          "content": "<div class=\"card\" style=\"max-width:560px\">\n  <h2>Services · 90 days</h2>\n  <div style=\"margin-top:6px\">\n    <div class=\"svc\">\n      <span class=\"d\"></span>\n      <div class=\"n\">gitea<small>git.meowda.xyz</small></div>\n      <div class=\"bars\" data-mw-bars=\"ok\"></div>\n      <div class=\"p\">100%</div>\n    </div>\n    <div class=\"svc\">\n      <span class=\"d\"></span>\n      <div class=\"n\">print-api<small>print.meowda.xyz</small></div>\n      <div class=\"bars\" data-mw-bars=\"mix\"></div>\n      <div class=\"p\">99.4%</div>\n    </div>\n    <div class=\"svc\">\n      <span class=\"d bad\"></span>\n      <div class=\"n\">ci-runner<small>build-03</small></div>\n      <div class=\"bars\" data-mw-bars=\"bad\"></div>\n      <div class=\"p\">96.1%</div>\n    </div>\n  </div>\n  <div class=\"axis\"><span>90 days ago</span><span>today</span></div>\n</div>"
        }
      ],
      "js": true
    },
    {
      "name": "button",
      "description": "Sharp-cornered mono buttons with primary, ok, danger and ghost variants — the workhorse of every action row on the print apps.",
      "docs": "https://comp.meowda.xyz/docs/button",
      "files": [
        {
          "path": "components/button.html",
          "content": "<button class=\"btn primary\">Approve</button>\n<button class=\"btn ok\">Confirm</button>\n<button class=\"btn\">Cancel</button>\n<button class=\"btn danger\">Reject</button>\n<button class=\"btn ghost\">Dismiss</button>\n\n<button class=\"btn sm\">Small</button>\n<button class=\"btn lg\">Large</button>\n<button class=\"btn\" disabled>Disabled</button>\n<button class=\"btn block\">Full width</button>"
        }
      ],
      "js": false
    },
    {
      "name": "card",
      "description": "Panels, tickets, metric tiles and link cards — every raised surface in the house style.",
      "docs": "https://comp.meowda.xyz/docs/card",
      "files": [
        {
          "path": "components/card.html",
          "content": "<div class=\"ticket\">\n  <div class=\"stub\"><span>Job #0421</span><span>3 h 12 m</span></div>\n  <h3 style=\"margin-top:10px\">Bracket v3 — final</h3>\n  <p class=\"small muted\" style=\"margin-top:4px\">bracket_final.3mf · Prusa MK4</p>\n</div>\n\n<div class=\"tile\">\n  <h2>CPU</h2>\n  <div class=\"big\">34<small>%</small></div>\n  <div class=\"sub\">ryzen 7 5800x · 4.2 GHz</div>\n  <span class=\"meter\"><i style=\"width:34%\"></i></span>\n</div>\n\n<a class=\"card-link\" href=\"#\">\n  <span class=\"grow\"><h3>Prusa MK4</h3><p class=\"small muted\">Bay 2 · idle</p></span>\n  <span class=\"stamp ok\">Ready</span>\n</a>"
        }
      ],
      "js": false
    },
    {
      "name": "chart",
      "description": "The SVG sparkline plot from the tyrone dashboard: grid lines, mono axes and a legend with live values.",
      "docs": "https://comp.meowda.xyz/docs/chart",
      "files": [
        {
          "path": "components/chart.html",
          "content": "<div class=\"card\" style=\"max-width:560px\">\n  <div class=\"ch-top\">\n    <h2>CPU load</h2>\n    <div class=\"legend\">\n      <span><i style=\"background:var(--accent)\"></i>sys <b data-mw-chart-v0>–</b></span>\n      <span><i style=\"background:var(--mem)\"></i>user <b data-mw-chart-v1>–</b></span>\n    </div>\n  </div>\n  <div class=\"plot\">\n    <div class=\"yax\"><span data-mw-chart-y2>100</span><span data-mw-chart-y1>50</span><span>0</span></div>\n    <svg data-mw-chart viewBox=\"0 0 300 100\" preserveAspectRatio=\"none\"></svg>\n  </div>\n  <div class=\"xax\"><span>5 min ago</span><span>now</span></div>\n</div>"
        }
      ],
      "js": true
    },
    {
      "name": "checkbox",
      "description": "A native checkbox with the accent colour and a mono label row, as used on the print submission form.",
      "docs": "https://comp.meowda.xyz/docs/checkbox",
      "files": [
        {
          "path": "components/checkbox.html",
          "content": "<label class=\"check\">\n  <input type=\"checkbox\" checked> I accept that print time is an estimate\n</label>"
        }
      ],
      "js": false
    },
    {
      "name": "chip",
      "description": "A tiny mono outline chip for tags like material type, filament or machine model.",
      "docs": "https://comp.meowda.xyz/docs/chip",
      "files": [
        {
          "path": "components/chip.html",
          "content": "<div class=\"row\">\n  <span class=\"chip\">PLA</span>\n  <span class=\"chip\">PETG</span>\n  <span class=\"chip\">0.2 mm</span>\n  <span class=\"chip\">0.4 nozzle</span>\n</div>"
        }
      ],
      "js": false
    },
    {
      "name": "code-plate",
      "description": "The big letter-spaced plate that shows a one-time enrollment code an admin reads out to a printer.",
      "docs": "https://comp.meowda.xyz/docs/code-plate",
      "files": [
        {
          "path": "components/code-plate.html",
          "content": "<div class=\"code-plate\">K7F-2QX</div>"
        }
      ],
      "js": false
    },
    {
      "name": "dialog",
      "description": "A modal dialog that becomes a bottom sheet below 560px, with a backdrop, grabber and action row.",
      "docs": "https://comp.meowda.xyz/docs/dialog",
      "files": [
        {
          "path": "components/dialog.html",
          "content": "<button class=\"btn primary\" data-mw-dialog=\"#demo-dialog\">Open dialog</button>\n<dialog id=\"demo-dialog\">\n  <div class=\"sheet\">\n    <div class=\"grabber\"></div>\n    <p class=\"eyebrow\">Confirm</p>\n    <h3>Approve this print job?</h3>\n    <p class=\"lede\">The job will be queued on Prusa MK4 and the student notified.</p>\n    <div class=\"btn-row end\">\n      <button class=\"btn\" data-mw-close>Cancel</button>\n      <button class=\"btn primary\" data-mw-close data-mw-toast=\"Job approved.\">Approve</button>\n    </div>\n  </div>\n</dialog>"
        }
      ],
      "js": true
    },
    {
      "name": "divider",
      "description": "The letter-spaced rule divider and the plain hairline rule used between sections of a ticket.",
      "docs": "https://comp.meowda.xyz/docs/divider",
      "files": [
        {
          "path": "components/divider.html",
          "content": "<div class=\"divider\">Materials</div>\n<hr class=\"rule\">\n<div class=\"stub\"><span>Left label</span><span>Right label</span></div>"
        }
      ],
      "js": false
    },
    {
      "name": "dropdown-menu",
      "description": "The account menu from the print app's masthead: a round toggle opening a raised panel.",
      "docs": "https://comp.meowda.xyz/docs/dropdown-menu",
      "files": [
        {
          "path": "components/dropdown-menu.html",
          "content": "<div class=\"menu\" data-mw-menu>\n  <button class=\"menu-toggle\" aria-label=\"Account menu\" aria-expanded=\"false\">☰</button>\n  <div class=\"menu-panel\" hidden>\n    <div class=\"menu-who\">\n      <span class=\"avatar\">XY</span>\n      <span class=\"grow\"><strong>xyoda</strong><span class=\"small muted\">Student · VIT-AP</span></span>\n    </div>\n    <hr class=\"rule\" style=\"margin:0\">\n    <a class=\"btn sm block\" href=\"#dropdown-menu\">My jobs</a>\n    <a class=\"btn sm block ghost\" href=\"#dropdown-menu\">Sign out</a>\n  </div>\n</div>"
        }
      ],
      "js": true
    },
    {
      "name": "empty",
      "description": "The dashed empty state shown when a list has nothing in it.",
      "docs": "https://comp.meowda.xyz/docs/empty",
      "files": [
        {
          "path": "components/empty.html",
          "content": "<div class=\"empty\">No print jobs yet.</div>"
        }
      ],
      "js": false
    },
    {
      "name": "eyebrow",
      "description": "Mono uppercase eyebrows, section heads and count badges — the small labels that title every section.",
      "docs": "https://comp.meowda.xyz/docs/eyebrow",
      "files": [
        {
          "path": "components/eyebrow.html",
          "content": "<p class=\"eyebrow\">Queue · Bay 2</p>\n\n<div class=\"section-head\">\n  <h2>Pending jobs</h2>\n  <span class=\"count hot\">3</span>\n</div>\n\n<div class=\"big-state tone-ok\">All systems go</div>"
        }
      ],
      "js": false
    },
    {
      "name": "field",
      "description": "Labelled form fields, the two-column row and the letter-spaced PIN input.",
      "docs": "https://comp.meowda.xyz/docs/field",
      "files": [
        {
          "path": "components/field.html",
          "content": "<label class=\"field\"><span>File name</span><input type=\"text\" placeholder=\"bracket_v3.3mf\"></label>\n\n<div class=\"two\">\n  <label class=\"field\"><span>Material</span><input type=\"text\" value=\"PLA — grey\"></label>\n  <label class=\"field\"><span>Colour</span><input type=\"text\" placeholder=\"Any\"></label>\n</div>\n\n<input class=\"pin-input\" type=\"text\" inputmode=\"numeric\" maxlength=\"6\" placeholder=\"••••\">"
        }
      ],
      "js": false
    },
    {
      "name": "footer",
      "description": "The mono credit footer that closes every page across the sites.",
      "docs": "https://comp.meowda.xyz/docs/footer",
      "files": [
        {
          "path": "components/footer.html",
          "content": "<footer class=\"credit\">\n  <span>Made by xyoda</span>\n  <span>Meowda · 2026</span>\n</footer>"
        }
      ],
      "js": false
    },
    {
      "name": "header",
      "description": "The sticky masthead with backdrop blur and the brand lockup — display name over a mono accent sub.",
      "docs": "https://comp.meowda.xyz/docs/header",
      "files": [
        {
          "path": "components/header.html",
          "content": "<header class=\"mast\">\n  <div class=\"mast-inner\">\n    <a class=\"brand\" href=\"/\">\n      <img class=\"brand-mark\" src=\"/favicon.svg\" alt=\"\">\n      <span class=\"brand-text\">\n        <span class=\"brand-name\">CoE Print</span>\n        <span class=\"brand-sub\">Centers of Excellence</span>\n      </span>\n    </a>\n  </div>\n</header>"
        }
      ],
      "js": false
    },
    {
      "name": "input",
      "description": "The dark void-field text input with an amber focus border, from the print submission form.",
      "docs": "https://comp.meowda.xyz/docs/input",
      "files": [
        {
          "path": "components/input.html",
          "content": "<input type=\"text\" placeholder=\"Search jobs…\">\n<input type=\"number\" placeholder=\"Copies\">"
        }
      ],
      "js": false
    },
    {
      "name": "list",
      "description": "Hairline-separated lists, key-value fact grids and the row layout from the print job ticket.",
      "docs": "https://comp.meowda.xyz/docs/list",
      "files": [
        {
          "path": "components/list.html",
          "content": "<ul class=\"list\">\n  <li><span class=\"grow\">Queued</span><span class=\"mono small muted\">09:14</span></li>\n  <li><span class=\"grow\">Approved</span><span class=\"mono small muted\">09:31</span></li>\n</ul>\n\n<dl class=\"facts\">\n  <dt>Printer</dt><dd>Prusa MK4 · Bay 2</dd>\n  <dt>Material</dt><dd>PLA — grey</dd>\n</dl>"
        }
      ],
      "js": false
    },
    {
      "name": "meter",
      "description": "The thin progress meter from the tyrone tiles, plus the big-state tone classes for headline status.",
      "docs": "https://comp.meowda.xyz/docs/meter",
      "files": [
        {
          "path": "components/meter.html",
          "content": "<span class=\"meter\"><i style=\"width:34%\"></i></span>\n<span class=\"meter\"><i style=\"width:61%;background:var(--mem)\"></i></span>"
        }
      ],
      "js": false
    },
    {
      "name": "select",
      "description": "The void select with a mono chevron, styled to match the text inputs.",
      "docs": "https://comp.meowda.xyz/docs/select",
      "files": [
        {
          "path": "components/select.html",
          "content": "<div class=\"stack\" style=\"max-width:320px\">\n  <select>\n    <option>Prusa MK4 — Bay 2</option>\n    <option>Bambu X1C — Bay 4</option>\n    <option>Ender 3 S1 — Bay 7</option>\n  </select>\n</div>"
        }
      ],
      "js": false
    },
    {
      "name": "skeleton",
      "description": "Shimmering placeholder blocks and the sweeping hazard bar for indeterminate loading.",
      "docs": "https://comp.meowda.xyz/docs/skeleton",
      "files": [
        {
          "path": "components/skeleton.html",
          "content": "<div class=\"stack\" style=\"max-width:420px\">\n  <div class=\"skeleton\" style=\"height:20px;width:60%\"></div>\n  <div class=\"skeleton\" style=\"height:14px\"></div>\n  <div class=\"skeleton\" style=\"height:14px;width:80%\"></div>\n  <div class=\"hazard\" style=\"margin-top:8px\"></div>\n</div>"
        }
      ],
      "js": false
    },
    {
      "name": "spinner",
      "description": "A small amber spinner for inline loading, next to the live dot with its ping ring.",
      "docs": "https://comp.meowda.xyz/docs/spinner",
      "files": [
        {
          "path": "components/spinner.html",
          "content": "<div class=\"row\">\n  <span class=\"spinner\"></span>\n  <span class=\"mono small muted\">Loading…</span>\n  <span class=\"dot live\"></span>\n  <span class=\"mono small muted\">Streaming</span>\n</div>"
        }
      ],
      "js": false
    },
    {
      "name": "stats",
      "description": "The hairline-gutter stats grid that shows print job parameters on the ticket.",
      "docs": "https://comp.meowda.xyz/docs/stats",
      "files": [
        {
          "path": "components/stats.html",
          "content": "<dl class=\"stats\">\n  <div><dt>Print time</dt><dd>3 h 12 m</dd></div>\n  <div><dt>Filament</dt><dd>42.6 g</dd></div>\n  <div><dt>Layer height</dt><dd>0.2 mm</dd></div>\n</dl>"
        }
      ],
      "js": false
    },
    {
      "name": "steps",
      "description": "The numbered amber-counter steps list from the print submission flow.",
      "docs": "https://comp.meowda.xyz/docs/steps",
      "files": [
        {
          "path": "components/steps.html",
          "content": "<ol class=\"steps\">\n  <li><strong>Upload</strong>&nbsp;your STL or 3MF file</li>\n  <li><strong>Pick</strong>&nbsp;a printer and material</li>\n  <li><strong>Wait</strong>&nbsp;for admin approval</li>\n</ol>"
        }
      ],
      "js": false
    },
    {
      "name": "swatch",
      "description": "Colour swatches with the filament list row, including the hatched unknown swatch.",
      "docs": "https://comp.meowda.xyz/docs/swatch",
      "files": [
        {
          "path": "components/swatch.html",
          "content": "<span class=\"swatch\" style=\"--swatch:#e8b04b\"></span>\n\n<ul class=\"filaments\">\n  <li><span class=\"swatch\" style=\"--swatch:#5ddba0\"></span>\n      <span class=\"fil-type\">PETG — mint</span>\n      <span class=\"fil-amount\">88 g</span></li>\n  <li><span class=\"swatch unknown\"></span>\n      <span class=\"fil-type\">Unknown</span>\n      <span class=\"fil-amount\">—</span></li>\n</ul>"
        }
      ],
      "js": false
    },
    {
      "name": "tabs",
      "description": "The admin section tabs — mono uppercase, with a hot variant that fills the count in amber.",
      "docs": "https://comp.meowda.xyz/docs/tabs",
      "files": [
        {
          "path": "components/tabs.html",
          "content": "<div data-mw-tabs>\n  <div class=\"tabs\">\n    <button class=\"tab\" data-mw-tab=\"pending\" aria-selected=\"true\">Pending <span class=\"tab-count\">3</span></button>\n    <button class=\"tab hot\" data-mw-tab=\"today\" aria-selected=\"false\">Today <span class=\"tab-count\">12</span></button>\n    <button class=\"tab\" data-mw-tab=\"done\" aria-selected=\"false\">Done</button>\n  </div>\n  <div data-mw-panel=\"pending\" class=\"card\" style=\"margin-top:12px\">Three jobs are waiting for approval.</div>\n  <div data-mw-panel=\"today\" class=\"card\" style=\"margin-top:12px\" hidden>Twelve jobs were printed today.</div>\n  <div data-mw-panel=\"done\" class=\"card\" style=\"margin-top:12px\" hidden>Nothing archived this week.</div>\n</div>"
        }
      ],
      "js": true
    },
    {
      "name": "textarea",
      "description": "A monospace textarea for notes and instructions, matching the input fields.",
      "docs": "https://comp.meowda.xyz/docs/textarea",
      "files": [
        {
          "path": "components/textarea.html",
          "content": "<div class=\"stack\" style=\"max-width:420px\">\n  <textarea placeholder=\"Notes for the admin…\"></textarea>\n</div>"
        }
      ],
      "js": false
    },
    {
      "name": "toast",
      "description": "The fixed bottom toast with an amber left edge — call mwToast() or wire it to any element.",
      "docs": "https://comp.meowda.xyz/docs/toast",
      "files": [
        {
          "path": "components/toast.html",
          "content": "<div class=\"btn-row\" style=\"margin-top:0\">\n  <button class=\"btn\" data-mw-toast=\"Job approved.\">Show toast</button>\n  <button class=\"btn\" data-mw-toast=\"Filament loaded.\" data-mw-toast-ms=\"5000\">Long toast</button>\n</div>"
        }
      ],
      "js": true
    },
    {
      "name": "typography",
      "description": "The display/sans/mono type system: Outfit for titles, Manrope for body, IBM Plex Mono for data.",
      "docs": "https://comp.meowda.xyz/docs/typography",
      "files": [
        {
          "path": "components/typography.html",
          "content": "<p class=\"eyebrow\">Section eyebrow</p>\n<h1 class=\"title\">Page title</h1>\n<h2>Section head</h2>\n<h3>Card heading</h3>\n<p class=\"lede\">Body copy with a muted lede.</p>\n<p class=\"mono small faint\">Mono data labels</p>\n<div class=\"big-state tone-wait\">Big state</div>"
        }
      ],
      "js": false
    }
  ]
}