@skiddph/prui 0.1.0

package/dist/prui.css

@@ -0,0 +1,120 @@
+/*
+PRUI base tokens. Every theme defines these CSS variables; components only
+ever reference the variables, so a single override file re-skins everything.
+6px radius system, dark-first, no gradient text.
+*/
+.prui-root,
+:root {
+  --prui-radius-1: 3px;
+  --prui-radius-2: 6px;
+  --prui-radius-3: 10px;
+  --prui-radius-full: 9999px;
+  --prui-dim-op: 0.62;
+}
+
+/* control (dark, blue accent) is the default theme */
+/* Theme: control. Direction D "Control Room" — pure black, periwinkle accent. Default theme. */
+.prui-theme-control {
+  color-scheme: dark;
+  --prui-background: #000000;
+  --prui-surface: #0f0f10;
+  --prui-raise: #1a1a1c;
+  --prui-line: #2a2a2e;
+  --prui-fg: #f4f4f5;
+  --prui-dim: #9b9ba4;
+  --prui-brand: #7c9cff;
+  --prui-brand-fg: #0a0f24;
+  --prui-ok: #3ddc97;
+  --prui-warn: #ffc15e;
+  --prui-danger: #f87171;
+  --prui-radius: 6px;
+}
+
+/* Modal shake feedback (blocked close), from icanhelp modal */
+@keyframes prui-modal-shake {
+  0%, 100% { transform: scale(1) translateY(0) translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: scale(1) translateY(0) translateX(-8px); }
+  20%, 40%, 60%, 80% { transform: scale(1) translateY(0) translateX(8px); }
+}
+.prui-modal-shake { animation: prui-modal-shake 0.5s ease-in-out; }
+body.modal-open { overflow: hidden; }
+
+/* p4 rail scrollbar: thin, surfaces matching */
+.prui-app aside ::-webkit-scrollbar,
+.prui-app aside::-webkit-scrollbar { width: 8px; }
+.prui-app aside ::-webkit-scrollbar-track,
+.prui-app aside::-webkit-scrollbar-track { background: transparent; }
+.prui-app aside ::-webkit-scrollbar-thumb,
+.prui-app aside::-webkit-scrollbar-thumb { background: var(--prui-raise); border-radius: 4px; }
+.prui-app aside ::-webkit-scrollbar-thumb:hover,
+.prui-app aside::-webkit-scrollbar-thumb:hover { background: var(--prui-line); }
+.prui-app aside { scrollbar-width: thin; scrollbar-color: var(--prui-raise) transparent; }
+
+/* Theme: control. Direction D "Control Room" — pure black, periwinkle accent. Default theme. */
+.prui-theme-control {
+  color-scheme: dark;
+  --prui-background: #000000;
+  --prui-surface: #0f0f10;
+  --prui-raise: #1a1a1c;
+  --prui-line: #2a2a2e;
+  --prui-fg: #f4f4f5;
+  --prui-dim: #9b9ba4;
+  --prui-brand: #7c9cff;
+  --prui-brand-fg: #0a0f24;
+  --prui-ok: #3ddc97;
+  --prui-warn: #ffc15e;
+  --prui-danger: #f87171;
+  --prui-radius: 6px;
+}
+
+/* Theme: workshop. Dark warm neutral, amber accent. */
+.prui-theme-workshop {
+  color-scheme: dark;
+  --prui-background: #14120e;
+  --prui-surface: #1c1915;
+  --prui-raise: #26221c;
+  --prui-line: #362f26;
+  --prui-fg: #f0e9dd;
+  --prui-dim: #a89c88;
+  --prui-brand: #d97706;
+  --prui-brand-fg: #ffffff;
+  --prui-ok: #4ade80;
+  --prui-warn: #fbbf24;
+  --prui-danger: #f87171;
+  --prui-radius: 6px;
+}
+
+/* Theme: ember. Deep dark red-black, ember accent. */
+.prui-theme-ember {
+  color-scheme: dark;
+  --prui-background: #120c0c;
+  --prui-surface: #1a1112;
+  --prui-raise: #251719;
+  --prui-line: #3a2124;
+  --prui-fg: #f3e4e4;
+  --prui-dim: #b09090;
+  --prui-brand: #f05252;
+  --prui-brand-fg: #ffffff;
+  --prui-ok: #34d399;
+  --prui-warn: #fb923c;
+  --prui-danger: #ef4444;
+  --prui-radius: 6px;
+}
+
+/* Theme: daylight. Light theme, indigo accent. */
+.prui-theme-daylight {
+  color-scheme: light;
+  --prui-background: #f7f8fa;
+  --prui-surface: #ffffff;
+  --prui-raise: #f1f3f6;
+  --prui-line: #e2e6ec;
+  --prui-fg: #171b21;
+  --prui-dim: #5c6673;
+  --prui-brand: #4f46e5;
+  --prui-brand-fg: #ffffff;
+  --prui-ok: #16a34a;
+  --prui-warn: #d97706;
+  --prui-danger: #dc2626;
+  --prui-radius: 6px;
+}
+

package/dist/theme/base.css

@@ -0,0 +1,36 @@
+/*
+PRUI base tokens. Every theme defines these CSS variables; components only
+ever reference the variables, so a single override file re-skins everything.
+6px radius system, dark-first, no gradient text.
+*/
+.prui-root,
+:root {
+  --prui-radius-1: 3px;
+  --prui-radius-2: 6px;
+  --prui-radius-3: 10px;
+  --prui-radius-full: 9999px;
+  --prui-dim-op: 0.62;
+}
+
+/* control (dark, blue accent) is the default theme */
+@import "./control.css";
+
+/* Modal shake feedback (blocked close), from icanhelp modal */
+@keyframes prui-modal-shake {
+  0%, 100% { transform: scale(1) translateY(0) translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: scale(1) translateY(0) translateX(-8px); }
+  20%, 40%, 60%, 80% { transform: scale(1) translateY(0) translateX(8px); }
+}
+.prui-modal-shake { animation: prui-modal-shake 0.5s ease-in-out; }
+body.modal-open { overflow: hidden; }
+
+/* p4 rail scrollbar: thin, surfaces matching */
+.prui-app aside ::-webkit-scrollbar,
+.prui-app aside::-webkit-scrollbar { width: 8px; }
+.prui-app aside ::-webkit-scrollbar-track,
+.prui-app aside::-webkit-scrollbar-track { background: transparent; }
+.prui-app aside ::-webkit-scrollbar-thumb,
+.prui-app aside::-webkit-scrollbar-thumb { background: var(--prui-raise); border-radius: 4px; }
+.prui-app aside ::-webkit-scrollbar-thumb:hover,
+.prui-app aside::-webkit-scrollbar-thumb:hover { background: var(--prui-line); }
+.prui-app aside { scrollbar-width: thin; scrollbar-color: var(--prui-raise) transparent; }

package/dist/theme/control.css

@@ -0,0 +1,16 @@
+/* Theme: control. Direction D "Control Room" — pure black, periwinkle accent. Default theme. */
+.prui-theme-control {
+  color-scheme: dark;
+  --prui-background: #000000;
+  --prui-surface: #0f0f10;
+  --prui-raise: #1a1a1c;
+  --prui-line: #2a2a2e;
+  --prui-fg: #f4f4f5;
+  --prui-dim: #9b9ba4;
+  --prui-brand: #7c9cff;
+  --prui-brand-fg: #0a0f24;
+  --prui-ok: #3ddc97;
+  --prui-warn: #ffc15e;
+  --prui-danger: #f87171;
+  --prui-radius: 6px;
+}

package/dist/theme/daylight.css

@@ -0,0 +1,16 @@
+/* Theme: daylight. Light theme, indigo accent. */
+.prui-theme-daylight {
+  color-scheme: light;
+  --prui-background: #f7f8fa;
+  --prui-surface: #ffffff;
+  --prui-raise: #f1f3f6;
+  --prui-line: #e2e6ec;
+  --prui-fg: #171b21;
+  --prui-dim: #5c6673;
+  --prui-brand: #4f46e5;
+  --prui-brand-fg: #ffffff;
+  --prui-ok: #16a34a;
+  --prui-warn: #d97706;
+  --prui-danger: #dc2626;
+  --prui-radius: 6px;
+}

package/dist/theme/ember.css

@@ -0,0 +1,16 @@
+/* Theme: ember. Deep dark red-black, ember accent. */
+.prui-theme-ember {
+  color-scheme: dark;
+  --prui-background: #120c0c;
+  --prui-surface: #1a1112;
+  --prui-raise: #251719;
+  --prui-line: #3a2124;
+  --prui-fg: #f3e4e4;
+  --prui-dim: #b09090;
+  --prui-brand: #f05252;
+  --prui-brand-fg: #ffffff;
+  --prui-ok: #34d399;
+  --prui-warn: #fb923c;
+  --prui-danger: #ef4444;
+  --prui-radius: 6px;
+}

package/dist/theme/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * PRUI theme system.
+ * Tokens are CSS variables set by the named theme classes in this package.
+ * applyTheme() sets the theme class plus data-mode on the target element.
+ */
+export declare const PRUI_THEMES: readonly ["control", "workshop", "ember", "daylight"];
+export type ThemeName = (typeof PRUI_THEMES)[number];
+export type ThemeMode = "light" | "dark";
+export declare function isDarkTheme(name: ThemeName): boolean;
+export declare function isLightTheme(name: ThemeName): boolean;
+export declare function themeMode(name: ThemeName): ThemeMode;
+export interface ApplyThemeOptions {
+    /** Theme name, defaults to control. */
+    theme?: ThemeName;
+    /** Force a mode; omit to use the theme's natural mode. */
+    mode?: ThemeMode;
+    /** Element to class, defaults to document.documentElement. */
+    target?: HTMLElement | null;
+    /** Persistence key; set null to disable persistence. Defaults to prui:theme. */
+    storageKey?: string | null;
+}
+export interface AppliedTheme {
+    theme: ThemeName;
+    mode: ThemeMode;
+}
+export declare function applyTheme(options?: ApplyThemeOptions): AppliedTheme;
+/** Read a persisted theme previously written by applyTheme. */
+export declare function readPersistedTheme(storageKey?: string): AppliedTheme | null;
+/** Cycle through dark themes and the light theme for a toggle button. */
+export declare function nextTheme(current: ThemeName): ThemeName;
+export declare const themeMeta: {
+    readonly name: "applyTheme";
+    readonly description: "Apply a named PRUI theme and persist the choice.";
+    readonly props: readonly [{
+        readonly name: "theme";
+        readonly type: "'control' | 'workshop' | 'ember' | 'daylight'";
+        readonly default: "'control'";
+        readonly control: "select";
+    }, {
+        readonly name: "mode";
+        readonly type: "'light' | 'dark'";
+        readonly default: "theme natural mode";
+        readonly control: "select";
+    }, {
+        readonly name: "target";
+        readonly type: "HTMLElement";
+        readonly default: "document.documentElement";
+        readonly control: "none";
+    }, {
+        readonly name: "storageKey";
+        readonly type: "string | null";
+        readonly default: "'prui:theme'";
+        readonly control: "text";
+    }];
+};

package/dist/theme/workshop.css

@@ -0,0 +1,16 @@
+/* Theme: workshop. Dark warm neutral, amber accent. */
+.prui-theme-workshop {
+  color-scheme: dark;
+  --prui-background: #14120e;
+  --prui-surface: #1c1915;
+  --prui-raise: #26221c;
+  --prui-line: #362f26;
+  --prui-fg: #f0e9dd;
+  --prui-dim: #a89c88;
+  --prui-brand: #d97706;
+  --prui-brand-fg: #ffffff;
+  --prui-ok: #4ade80;
+  --prui-warn: #fbbf24;
+  --prui-danger: #f87171;
+  --prui-radius: 6px;
+}

package/dist/theme.js

@@ -0,0 +1,63 @@
+const l = ["control", "workshop", "ember", "daylight"], i = ["control", "workshop", "ember"], m = ["daylight"];
+function d(e) {
+  return i.includes(e);
+}
+function p(e) {
+  return m.includes(e);
+}
+function c(e) {
+  return d(e) ? "dark" : "light";
+}
+const s = "prui-theme-";
+function u(e, t) {
+  return [`${s}${e}`, "prui-root", `prui-mode-${t}`];
+}
+function h(e) {
+  const t = [...e.classList].filter(
+    (n) => n.startsWith(s) || n === "prui-root" || n.startsWith("prui-mode-")
+  );
+  t.length && e.classList.remove(...t);
+}
+function f(e = {}) {
+  const t = e.theme ?? "control", n = e.mode ?? c(t), o = e.target ?? (typeof document < "u" ? document.documentElement : null);
+  o && (h(o), o.classList.add(...u(t, n)), o.dataset.pruiTheme = t, o.dataset.pruiMode = n, o.style.colorScheme = n);
+  const r = e.storageKey === void 0 ? "prui:theme" : e.storageKey;
+  return r && typeof localStorage < "u" && localStorage.setItem(r, JSON.stringify({ theme: t, mode: n })), { theme: t, mode: n };
+}
+function g(e = "prui:theme") {
+  if (typeof localStorage > "u") return null;
+  const t = localStorage.getItem(e);
+  if (!t) return null;
+  try {
+    const n = JSON.parse(t), o = l.find((a) => a === n.theme);
+    if (!o) return null;
+    const r = n.mode === "light" || n.mode === "dark" ? n.mode : c(o);
+    return { theme: o, mode: r };
+  } catch {
+    return null;
+  }
+}
+function y(e) {
+  const t = l.indexOf(e);
+  return l[(t + 1) % l.length] ?? "control";
+}
+const T = {
+  name: "applyTheme",
+  description: "Apply a named PRUI theme and persist the choice.",
+  props: [
+    { name: "theme", type: "'control' | 'workshop' | 'ember' | 'daylight'", default: "'control'", control: "select" },
+    { name: "mode", type: "'light' | 'dark'", default: "theme natural mode", control: "select" },
+    { name: "target", type: "HTMLElement", default: "document.documentElement", control: "none" },
+    { name: "storageKey", type: "string | null", default: "'prui:theme'", control: "text" }
+  ]
+};
+export {
+  l as PRUI_THEMES,
+  f as applyTheme,
+  d as isDarkTheme,
+  p as isLightTheme,
+  y as nextTheme,
+  g as readPersistedTheme,
+  T as themeMeta,
+  c as themeMode
+};

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@skiddph/prui",
+  "version": "0.1.0",
+  "description": "PRUI component system: primitives, app-layer super-components, pages, and themes",
+  "type": "module",
+  "license": "Apache-2.0",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core.js"
+    },
+    "./core/*": {
+      "types": "./dist/core/*.d.ts",
+      "import": "./dist/core/*.js"
+    },
+    "./app": {
+      "types": "./dist/app/index.d.ts",
+      "import": "./dist/app.js"
+    },
+    "./pages": {
+      "types": "./dist/pages/index.d.ts",
+      "import": "./dist/pages.js"
+    },
+    "./data-table": {
+      "types": "./dist/data-table/index.d.ts",
+      "import": "./dist/data-table.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./theme/*.css": "./dist/theme/*.css",
+    "./styles.css": "./dist/prui.css"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.525.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.20.2",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.5.0",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eru123/prui.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && node scripts/bundle-css.mjs && mkdir -p dist/theme && cp src/theme/*.css dist/theme/",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}