@tollerud/ui 3.1.0 → 4.0.1

package/globals-layers.css

@@ -141,6 +141,7 @@
       rgba(232, 213, 0, 0.8),
       rgba(255, 184, 0, 0.4)
     );
+    --tollerud-shimmer-highlight: #FFFDE6;
 
     /* ═══ Transition ═══ */
     --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -193,6 +194,13 @@
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
+    .tollerud-display-shimmer {
+      animation: none !important;
+      background: none;
+      -webkit-background-clip: initial;
+      background-clip: initial;
+      color: var(--primary);
+    }
   }
 }
 
@@ -236,7 +244,7 @@
     box-shadow: var(--shadow-glow, 0 0 15px rgba(255,255,0,0.3));
   }
   .tollerud-btn--secondary {
-    background: transparent;
+    background: var(--surface-raised);
     color: var(--foreground);
     border-color: var(--border);
   }
@@ -597,6 +605,24 @@
     line-height: 1.1;
   }
 
+  /* Animated yellow sweep clipped to text — pair with .tollerud-display on dark surfaces */
+  .tollerud-display-shimmer {
+    background: linear-gradient(
+      100deg,
+      var(--tollerud-yellow) 32%,
+      var(--tollerud-shimmer-highlight) 50%,
+      var(--tollerud-yellow) 68%
+    );
+    background-size: 220% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: tollerud-display-shimmer 5s linear infinite;
+  }
+  @keyframes tollerud-display-shimmer {
+    to { background-position: -220% 0; }
+  }
+
   /* ═══ Status Indicator ═══ */
   .tollerud-status {
     display: inline-flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tollerud/ui",
-  "version": "3.1.0",
+  "version": "4.0.1",
   "description": "Tollerud User Interface — dark, monochrome + yellow accent. Noir aesthetic meets modern utility.",
   "private": false,
   "type": "module",
@@ -8,14 +8,15 @@
     "type": "git",
     "url": "git+https://github.com/Tollerud/ui.git"
   },
-  "homepage": "https://tollerud.github.io/design-system/",
+  "homepage": "https://design.tollerud.dev/",
   "bugs": {
     "url": "https://github.com/Tollerud/ui/issues"
   },
   "license": "MIT",
   "author": "Mathias Tollerud <mathias.tollerud@gmail.com>",
+  "packageManager": "npm@11.16.0",
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "sideEffects": [
     "*.css"
@@ -32,16 +33,15 @@
     },
     "./globals.css": "./globals.css",
     "./globals-v3.css": "./globals-v3.css",
-    "./globals-v4.css": "./globals-v4.css",
     "./globals-layers.css": "./globals-layers.css",
     "./tailwind.css": "./tailwind.css",
     "./tokens.css": "./tokens.css",
     "./preset": "./tollerud-preset.js",
-    "./tollerud-logo.svg": "./tollerud-logo.svg",
-    "./tollerud-avatar.svg": "./tollerud-avatar.svg",
-    "./tollerud-avatar.png": "./tollerud-avatar.png",
-    "./tollerud-avatar-full.svg": "./tollerud-avatar-full.svg",
-    "./tollerud-avatar-full.png": "./tollerud-avatar-full.png",
+    "./brand/tollerud-logo.svg": "./brand/tollerud-logo.svg",
+    "./brand/tollerud-avatar.svg": "./brand/tollerud-avatar.svg",
+    "./brand/tollerud-avatar.png": "./brand/tollerud-avatar.png",
+    "./brand/tollerud-avatar-full.svg": "./brand/tollerud-avatar-full.svg",
+    "./brand/tollerud-avatar-full.png": "./brand/tollerud-avatar-full.png",
     "./registry.json": "./registry.json",
     "./*": {
       "import": {
@@ -54,7 +54,6 @@
     "dist",
     "globals.css",
     "globals-v3.css",
-    "globals-v4.css",
     "globals-layers.css",
     "tailwind.css",
     "tokens.css",
@@ -64,11 +63,7 @@
     "GETTING_STARTED.md",
     "COMPONENTS.md",
     "CHANGELOG.md",
-    "tollerud-logo.svg",
-    "tollerud-avatar.svg",
-    "tollerud-avatar.png",
-    "tollerud-avatar-full.svg",
-    "tollerud-avatar-full.png",
+    "brand",
     "AGENTS.md",
     "SKILL.md"
   ],
@@ -83,19 +78,20 @@
     "test:subpath": "node scripts/verify-subpath-exports.mjs",
     "test:drift": "node scripts/verify-registry-drift.mjs",
     "test:consumer": "node scripts/test-consumer.mjs",
+    "sync:footer": "node scripts/sync-footer-package.mjs",
+    "verify:footer-sync": "node scripts/verify-footer-sync.mjs",
     "test:package": "node scripts/test-package.mjs",
     "test:size": "node scripts/test-size.mjs",
     "sync:registry": "node scripts/sync-registry-version.mjs",
     "changelog:draft": "node scripts/changelog-draft.mjs",
     "changeset": "changeset",
-    "version:release": "changeset version && npm run sync:registry",
+    "version:release": "changeset version && npm run sync:registry && npm run sync:footer",
     "docs:props": "node scripts/generate-props.mjs",
     "test:props": "node scripts/verify-props-drift.mjs",
-    "validate": "npm run typecheck && npm run lint && npm run test && npm run build && npm run test:subpath && npm run test:drift && npm run test:package && npm run test:size && npm run test:props && npm run build:docs && npm run test:consumer",
+    "validate": "npm run typecheck && npm run lint && npm run test && npm run build && npm run test:subpath && npm run test:drift && npm run test:package && npm run test:size && npm run test:props && npm run verify:footer-sync && npm run build:docs && npm run test:consumer",
     "prepublishOnly": "npm run sync:registry && npm run typecheck && npm run lint && npm run test && npm run build && npm run test:subpath && npm run test:drift && npm run test:package && npm run test:size && npm run test:props",
     "build:docs": "node scripts/build-docs.mjs",
-    "preview:docs": "npx --yes serve _site -l 4173",
-    "preview": "open preview.html"
+    "preview:docs": "npx --yes serve _site -l 4173"
   },
   "peerDependencies": {
     "@paper-design/shaders-react": "^0.0.76",
@@ -129,7 +125,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.17",
     "@radix-ui/react-progress": "^1.1.9",
     "@radix-ui/react-slot": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tabs": "^1.1.14",
     "@radix-ui/react-tooltip": "^1.2.9",
     "@eslint/js": "^9.39.4",
     "@playwright/test": "^1.60.0",

package/registry.json

@@ -1,11 +1,11 @@
 {
-  "name": "tollerud-noir",
-  "version": "3.1.0",
-  "description": "Tollerud Design System \u2014 dark, cinematic, keyboard-first infrastructure UI",
+  "name": "Tollerud User Interface",
+  "version": "4.0.1",
+  "description": "Dark, monochrome React components with a single yellow accent — built for dashboards, tools, and homelab UIs.",
   "components": {
     "button": {
       "name": "Button",
-      "description": "Primary action button with terminal, ghost, and variant styles",
+      "description": "Five variants and three sizes — primary, secondary, ghost, destructive, and terminal. Supports asChild, icons, and loading state",
       "files": [
         "components/Button.tsx"
       ],
@@ -213,7 +213,7 @@
     },
     "incident-card": {
       "name": "IncidentCard",
-      "description": "Severity-graded incident/alert card (critical \u2192 info)",
+      "description": "Severity-graded incident/alert card (critical → info)",
       "files": [
         "components/IncidentCard.tsx"
       ],
@@ -455,7 +455,7 @@
     },
     "bento-dashboard": {
       "name": "BentoDashboard",
-      "description": "Composable bento-grid dashboard layout for hosts, metrics, services, and incidents",
+      "description": "Homelab mission-control bento grid — host cards, metrics, services, and recent incidents",
       "files": [
         "components/BentoDashboard.tsx"
       ],
@@ -463,7 +463,12 @@
         "clsx",
         "tailwind-merge"
       ],
-      "registryDependencies": [],
+      "registryDependencies": [
+        "host-card",
+        "stat-card",
+        "service-health-card",
+        "incident-card"
+      ],
       "type": "components:ui"
     },
     "breadcrumb": {
@@ -890,7 +895,7 @@
     },
     "hero-block": {
       "name": "HeroBlock",
-      "description": "Landing hero on noir glow background with optional shader intensity",
+      "description": "Landing hero with noir glow background. Pass intense for live WebGL shader; optional media slot for two-column layout",
       "files": [
         "components/HeroBlock.tsx"
       ],
@@ -921,7 +926,7 @@
     },
     "cta-band": {
       "name": "CTABand",
-      "description": "Closing call-to-action band with optional yellow accent bar",
+      "description": "Centered closing call-to-action with title, description, action row, and optional yellow accent bar",
       "files": [
         "components/CTABand.tsx"
       ],

package/tokens.css

@@ -42,6 +42,7 @@
   --tollerud-border:         #333333;
   --tollerud-border-subtle:  #252525;
   --tollerud-border-accent:  #FFFF00;
+  --tollerud-shimmer-highlight: #FFFDE6;
 
   /* ── States ── */
   --tollerud-success:        #22C55E;
@@ -222,13 +223,13 @@ code, pre {
 }
 
 .tollerud-btn--secondary {
-  background: transparent;
-  color: var(--tollerud-text-primary);
-  border-color: var(--tollerud-border);
+  background: var(--surface-raised, var(--tollerud-surface-raised));
+  color: var(--foreground, var(--tollerud-text-primary));
+  border-color: var(--border, var(--tollerud-border));
 }
 .tollerud-btn--secondary:hover {
-  border-color: var(--tollerud-text-secondary);
-  background: var(--tollerud-surface-hover);
+  border-color: var(--text-secondary, var(--tollerud-text-secondary));
+  background: var(--surface-hover, var(--tollerud-surface-hover));
 }
 
 .tollerud-btn--ghost {
@@ -351,6 +352,13 @@ code, pre {
 @media (prefers-reduced-motion: reduce) {
   .tollerud-noir-glow-bg,
   .tollerud-noir-noise { animation: none !important; }
+  .tollerud-display-shimmer {
+    animation: none !important;
+    background: none;
+    -webkit-background-clip: initial;
+    background-clip: initial;
+    color: var(--tollerud-yellow);
+  }
 }
 
 /* ── Background Grid ── */
@@ -452,6 +460,22 @@ code, pre {
   line-height: 0.95;
   color: white;
 }
+.tollerud-display-shimmer {
+  background: linear-gradient(
+    100deg,
+    var(--tollerud-yellow) 32%,
+    var(--tollerud-shimmer-highlight) 50%,
+    var(--tollerud-yellow) 68%
+  );
+  background-size: 220% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: tollerud-display-shimmer 5s linear infinite;
+}
+@keyframes tollerud-display-shimmer {
+  to { background-position: -220% 0; }
+}
 
 /* ── Kbd (Keyboard Shortcut Chip) ── */
 .tollerud-kbd { display: inline-flex; align-items: center; gap: 2px; }

package/dist/chunk-6SKTH45H.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../components/RadioGroup.tsx"],"names":[],"mappings":";;;;AAcA,IAAM,UAAA,GAAa,UAAA;AAAA,EACjB,CAAC,EAAE,KAAA,EAAO,OAAO,QAAA,EAAU,SAAA,IAAa,GAAA,KAAQ;AAC9C,IAAA,4BACG,UAAA,EAAA,EAAS,GAAA,EAAU,WAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA,EAC/D,QAAA,EAAA;AAAA,MAAA,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,mDAAA,EACf,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,sBAEF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAS,CAAA;AAAA,MAC9C,KAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sCAAsC,QAAA,EAAA,KAAA,EAAM;AAAA,KAAA,EAE7D,CAAA;AAAA,EAEJ;AACF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA;AAMzB,IAAM,KAAA,GAAQ,UAAA;AAAA,EACZ,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,IAAI,MAAA,EAAQ,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnD,IAAA,MAAM,SAAS,KAAA,EAAM;AACrB,IAAA,MAAM,KAAK,MAAA,IAAU,MAAA;AAErB,IAAA,uBACE,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,EAAA;AAAA,QACT,SAAA,EAAW,EAAA;AAAA,UACT,iEAAA;AAAA,UACA,oCAAA;AAAA,UACA,MAAM,QAAA,IAAY,gCAAA;AAAA,UAClB;AAAA,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,2CAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,OAAA;AAAA,cAAA;AAAA,gBACC,GAAA;AAAA,gBACA,EAAA;AAAA,gBACA,IAAA,EAAK,OAAA;AAAA,gBACL,SAAA,EAAU,cAAA;AAAA,gBACT,GAAG;AAAA;AAAA,aACN;AAAA,4BAEA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,6DAAA;AAAA,kBACA,mDAAA;AAAA,kBACA,yEAAA;AAAA,kBACA,qCAAA;AAAA,kBACA,4CAAA;AAAA,kBACA;AAAA,iBACF;AAAA,gBAGA,QAAA,kBAAA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,EAAA;AAAA,sBACT,6EAAA;AAAA,sBACA,KAAA,CAAM,UAAU,aAAA,GAAgB;AAAA;AAClC;AAAA;AACF;AAAA;AACF,WAAA,EACF,CAAA;AAAA,UACC,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,KACzB;AAAA,EAEJ;AACF;AACA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-6SKTH45H.js","sourcesContent":["'use client'\n\nimport { type InputHTMLAttributes, forwardRef, useId } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface RadioGroupProps {\n  /** Group label */\n  label?: string\n  /** Error message */\n  error?: string\n  children?: React.ReactNode\n  className?: string\n}\n\nconst RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(\n  ({ label, error, children, className }, ref) => {\n    return (\n      <fieldset ref={ref} className={cn('flex flex-col gap-1', className)}>\n        {label && (\n          <legend className=\"text-xs font-medium text-tollerud-text-muted mb-1\">\n            {label}\n          </legend>\n        )}\n        <div className=\"flex flex-col gap-2\">{children}</div>\n        {error && (\n          <p className=\"text-xs text-tollerud-error mt-0.5\">{error}</p>\n        )}\n      </fieldset>\n    )\n  }\n)\nRadioGroup.displayName = 'RadioGroup'\n\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  label?: string\n}\n\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(\n  ({ className, label, id: idProp, ...props }, ref) => {\n    const autoId = useId()\n    const id = idProp ?? autoId\n\n    return (\n      <label\n        htmlFor={id}\n        className={cn(\n          'inline-flex items-center gap-2 cursor-pointer select-none group',\n          'text-sm text-tollerud-text-primary',\n          props.disabled && 'opacity-50 pointer-events-none',\n          className\n        )}\n      >\n        <span className=\"relative flex items-center justify-center\">\n          <input\n            ref={ref}\n            id={id}\n            type=\"radio\"\n            className=\"peer sr-only\"\n            {...props}\n          />\n          {/* Custom radio circle */}\n          <span\n            className={cn(\n              'h-4 w-4 rounded-full border transition-all duration-[150ms]',\n              'bg-tollerud-surface-raised border-tollerud-border',\n              'peer-focus-visible:outline-2 peer-focus-visible:outline-tollerud-yellow',\n              'peer-checked:border-tollerud-yellow',\n              'group-hover:border-tollerud-text-secondary',\n              'flex items-center justify-center'\n            )}\n          >\n            {/* Inner dot */}\n            <span\n              className={cn(\n                'h-2 w-2 rounded-full bg-tollerud-yellow transition-opacity duration-[150ms]',\n                props.checked ? 'opacity-100' : 'opacity-0'\n              )}\n            />\n          </span>\n        </span>\n        {label && <span>{label}</span>}\n      </label>\n    )\n  }\n)\nRadio.displayName = 'Radio'\n\nexport { RadioGroup, Radio }"]}

package/dist/chunk-ADE22JSR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../components/Button.tsx"],"names":[],"mappings":";;;;;AAIA,IAAM,QAAA,GAAW;AAAA,EACf,OAAA,EAAS,mHAAA;AAAA,EACT,SAAA,EAAW,uIAAA;AAAA,EACX,KAAA,EAAO,iIAAA;AAAA,EACP,WAAA,EAAa,gGAAA;AAAA,EACb,QAAA,EAAU;AACZ,CAAA;AAGA,IAAM,aAAA,GAAgB;AAAA,EACpB,OAAA,EAAS,uBAAA;AAAA,EACT,SAAA,EAAW,EAAA;AAAA,EACX,KAAA,EAAO,EAAA;AAAA,EACP,WAAA,EAAa,EAAA;AAAA,EACb,QAAA,EAAU;AACZ,CAAA;AAEA,IAAM,KAAA,GAAQ;AAAA,EACZ,EAAA,EAAI,mBAAA;AAAA,EACJ,EAAA,EAAI,qBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAOO,SAAS,cAAA,CAAe,EAAE,OAAA,GAAU,WAAA,EAAa,OAAO,IAAA,EAAM,SAAA,EAAU,GAAiD,EAAC,EAAG;AAClI,EAAA,OAAO,EAAA;AAAA,IACL,+MAAA;AAAA,IACA,uBAAA;AAAA,IACA,kDAAA;AAAA,IACA,SAAS,OAAO,CAAA;AAAA,IAChB,cAAc,OAAO,CAAA;AAAA,IACrB,MAAM,IAAI,CAAA;AAAA,IACV;AAAA,GACF;AACF;AAOA,IAAM,MAAA,GAAS,UAAA;AAAA,EACb,CAAC,EAAE,SAAA,EAAW,OAAA,GAAU,WAAA,EAAa,IAAA,GAAO,IAAA,EAAM,OAAA,GAAU,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACrF,IAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,QAAA;AAC9B,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,cAAA,CAAe,EAAE,OAAA,EAAS,IAAA,EAAM,WAAW,CAAA;AAAA,QACrD,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-ADE22JSR.js","sourcesContent":["import { type ButtonHTMLAttributes, forwardRef } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '@/lib/utils'\n\nconst variants = {\n  primary: 'bg-tollerud-yellow text-tollerud-black border-tollerud-yellow hover:bg-tollerud-yellow hover:shadow-tollerud-glow',\n  secondary: 'bg-transparent text-tollerud-text-primary border-tollerud-border hover:border-tollerud-text-secondary hover:bg-tollerud-surface-hover',\n  ghost: 'bg-transparent text-tollerud-text-secondary border-transparent hover:text-tollerud-text-primary hover:bg-tollerud-surface-hover',\n  destructive: 'bg-tollerud-error text-white border-tollerud-error hover:shadow-[0_0_12px_rgba(239,68,68,0.3)]',\n  terminal: 'font-mono text-tollerud-yellow border-[rgba(255,255,0,0.25)] bg-transparent hover:border-tollerud-yellow hover:shadow-tollerud-glow hover:bg-[rgba(255,255,0,0.05)]',\n} as const\n\n/** Layer classes from globals-layers.css — ❯ prefix, hover glow, magnetic glow in docs */\nconst variantLayers = {\n  primary: 'tollerud-btn--primary',\n  secondary: '',\n  ghost: '',\n  destructive: '',\n  terminal: 'tollerud-btn--terminal',\n} as const\n\nconst sizes = {\n  sm: 'px-3 py-1 text-sm',\n  md: 'px-4 py-2 text-base',\n  lg: 'px-6 py-3 text-lg',\n} as const\n\nexport interface ButtonVariantProps {\n  variant?: keyof typeof variants\n  size?: keyof typeof sizes\n}\n\nexport function buttonVariants({ variant = 'secondary', size = 'md', className }: ButtonVariantProps & { className?: string } = {}) {\n  return cn(\n    'tollerud-btn inline-flex items-center justify-center gap-2 font-semibold rounded transition-all duration-[150ms] focus-visible:outline-2 focus-visible:outline-tollerud-yellow focus-visible:outline-offset-2',\n    'border cursor-pointer',\n    'disabled:opacity-50 disabled:pointer-events-none',\n    variants[variant],\n    variantLayers[variant],\n    sizes[size],\n    className\n  )\n}\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantProps {\n  /** Render as the single child element (e.g. a `<Link>`) instead of a `<button>`, merging props and styles onto it. */\n  asChild?: boolean\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = 'secondary', size = 'md', asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    return (\n      <Comp\n        ref={ref}\n        className={buttonVariants({ variant, size, className })}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button }\n"]}

package/dist/chunk-IUPVQWO5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../components/CTABand.tsx"],"names":[],"mappings":";;;;AAUA,IAAM,OAAA,GAAU,UAAA;AAAA,EACd,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,SAAA,GAAY,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC/E,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,mGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,yDAAA,EAA2D,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UAC9E,WAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,uEACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAED,OAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8DAA8D,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,UAEtF,SAAA,oBACC,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qFAAA,EAAsF;AAAA;AAAA;AAAA,KAExG;AAAA,EAEJ;AACF;AACA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-IUPVQWO5.js","sourcesContent":["import { type HTMLAttributes, forwardRef } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface CTABandProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title: React.ReactNode\n  description?: React.ReactNode\n  actions?: React.ReactNode\n  accentBar?: boolean\n}\n\nconst CTABand = forwardRef<HTMLDivElement, CTABandProps>(\n  ({ className, title, description, actions, accentBar = true, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'tollerud-card rounded-xl border border-tollerud-border bg-tollerud-surface px-8 py-11 text-center',\n          className\n        )}\n        {...props}\n      >\n        <h2 className=\"tollerud-display text-[30px] text-tollerud-text-primary\">{title}</h2>\n        {description && (\n          <p className=\"mx-auto mt-3 max-w-[440px] text-[15px] text-tollerud-text-secondary\">\n            {description}\n          </p>\n        )}\n        {actions && (\n          <div className=\"mt-[22px] flex flex-wrap items-center justify-center gap-3\">{actions}</div>\n        )}\n        {accentBar && (\n          <hr className=\"tollerud-accent-bar tollerud-accent-bar--inline mx-auto mt-8 max-w-[320px] border-0\" />\n        )}\n      </div>\n    )\n  }\n)\nCTABand.displayName = 'CTABand'\n\nexport { CTABand }\n"]}

package/dist/chunk-ONMTHBZ4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../components/BentoDashboard.tsx"],"names":[],"mappings":"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","file":"chunk-ONMTHBZ4.js","sourcesContent":["'use client'\n\nimport { type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\nimport { HostCard, type HostCardProps } from './HostCard'\nimport { StatCard, type StatCardProps } from './StatCard'\nimport { ServiceHealthCard, type ServiceHealthCardProps } from './ServiceHealthCard'\nimport { IncidentCard } from './IncidentCard'\nimport type { IncidentSeverity } from './IncidentCard'\nimport type { BackupJob } from './BackupStatusPanel'\n\n/* ──────────────────── Bento Grid Dashboard Template ──────────────────── */\n\nexport interface BentoDashboardProps {\n  title: string\n  hosts?: HostCardProps[]\n  metrics?: StatCardProps[]\n  services?: ServiceHealthCardProps[]\n  incidents?: { title: string; severity: IncidentSeverity; timestamp: string; service: string; description?: string; acknowledged?: boolean }[]\n  backupJobs?: BackupJob[]\n  className?: string\n  /** Render the incident list footer */\n  renderIncidentFooter?: () => ReactNode\n}\n\nexport function BentoDashboard({\n  title,\n  hosts = [],\n  metrics = [],\n  services = [],\n  incidents = [],\n  className,\n}: BentoDashboardProps) {\n  return (\n    <div className={cn('space-y-4', className)}>\n      {/* Title bar */}\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h2 className=\"text-lg font-semibold text-tollerud-text-primary\">{title}</h2>\n          <p className=\"text-xs text-tollerud-text-muted\">\n            {hosts.length} hosts · {services.length} services\n            {incidents.length > 0 && ` · ${incidents.length} active incident${incidents.length > 1 ? 's' : ''}`}\n          </p>\n        </div>\n      </div>\n\n      {/* Row 1: Host cards — bento asymmetric */}\n      {hosts.length > 0 && (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n          <div className=\"md:col-span-2 lg:col-span-1\">\n            <HostCard {...hosts[0]} />\n          </div>\n          <div className=\"grid grid-cols-1 gap-3 md:col-span-2 lg:col-span-1\">\n            {hosts.slice(1).map((h, i) => (\n              <HostCard key={h.hostname ?? i} {...h} />\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Row 2: Metrics + Services — side by side */}\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-3\">\n        {metrics.length > 0 && (\n          <div className=\"lg:col-span-2\">\n            <SectionLabel>Metrics</SectionLabel>\n            <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n              {metrics.map((m, i) => (\n                <StatCard key={m.label ?? i} {...m} />\n              ))}\n            </div>\n          </div>\n        )}\n\n        {services.length > 0 && (\n          <div>\n            <SectionLabel>Services</SectionLabel>\n            <div className=\"space-y-2\">\n              {services.slice(0, 4).map((s, i) => (\n                <ServiceHealthCard key={s.service ?? i} {...s} />\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Row 3: Incidents — full width */}\n      {incidents.length > 0 && (\n        <div>\n          <SectionLabel>Recent Incidents</SectionLabel>\n          <div className=\"space-y-1.5\">\n            {incidents.slice(0, 4).map((inc, i) => (\n              <IncidentCard key={inc.title + i} {...inc} />\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction SectionLabel({ children }: { children: ReactNode }) {\n  return (\n    <p className=\"text-xs font-semibold text-tollerud-text-muted uppercase tracking-wider mb-2\">{children}</p>\n  )\n}\n\nexport default BentoDashboard\n"]}

package/dist/chunk-T3TQPOVM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../components/Checkbox.tsx"],"names":[],"mappings":";;;;AASA,IAAM,QAAA,GAAW,UAAA;AAAA,EACf,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,EAAA,EAAI,QAAQ,OAAA,EAAS,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC5D,IAAA,MAAM,SAAS,KAAA,EAAM;AACrB,IAAA,MAAM,KAAK,MAAA,IAAU,MAAA;AAErB,IAAA,uBACE,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,EAAA;AAAA,QACT,SAAA,EAAW,EAAA;AAAA,UACT,iEAAA;AAAA,UACA,oCAAA;AAAA,UACA,MAAM,QAAA,IAAY,gCAAA;AAAA,UAClB;AAAA,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,2CAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,OAAA;AAAA,cAAA;AAAA,gBACC,GAAA;AAAA,gBACA,EAAA;AAAA,gBACA,IAAA,EAAK,UAAA;AAAA,gBACL,OAAA;AAAA,gBACA,SAAA,EAAU,cAAA;AAAA,gBACT,GAAG;AAAA;AAAA,aACN;AAAA,4BAEA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,wDAAA;AAAA,kBACA,kCAAA;AAAA,kBACA,mDAAA;AAAA,kBACA,yEAAA;AAAA,kBACA,qEAAA;AAAA,kBACA;AAAA,iBACF;AAAA,gBAGA,QAAA,kBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,EAAA;AAAA,sBACT,sEAAA;AAAA,sBACA,UAAU,aAAA,GAAgB;AAAA,qBAC5B;AAAA,oBACA,OAAA,EAAQ,WAAA;AAAA,oBACR,IAAA,EAAK,MAAA;AAAA,oBACL,aAAA,EAAY,MAAA;AAAA,oBAEZ,QAAA,kBAAA,GAAA;AAAA,sBAAC,MAAA;AAAA,sBAAA;AAAA,wBACC,CAAA,EAAE,sBAAA;AAAA,wBACF,MAAA,EAAO,cAAA;AAAA,wBACP,WAAA,EAAa,CAAA;AAAA,wBACb,aAAA,EAAc,OAAA;AAAA,wBACd,cAAA,EAAe;AAAA;AAAA;AACjB;AAAA;AACF;AAAA;AACF,WAAA,EACF,CAAA;AAAA,UACC,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,KACzB;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-T3TQPOVM.js","sourcesContent":["'use client'\n\nimport { type InputHTMLAttributes, forwardRef, useId } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  label?: string\n}\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, label, id: idProp, checked, ...props }, ref) => {\n    const autoId = useId()\n    const id = idProp ?? autoId\n\n    return (\n      <label\n        htmlFor={id}\n        className={cn(\n          'inline-flex items-center gap-2 cursor-pointer select-none group',\n          'text-sm text-tollerud-text-primary',\n          props.disabled && 'opacity-50 pointer-events-none',\n          className\n        )}\n      >\n        <span className=\"relative flex items-center justify-center\">\n          <input\n            ref={ref}\n            id={id}\n            type=\"checkbox\"\n            checked={checked}\n            className=\"peer sr-only\"\n            {...props}\n          />\n          {/* Custom box */}\n          <span\n            className={cn(\n              'h-4 w-4 rounded border transition-all duration-[150ms]',\n              'flex items-center justify-center',\n              'bg-tollerud-surface-raised border-tollerud-border',\n              'peer-focus-visible:outline-2 peer-focus-visible:outline-tollerud-yellow',\n              'peer-checked:bg-tollerud-yellow peer-checked:border-tollerud-yellow',\n              'group-hover:border-tollerud-text-secondary'\n            )}\n          >\n            {/* Checkmark SVG — visible when checked */}\n            <svg\n              className={cn(\n                'h-3 w-3 text-tollerud-noir-black transition-opacity duration-[150ms]',\n                checked ? 'opacity-100' : 'opacity-0'\n              )}\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M2.5 6l2.5 2.5 4.5-5\"\n                stroke=\"currentColor\"\n                strokeWidth={2}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </span>\n        </span>\n        {label && <span>{label}</span>}\n      </label>\n    )\n  }\n)\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }"]}

package/globals-v4.css

@@ -1,2 +0,0 @@
-/* @tollerud/ui/globals-v4.css — alias for globals.css (Tailwind v4). Prefer globals.css. */
-@import "./globals.css";