@polyxd/react 0.2.2 → 0.3.0

package/themes/terminal.css

@@ -0,0 +1,300 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the terminal pack. Do not edit. */
+
+[data-pxd-theme="terminal"]:not([data-pxd-mode]),
+[data-pxd-theme="terminal"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: #0b0f0c;
+  --pxd-color-surface-subtle: #121a14;
+  --pxd-color-surface-raised: #0f1511;
+  --pxd-color-surface-overlay: #151d17;
+  --pxd-color-surface-inverse: #e8ffe8;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.7);
+  --pxd-color-text-default: #d6e9d6;
+  --pxd-color-text-muted: #8fb08f;
+  --pxd-color-text-inverse: #0b0f0c;
+  --pxd-color-text-link: #7ee787;
+  --pxd-color-border-default: #24312a;
+  --pxd-color-border-strong: #527058;
+  --pxd-color-border-focus: #ffb000;
+  --pxd-color-action-primary-background: #3fb950;
+  --pxd-color-action-primary-foreground: #0b0f0c;
+  --pxd-color-action-secondary-background: #121a14;
+  --pxd-color-action-secondary-foreground: #d6e9d6;
+  --pxd-color-action-secondary-border: #527058;
+  --pxd-color-action-danger-background: #ff6b5b;
+  --pxd-color-action-danger-foreground: #0b0f0c;
+  --pxd-color-selection-background: #0f2a17;
+  --pxd-color-selection-foreground: #8de39c;
+  --pxd-color-status-info-background: #12262e;
+  --pxd-color-status-info-foreground: #8fd8f0;
+  --pxd-color-status-info-emphasis: #4cc2e6;
+  --pxd-color-status-success-background: #0f2a17;
+  --pxd-color-status-success-foreground: #8de39c;
+  --pxd-color-status-success-emphasis: #3fb950;
+  --pxd-color-status-warning-background: #2e2308;
+  --pxd-color-status-warning-foreground: #ffd27a;
+  --pxd-color-status-warning-emphasis: #ffb000;
+  --pxd-color-status-danger-background: #331512;
+  --pxd-color-status-danger-foreground: #ffa198;
+  --pxd-color-status-danger-emphasis: #ff6b5b;
+  --pxd-color-data-categorical-1: #3fb950;
+  --pxd-color-data-categorical-2: #ffb000;
+  --pxd-color-data-categorical-3: #4cc2e6;
+  --pxd-color-data-categorical-4: #ff6b5b;
+  --pxd-color-data-categorical-5: #d59bff;
+  --pxd-color-data-categorical-6: #e6e6e6;
+  --pxd-color-data-positive: #3fb950;
+  --pxd-color-data-negative: #ff6b5b;
+  --pxd-color-data-neutral: #8fb08f;
+  --pxd-type-title-page-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-title-page-size: 22px;
+  --pxd-type-title-page-weight: 700;
+  --pxd-type-title-page-line-height: 1.25;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-title-section-size: 17px;
+  --pxd-type-title-section-weight: 700;
+  --pxd-type-title-section-line-height: 1.3;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-title-item-size: 15px;
+  --pxd-type-title-item-weight: 700;
+  --pxd-type-title-item-line-height: 1.4;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-body-default-size: 16px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.5;
+  --pxd-type-body-default-letter-spacing: 0px;
+  --pxd-type-body-small-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-body-small-size: 13px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.45;
+  --pxd-type-body-small-letter-spacing: 0px;
+  --pxd-type-label-default-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-default-size: 13px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0px;
+  --pxd-type-label-small-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-small-size: 11px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.3px;
+  --pxd-type-numeric-display-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-numeric-display-size: 26px;
+  --pxd-type-numeric-display-weight: 700;
+  --pxd-type-numeric-display-line-height: 1.15;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 6px;
+  --pxd-space-inset-default: 10px;
+  --pxd-space-inset-comfortable: 16px;
+  --pxd-space-stack-tight: 2px;
+  --pxd-space-stack-default: 6px;
+  --pxd-space-stack-loose: 10px;
+  --pxd-space-stack-section: 24px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 12px;
+  --pxd-size-target-min: 36px;
+  --pxd-size-icon-small: 14px;
+  --pxd-size-icon-default: 18px;
+  --pxd-radius-small: 2px;
+  --pxd-radius-control: 2px;
+  --pxd-radius-default: 2px;
+  --pxd-radius-large: 4px;
+  --pxd-radius-full: 4px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 2px;
+  --pxd-focus-ring-offset: 1px;
+  --pxd-measure-max: 75;
+  --pxd-opacity-state-hover: 0.08;
+  --pxd-opacity-state-pressed: 0.16;
+  --pxd-opacity-state-focus: 0.16;
+  --pxd-opacity-state-disabled: 0.45;
+  --pxd-shadow-raised: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-shadow-overlay: 0px 0px 0px 1px #527058;
+  --pxd-motion-duration-instant: 0ms;
+  --pxd-motion-duration-short: 60ms;
+  --pxd-motion-duration-medium: 100ms;
+  --pxd-motion-duration-long: 150ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* shadcn/ui variable names, so shadcn components follow this pack too */
+  --background: var(--pxd-color-surface-default);
+  --foreground: var(--pxd-color-text-default);
+  --card: var(--pxd-color-surface-raised);
+  --card-foreground: var(--pxd-color-text-default);
+  --popover: var(--pxd-color-surface-overlay);
+  --popover-foreground: var(--pxd-color-text-default);
+  --primary: var(--pxd-color-action-primary-background);
+  --primary-foreground: var(--pxd-color-action-primary-foreground);
+  --secondary: var(--pxd-color-action-secondary-background);
+  --secondary-foreground: var(--pxd-color-action-secondary-foreground);
+  --muted: var(--pxd-color-surface-subtle);
+  --muted-foreground: var(--pxd-color-text-muted);
+  --accent: var(--pxd-color-selection-background);
+  --accent-foreground: var(--pxd-color-selection-foreground);
+  --destructive: var(--pxd-color-action-danger-background);
+  --border: var(--pxd-color-border-default);
+  --input: var(--pxd-color-border-strong);
+  --ring: var(--pxd-color-border-focus);
+  --radius: var(--pxd-radius-default);
+  --chart-1: var(--pxd-color-data-categorical-1);
+  --chart-2: var(--pxd-color-data-categorical-2);
+  --chart-3: var(--pxd-color-data-categorical-3);
+  --chart-4: var(--pxd-color-data-categorical-4);
+  --chart-5: var(--pxd-color-data-categorical-5);
+  color-scheme: dark;
+}
+
+[data-pxd-theme="terminal"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: #f4f7f2;
+  --pxd-color-surface-subtle: #e8eee5;
+  --pxd-color-surface-raised: #fbfcfa;
+  --pxd-color-surface-overlay: #ffffff;
+  --pxd-color-surface-inverse: #0f1a12;
+  --pxd-color-scrim: rgba(15, 26, 18, 0.5);
+  --pxd-color-text-default: #0f1a12;
+  --pxd-color-text-muted: #4c6650;
+  --pxd-color-text-inverse: #f4f7f2;
+  --pxd-color-text-link: #1f7a30;
+  --pxd-color-border-default: #c5d1c6;
+  --pxd-color-border-strong: #5f7a63;
+  --pxd-color-border-focus: #8a5a00;
+  --pxd-color-action-primary-background: #1f7a30;
+  --pxd-color-action-primary-foreground: #ffffff;
+  --pxd-color-action-secondary-background: #f4f7f2;
+  --pxd-color-action-secondary-foreground: #0f1a12;
+  --pxd-color-action-secondary-border: #5f7a63;
+  --pxd-color-action-danger-background: #b3261e;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: #d9f0dc;
+  --pxd-color-selection-foreground: #12501e;
+  --pxd-color-status-info-background: #dceef5;
+  --pxd-color-status-info-foreground: #0f4a5c;
+  --pxd-color-status-info-emphasis: #0e6f8a;
+  --pxd-color-status-success-background: #d9f0dc;
+  --pxd-color-status-success-foreground: #12501e;
+  --pxd-color-status-success-emphasis: #1f7a30;
+  --pxd-color-status-warning-background: #fbeccc;
+  --pxd-color-status-warning-foreground: #5c3d00;
+  --pxd-color-status-warning-emphasis: #8a5a00;
+  --pxd-color-status-danger-background: #f7dcd9;
+  --pxd-color-status-danger-foreground: #7a1c16;
+  --pxd-color-status-danger-emphasis: #b3261e;
+  --pxd-color-data-categorical-1: #1f7a30;
+  --pxd-color-data-categorical-2: #8a5a00;
+  --pxd-color-data-categorical-3: #0e6f8a;
+  --pxd-color-data-categorical-4: #b3261e;
+  --pxd-color-data-categorical-5: #6b3fa0;
+  --pxd-color-data-categorical-6: #3d3d3d;
+  --pxd-color-data-positive: #1f7a30;
+  --pxd-color-data-negative: #b3261e;
+  --pxd-color-data-neutral: #5f7a63;
+  --pxd-type-title-page-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-title-page-size: 22px;
+  --pxd-type-title-page-weight: 700;
+  --pxd-type-title-page-line-height: 1.25;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-title-section-size: 17px;
+  --pxd-type-title-section-weight: 700;
+  --pxd-type-title-section-line-height: 1.3;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-title-item-size: 15px;
+  --pxd-type-title-item-weight: 700;
+  --pxd-type-title-item-line-height: 1.4;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-body-default-size: 16px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.5;
+  --pxd-type-body-default-letter-spacing: 0px;
+  --pxd-type-body-small-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-body-small-size: 13px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.45;
+  --pxd-type-body-small-letter-spacing: 0px;
+  --pxd-type-label-default-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-default-size: 13px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0px;
+  --pxd-type-label-small-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-small-size: 11px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.3px;
+  --pxd-type-numeric-display-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-numeric-display-size: 26px;
+  --pxd-type-numeric-display-weight: 700;
+  --pxd-type-numeric-display-line-height: 1.15;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 6px;
+  --pxd-space-inset-default: 10px;
+  --pxd-space-inset-comfortable: 16px;
+  --pxd-space-stack-tight: 2px;
+  --pxd-space-stack-default: 6px;
+  --pxd-space-stack-loose: 10px;
+  --pxd-space-stack-section: 24px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 12px;
+  --pxd-size-target-min: 36px;
+  --pxd-size-icon-small: 14px;
+  --pxd-size-icon-default: 18px;
+  --pxd-radius-small: 2px;
+  --pxd-radius-control: 2px;
+  --pxd-radius-default: 2px;
+  --pxd-radius-large: 4px;
+  --pxd-radius-full: 4px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 2px;
+  --pxd-focus-ring-offset: 1px;
+  --pxd-measure-max: 75;
+  --pxd-opacity-state-hover: 0.08;
+  --pxd-opacity-state-pressed: 0.16;
+  --pxd-opacity-state-focus: 0.16;
+  --pxd-opacity-state-disabled: 0.45;
+  --pxd-shadow-raised: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-shadow-overlay: 0px 0px 0px 1px #5f7a63;
+  --pxd-motion-duration-instant: 0ms;
+  --pxd-motion-duration-short: 60ms;
+  --pxd-motion-duration-medium: 100ms;
+  --pxd-motion-duration-long: 150ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* shadcn/ui variable names, so shadcn components follow this pack too */
+  --background: var(--pxd-color-surface-default);
+  --foreground: var(--pxd-color-text-default);
+  --card: var(--pxd-color-surface-raised);
+  --card-foreground: var(--pxd-color-text-default);
+  --popover: var(--pxd-color-surface-overlay);
+  --popover-foreground: var(--pxd-color-text-default);
+  --primary: var(--pxd-color-action-primary-background);
+  --primary-foreground: var(--pxd-color-action-primary-foreground);
+  --secondary: var(--pxd-color-action-secondary-background);
+  --secondary-foreground: var(--pxd-color-action-secondary-foreground);
+  --muted: var(--pxd-color-surface-subtle);
+  --muted-foreground: var(--pxd-color-text-muted);
+  --accent: var(--pxd-color-selection-background);
+  --accent-foreground: var(--pxd-color-selection-foreground);
+  --destructive: var(--pxd-color-action-danger-background);
+  --border: var(--pxd-color-border-default);
+  --input: var(--pxd-color-border-strong);
+  --ring: var(--pxd-color-border-focus);
+  --radius: var(--pxd-radius-default);
+  --chart-1: var(--pxd-color-data-categorical-1);
+  --chart-2: var(--pxd-color-data-categorical-2);
+  --chart-3: var(--pxd-color-data-categorical-3);
+  --chart-4: var(--pxd-color-data-categorical-4);
+  --chart-5: var(--pxd-color-data-categorical-5);
+  color-scheme: light;
+}

package/themes/wireframe.css

@@ -0,0 +1,328 @@
+/* Generated by @polyxd/react scripts/build-themes.ts from the wireframe pack. Do not edit. */
+
+[data-pxd-theme="wireframe"]:not([data-pxd-mode]),
+[data-pxd-theme="wireframe"][data-pxd-mode="light"] {
+  --pxd-color-surface-default: #ffffff;
+  --pxd-color-surface-subtle: #f4f4f4;
+  --pxd-color-surface-raised: #ffffff;
+  --pxd-color-surface-overlay: #ffffff;
+  --pxd-color-surface-inverse: #333333;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.4);
+  --pxd-color-text-default: #222222;
+  --pxd-color-text-muted: #5e5e5e;
+  --pxd-color-text-inverse: #ffffff;
+  --pxd-color-text-link: #1a5fd6;
+  --pxd-color-border-default: #9c9c9c;
+  --pxd-color-border-strong: #767676;
+  --pxd-color-border-focus: #1a5fd6;
+  --pxd-color-action-primary-background: #1a5fd6;
+  --pxd-color-action-primary-foreground: #ffffff;
+  --pxd-color-action-secondary-background: #ffffff;
+  --pxd-color-action-secondary-foreground: #222222;
+  --pxd-color-action-secondary-border: #767676;
+  --pxd-color-action-danger-background: #333333;
+  --pxd-color-action-danger-foreground: #ffffff;
+  --pxd-color-selection-background: #e8f0fc;
+  --pxd-color-selection-foreground: #183f8a;
+  --pxd-color-status-info-background: #e8f0fc;
+  --pxd-color-status-info-foreground: #183f8a;
+  --pxd-color-status-info-emphasis: #1a5fd6;
+  --pxd-color-status-success-background: #f4f4f4;
+  --pxd-color-status-success-foreground: #222222;
+  --pxd-color-status-success-emphasis: #474747;
+  --pxd-color-status-warning-background: #e6e6e6;
+  --pxd-color-status-warning-foreground: #222222;
+  --pxd-color-status-warning-emphasis: #767676;
+  --pxd-color-status-danger-background: #e6e6e6;
+  --pxd-color-status-danger-foreground: #222222;
+  --pxd-color-status-danger-emphasis: #333333;
+  --pxd-color-data-categorical-1: #1a5fd6;
+  --pxd-color-data-categorical-2: #222222;
+  --pxd-color-data-categorical-3: #474747;
+  --pxd-color-data-categorical-4: #5e5e5e;
+  --pxd-color-data-categorical-5: #767676;
+  --pxd-color-data-categorical-6: #183f8a;
+  --pxd-color-data-positive: #333333;
+  --pxd-color-data-negative: #1a5fd6;
+  --pxd-color-data-neutral: #767676;
+  --pxd-type-title-page-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-page-size: 28px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.25;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-section-size: 20px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.3;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-item-size: 16px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.4;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-default-size: 16px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.5;
+  --pxd-type-body-default-letter-spacing: 0px;
+  --pxd-type-body-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-small-size: 14px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.5;
+  --pxd-type-body-small-letter-spacing: 0px;
+  --pxd-type-label-default-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-default-size: 13px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0.3px;
+  --pxd-type-label-small-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-small-size: 12px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.4px;
+  --pxd-type-numeric-display-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-numeric-display-size: 26px;
+  --pxd-type-numeric-display-weight: 500;
+  --pxd-type-numeric-display-line-height: 1.2;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 8px;
+  --pxd-space-inset-default: 16px;
+  --pxd-space-inset-comfortable: 24px;
+  --pxd-space-stack-tight: 4px;
+  --pxd-space-stack-default: 8px;
+  --pxd-space-stack-loose: 16px;
+  --pxd-space-stack-section: 32px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 16px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 2px;
+  --pxd-radius-control: 4px;
+  --pxd-radius-default: 4px;
+  --pxd-radius-large: 6px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 2px;
+  --pxd-focus-ring-offset: 2px;
+  --pxd-measure-max: 65;
+  --pxd-opacity-state-hover: 0.06;
+  --pxd-opacity-state-pressed: 0.12;
+  --pxd-opacity-state-focus: 0.12;
+  --pxd-opacity-state-disabled: 0.4;
+  --pxd-shadow-raised: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-shadow-overlay: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-motion-duration-instant: 0ms;
+  --pxd-motion-duration-short: 0ms;
+  --pxd-motion-duration-medium: 0ms;
+  --pxd-motion-duration-long: 0ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* shadcn/ui variable names, so shadcn components follow this pack too */
+  --background: var(--pxd-color-surface-default);
+  --foreground: var(--pxd-color-text-default);
+  --card: var(--pxd-color-surface-raised);
+  --card-foreground: var(--pxd-color-text-default);
+  --popover: var(--pxd-color-surface-overlay);
+  --popover-foreground: var(--pxd-color-text-default);
+  --primary: var(--pxd-color-action-primary-background);
+  --primary-foreground: var(--pxd-color-action-primary-foreground);
+  --secondary: var(--pxd-color-action-secondary-background);
+  --secondary-foreground: var(--pxd-color-action-secondary-foreground);
+  --muted: var(--pxd-color-surface-subtle);
+  --muted-foreground: var(--pxd-color-text-muted);
+  --accent: var(--pxd-color-selection-background);
+  --accent-foreground: var(--pxd-color-selection-foreground);
+  --destructive: var(--pxd-color-action-danger-background);
+  --border: var(--pxd-color-border-default);
+  --input: var(--pxd-color-border-strong);
+  --ring: var(--pxd-color-border-focus);
+  --radius: var(--pxd-radius-default);
+  --chart-1: var(--pxd-color-data-categorical-1);
+  --chart-2: var(--pxd-color-data-categorical-2);
+  --chart-3: var(--pxd-color-data-categorical-3);
+  --chart-4: var(--pxd-color-data-categorical-4);
+  --chart-5: var(--pxd-color-data-categorical-5);
+  color-scheme: light;
+}
+
+[data-pxd-theme="wireframe"][data-pxd-mode="dark"] {
+  --pxd-color-surface-default: #1c1c1c;
+  --pxd-color-surface-subtle: #242424;
+  --pxd-color-surface-raised: #2a2a2a;
+  --pxd-color-surface-overlay: #303030;
+  --pxd-color-surface-inverse: #eaeaea;
+  --pxd-color-scrim: rgba(0, 0, 0, 0.6);
+  --pxd-color-text-default: #eaeaea;
+  --pxd-color-text-muted: #ababab;
+  --pxd-color-text-inverse: #1c1c1c;
+  --pxd-color-text-link: #7fb0ff;
+  --pxd-color-border-default: #5a5a5a;
+  --pxd-color-border-strong: #8c8c8c;
+  --pxd-color-border-focus: #7fb0ff;
+  --pxd-color-action-primary-background: #7fb0ff;
+  --pxd-color-action-primary-foreground: #1c1c1c;
+  --pxd-color-action-secondary-background: #1c1c1c;
+  --pxd-color-action-secondary-foreground: #eaeaea;
+  --pxd-color-action-secondary-border: #8c8c8c;
+  --pxd-color-action-danger-background: #cfcfcf;
+  --pxd-color-action-danger-foreground: #1c1c1c;
+  --pxd-color-selection-background: #26385a;
+  --pxd-color-selection-foreground: #cfe0ff;
+  --pxd-color-status-info-background: #26385a;
+  --pxd-color-status-info-foreground: #cfe0ff;
+  --pxd-color-status-info-emphasis: #7fb0ff;
+  --pxd-color-status-success-background: #242424;
+  --pxd-color-status-success-foreground: #eaeaea;
+  --pxd-color-status-success-emphasis: #ababab;
+  --pxd-color-status-warning-background: #303030;
+  --pxd-color-status-warning-foreground: #eaeaea;
+  --pxd-color-status-warning-emphasis: #8c8c8c;
+  --pxd-color-status-danger-background: #303030;
+  --pxd-color-status-danger-foreground: #eaeaea;
+  --pxd-color-status-danger-emphasis: #cfcfcf;
+  --pxd-color-data-categorical-1: #7fb0ff;
+  --pxd-color-data-categorical-2: #eaeaea;
+  --pxd-color-data-categorical-3: #ababab;
+  --pxd-color-data-categorical-4: #8c8c8c;
+  --pxd-color-data-categorical-5: #cfcfcf;
+  --pxd-color-data-categorical-6: #cfe0ff;
+  --pxd-color-data-positive: #cfcfcf;
+  --pxd-color-data-negative: #7fb0ff;
+  --pxd-color-data-neutral: #8c8c8c;
+  --pxd-type-title-page-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-page-size: 28px;
+  --pxd-type-title-page-weight: 600;
+  --pxd-type-title-page-line-height: 1.25;
+  --pxd-type-title-page-letter-spacing: 0px;
+  --pxd-type-title-section-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-section-size: 20px;
+  --pxd-type-title-section-weight: 600;
+  --pxd-type-title-section-line-height: 1.3;
+  --pxd-type-title-section-letter-spacing: 0px;
+  --pxd-type-title-item-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-title-item-size: 16px;
+  --pxd-type-title-item-weight: 600;
+  --pxd-type-title-item-line-height: 1.4;
+  --pxd-type-title-item-letter-spacing: 0px;
+  --pxd-type-body-default-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-default-size: 16px;
+  --pxd-type-body-default-weight: 400;
+  --pxd-type-body-default-line-height: 1.5;
+  --pxd-type-body-default-letter-spacing: 0px;
+  --pxd-type-body-small-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pxd-type-body-small-size: 14px;
+  --pxd-type-body-small-weight: 400;
+  --pxd-type-body-small-line-height: 1.5;
+  --pxd-type-body-small-letter-spacing: 0px;
+  --pxd-type-label-default-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-default-size: 13px;
+  --pxd-type-label-default-weight: 500;
+  --pxd-type-label-default-line-height: 1.4;
+  --pxd-type-label-default-letter-spacing: 0.3px;
+  --pxd-type-label-small-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-label-small-size: 12px;
+  --pxd-type-label-small-weight: 500;
+  --pxd-type-label-small-line-height: 1.4;
+  --pxd-type-label-small-letter-spacing: 0.4px;
+  --pxd-type-numeric-display-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --pxd-type-numeric-display-size: 26px;
+  --pxd-type-numeric-display-weight: 500;
+  --pxd-type-numeric-display-line-height: 1.2;
+  --pxd-type-numeric-display-letter-spacing: 0px;
+  --pxd-space-inset-compact: 8px;
+  --pxd-space-inset-default: 16px;
+  --pxd-space-inset-comfortable: 24px;
+  --pxd-space-stack-tight: 4px;
+  --pxd-space-stack-default: 8px;
+  --pxd-space-stack-loose: 16px;
+  --pxd-space-stack-section: 32px;
+  --pxd-space-inline-tight: 4px;
+  --pxd-space-inline-default: 8px;
+  --pxd-space-inline-loose: 16px;
+  --pxd-size-target-min: 44px;
+  --pxd-size-icon-small: 16px;
+  --pxd-size-icon-default: 20px;
+  --pxd-radius-small: 2px;
+  --pxd-radius-control: 4px;
+  --pxd-radius-default: 4px;
+  --pxd-radius-large: 6px;
+  --pxd-radius-full: 999px;
+  --pxd-border-width-default: 1px;
+  --pxd-border-width-strong: 2px;
+  --pxd-focus-ring-width: 2px;
+  --pxd-focus-ring-offset: 2px;
+  --pxd-measure-max: 65;
+  --pxd-opacity-state-hover: 0.06;
+  --pxd-opacity-state-pressed: 0.12;
+  --pxd-opacity-state-focus: 0.12;
+  --pxd-opacity-state-disabled: 0.4;
+  --pxd-shadow-raised: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-shadow-overlay: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  --pxd-motion-duration-instant: 0ms;
+  --pxd-motion-duration-short: 0ms;
+  --pxd-motion-duration-medium: 0ms;
+  --pxd-motion-duration-long: 0ms;
+  --pxd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --pxd-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --pxd-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* shadcn/ui variable names, so shadcn components follow this pack too */
+  --background: var(--pxd-color-surface-default);
+  --foreground: var(--pxd-color-text-default);
+  --card: var(--pxd-color-surface-raised);
+  --card-foreground: var(--pxd-color-text-default);
+  --popover: var(--pxd-color-surface-overlay);
+  --popover-foreground: var(--pxd-color-text-default);
+  --primary: var(--pxd-color-action-primary-background);
+  --primary-foreground: var(--pxd-color-action-primary-foreground);
+  --secondary: var(--pxd-color-action-secondary-background);
+  --secondary-foreground: var(--pxd-color-action-secondary-foreground);
+  --muted: var(--pxd-color-surface-subtle);
+  --muted-foreground: var(--pxd-color-text-muted);
+  --accent: var(--pxd-color-selection-background);
+  --accent-foreground: var(--pxd-color-selection-foreground);
+  --destructive: var(--pxd-color-action-danger-background);
+  --border: var(--pxd-color-border-default);
+  --input: var(--pxd-color-border-strong);
+  --ring: var(--pxd-color-border-focus);
+  --radius: var(--pxd-radius-default);
+  --chart-1: var(--pxd-color-data-categorical-1);
+  --chart-2: var(--pxd-color-data-categorical-2);
+  --chart-3: var(--pxd-color-data-categorical-3);
+  --chart-4: var(--pxd-color-data-categorical-4);
+  --chart-5: var(--pxd-color-data-categorical-5);
+  color-scheme: dark;
+}
+
+/* Extras from the wireframe pack's manifest: what tokens can't express, appended verbatim, scoped to this theme. */
+/*
+ * Wireframe: what tokens can't draw. The theme compiler appends this file verbatim to themes/wireframe.css.
+ * Every rule is scoped to [data-pxd-theme="wireframe"], and every colour is a token variable, so recolouring
+ * the tokens recolours this too. Delete the "extras" line in manifest.json and the pack is plain tokens.
+ */
+
+/* Containers and fields are dashed: a box that stands for a box. */
+[data-pxd-theme="wireframe"] .pxd-card,
+[data-pxd-theme="wireframe"] .pxd-input,
+[data-pxd-theme="wireframe"] .pxd-panel,
+[data-pxd-theme="wireframe"] .pxd-status,
+[data-pxd-theme="wireframe"] .pxd-dropzone,
+[data-pxd-theme="wireframe"] .pxd-button-secondary {
+  border-style: dashed;
+}
+
+/* A media placeholder is a hatched box, which is what a wireframe has always drawn where a picture will go. */
+[data-pxd-theme="wireframe"] .pxd-media,
+[data-pxd-theme="wireframe"] .pxd-media-placeholder,
+[data-pxd-theme="wireframe"] .pxd-media-audio-placeholder,
+[data-pxd-theme="wireframe"] .pxd-qr-placeholder,
+[data-pxd-theme="wireframe"] .pxd-gallery-image {
+  background-color: var(--pxd-color-surface-subtle);
+  background-image: repeating-linear-gradient(-45deg, transparent 0 7px, var(--pxd-color-border-default) 7px 8px);
+  border: var(--pxd-border-width-default) dashed var(--pxd-color-border-strong);
+}