@patchbayhq/ui 0.1.0

package/dist/tailwind.css

@@ -0,0 +1,31 @@
+@theme inline {
+  --color-patchbay-bg: var(--control-bg);
+  --color-patchbay-active: var(--control-active-bg);
+  --color-patchbay-border: var(--control-border);
+  --color-patchbay-focus: var(--focus-border);
+  --color-slider: var(--slider-color);
+  --color-patchbay-modulation: var(--modulation-color);
+  --color-patchbay-indicator: var(--indicator-color);
+  --color-patchbay-text: var(--text-color);
+  --color-patchbay-muted: var(--muted-text-color);
+  --color-patchbay-panel: var(--panel-color);
+  --color-patchbay-gridline: var(--gridline-color);
+  --radius-patchbay: var(--control-radius);
+  --font-patchbay: var(--control-font);
+}
+
+@utility bg-pb-grid {
+  background:
+    linear-gradient(
+      90deg,
+      var(--pb-grid-line, rgba(244, 239, 225, 0.035)) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      180deg,
+      var(--pb-grid-line, rgba(244, 239, 225, 0.035)) 1px,
+      transparent 1px
+    ),
+    var(--pb-grid-bg, #181916);
+  background-size: var(--pb-grid-size, 26px) var(--pb-grid-size, 26px);
+}

package/dist/theme.d.ts

@@ -0,0 +1,52 @@
+export declare const defaultTheme: {
+    readonly "--control-bg": "transparent";
+    readonly "--control-active-bg": "transparent";
+    readonly "--control-border": "transparent";
+    readonly "--focus-border": "#505050";
+    readonly "--slider-color": "#282828";
+    readonly "--modulation-color": "#6dd7ff";
+    readonly "--indicator-color": "#a5a5a5";
+    readonly "--indicator-active-color": "#000000";
+    readonly "--indicator-border-color": "#505050";
+    readonly "--text-color": "#000000";
+    readonly "--muted-text-color": "#aaa493";
+    readonly "--panel-color": "#282824";
+    readonly "--gridline-color": "rgba(255, 255, 255, 0.08)";
+    readonly "--control-radius": "2px";
+    readonly "--control-font": string;
+};
+export type ThemeVariable = keyof typeof defaultTheme;
+export type Theme = Record<ThemeVariable, string>;
+export type ThemeOverrides = Partial<Theme>;
+export declare function createTheme(overrides?: ThemeOverrides): Theme;
+export declare function themeStyle(overrides?: ThemeOverrides): string;
+export declare const tailwindPreset: {
+    readonly theme: {
+        readonly extend: {
+            readonly colors: {
+                readonly patchbay: {
+                    readonly bg: "var(--control-bg)";
+                    readonly active: "var(--control-active-bg)";
+                    readonly border: "var(--control-border)";
+                    readonly focus: "var(--focus-border)";
+                    readonly slider: "var(--slider-color)";
+                    readonly modulation: "var(--modulation-color)";
+                    readonly indicator: "var(--indicator-color)";
+                    readonly indicatorActive: "var(--indicator-active-color)";
+                    readonly indicatorBorder: "var(--indicator-border-color)";
+                    readonly text: "var(--text-color)";
+                    readonly muted: "var(--muted-text-color)";
+                    readonly panel: "var(--panel-color)";
+                    readonly gridline: "var(--gridline-color)";
+                };
+            };
+            readonly borderRadius: {
+                readonly patchbay: "var(--control-radius)";
+            };
+            readonly fontFamily: {
+                readonly patchbay: "var(--control-font)";
+            };
+        };
+    };
+};
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;CAgBf,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,YAAY,CAAC;AACtD,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAE5C,wBAAgB,WAAW,CAAC,SAAS,GAAE,cAAmB,GAAG,KAAK,CAEjE;AAED,wBAAgB,UAAU,CAAC,SAAS,GAAE,cAAmB,GAAG,MAAM,CAIjE;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BjB,CAAC"}

package/dist/theme.js

@@ -0,0 +1,65 @@
+const defaultFontStack = [
+    "\"Avenir Next\"",
+    "Inter",
+    "ui-sans-serif",
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "\"Segoe UI\"",
+    "sans-serif",
+].join(", ");
+export const defaultTheme = {
+    "--control-bg": "transparent",
+    "--control-active-bg": "transparent",
+    "--control-border": "transparent",
+    "--focus-border": "#505050",
+    "--slider-color": "#282828",
+    "--modulation-color": "#6dd7ff",
+    "--indicator-color": "#a5a5a5",
+    "--indicator-active-color": "#000000",
+    "--indicator-border-color": "#505050",
+    "--text-color": "#000000",
+    "--muted-text-color": "#aaa493",
+    "--panel-color": "#282824",
+    "--gridline-color": "rgba(255, 255, 255, 0.08)",
+    "--control-radius": "2px",
+    "--control-font": defaultFontStack,
+};
+export function createTheme(overrides = {}) {
+    return { ...defaultTheme, ...overrides };
+}
+export function themeStyle(overrides = {}) {
+    return Object.entries(createTheme(overrides))
+        .map(([name, value]) => `${name}: ${value};`)
+        .join("\n");
+}
+export const tailwindPreset = {
+    theme: {
+        extend: {
+            colors: {
+                patchbay: {
+                    bg: "var(--control-bg)",
+                    active: "var(--control-active-bg)",
+                    border: "var(--control-border)",
+                    focus: "var(--focus-border)",
+                    slider: "var(--slider-color)",
+                    modulation: "var(--modulation-color)",
+                    indicator: "var(--indicator-color)",
+                    indicatorActive: "var(--indicator-active-color)",
+                    indicatorBorder: "var(--indicator-border-color)",
+                    text: "var(--text-color)",
+                    muted: "var(--muted-text-color)",
+                    panel: "var(--panel-color)",
+                    gridline: "var(--gridline-color)",
+                },
+            },
+            borderRadius: {
+                patchbay: "var(--control-radius)",
+            },
+            fontFamily: {
+                patchbay: "var(--control-font)",
+            },
+        },
+    },
+};
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG;IACvB,iBAAiB;IACjB,OAAO;IACP,eAAe;IACf,WAAW;IACX,eAAe;IACf,oBAAoB;IACpB,cAAc;IACd,YAAY;CACb,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,cAAc,EAAE,aAAa;IAC7B,qBAAqB,EAAE,aAAa;IACpC,kBAAkB,EAAE,aAAa;IACjC,gBAAgB,EAAE,SAAS;IAC3B,gBAAgB,EAAE,SAAS;IAC3B,oBAAoB,EAAE,SAAS;IAC/B,mBAAmB,EAAE,SAAS;IAC9B,0BAA0B,EAAE,SAAS;IACrC,0BAA0B,EAAE,SAAS;IACrC,cAAc,EAAE,SAAS;IACzB,oBAAoB,EAAE,SAAS;IAC/B,eAAe,EAAE,SAAS;IAC1B,kBAAkB,EAAE,2BAA2B;IAC/C,kBAAkB,EAAE,KAAK;IACzB,gBAAgB,EAAE,gBAAgB;CAC1B,CAAC;AAMX,MAAM,UAAU,WAAW,CAAC,YAA4B,EAAE;IACxD,OAAO,EAAE,GAAG,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,YAA4B,EAAE;IACvD,OAAO,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;SAC1C,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,GAAG,CAAC;SAC5C,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,KAAK,EAAE;QACL,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,QAAQ,EAAE;oBACR,EAAE,EAAE,mBAAmB;oBACvB,MAAM,EAAE,0BAA0B;oBAClC,MAAM,EAAE,uBAAuB;oBAC/B,KAAK,EAAE,qBAAqB;oBAC5B,MAAM,EAAE,qBAAqB;oBAC7B,UAAU,EAAE,yBAAyB;oBACrC,SAAS,EAAE,wBAAwB;oBACnC,eAAe,EAAE,+BAA+B;oBAChD,eAAe,EAAE,+BAA+B;oBAChD,IAAI,EAAE,mBAAmB;oBACzB,KAAK,EAAE,yBAAyB;oBAChC,KAAK,EAAE,oBAAoB;oBAC3B,QAAQ,EAAE,uBAAuB;iBAClC;aACF;YACD,YAAY,EAAE;gBACZ,QAAQ,EAAE,uBAAuB;aAClC;YACD,UAAU,EAAE;gBACV,QAAQ,EAAE,qBAAqB;aAChC;SACF;KACF;CACO,CAAC"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@patchbayhq/ui",
+  "version": "0.1.0",
+  "description": "Native HTML controls and styles for audio-extension UIs.",
+  "license": "MIT",
+  "type": "module",
+  "homepage": "https://ui.patchbay.tools",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/monadoid/patchbay-ui.git",
+    "directory": "packages/pb-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/monadoid/patchbay-ui/issues"
+  },
+  "keywords": [
+    "audio",
+    "controls",
+    "custom-elements",
+    "ui",
+    "web-components"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./dist/styles.css",
+    "./dist/tailwind.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js",
+      "default": "./dist/theme.js"
+    },
+    "./tailwind.css": "./dist/tailwind.css",
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/styles.css src/tailwind.css dist/",
+    "check-types": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "zod": "^4.4.3"
+  }
+}