doom-design-system 0.5.0 → 0.6.0

package/.agent/skills/doom/styles/tokens.md

@@ -1,129 +0,0 @@
-# Design Tokens
-
-Tokens are defined in `styles/tokens.ts`.
-
-## Palette
-
-Colors available in `palette` object. Shades follow Tailwind-style naming: `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `950`.
-
-Access via `palette.{color}[{shade}]` (e.g., `palette.purple[500]`, `palette.slate[800]`).
-
-| Color  | Shades Available | Notes                     |
-| ------ | ---------------- | ------------------------- |
-| black  | 50-950           | Opacity scales (rgba)     |
-| white  | 50-950           | Opacity scales (rgba)     |
-| slate  | 50-950           | Full range                |
-| purple | 50-900           | Primary for default theme |
-| navy   | 50-900           | —                         |
-| blue   | 50-900           | Primary for captain theme |
-| indigo | 50-900           | —                         |
-| yellow | 50-900           | Primary for vigilante     |
-| green  | 50-900           | Primary for doom theme    |
-| red    | 50-900           | Error states              |
-| gray   | 50-990           | Extended range            |
-
-## Base Variables
-
-### Typography
-
-```
---text-xs: 0.75rem
---text-sm: 0.875rem
---text-base: 1rem
---text-lg: 1.125rem
---text-xl: 1.25rem
---text-2xl: 1.5rem
---text-3xl: 1.875rem
---text-4xl: 2.25rem
---text-5xl: 3rem
---text-6xl: 3.75rem
-```
-
-### Font Weights
-
-```
---font-thin: 100
---font-extralight: 200
---font-light: 300
---font-regular: 400
---font-medium: 500
---font-semibold: 600
---font-bold: 700
---font-extrabold: 800
---font-black: 900
-```
-
-### Spacing
-
-```
---spacing-xs: 0.25rem
---spacing-sm: 0.5rem
---spacing-md: 1rem
---spacing-lg: 1.5rem
---spacing-xl: 2rem
---spacing-2xl: 3rem
-```
-
-### Z-Index
-
-```
---z-base: 0
---z-elevated: 10
---z-header: 40
---z-dropdown: 50
---z-modal: 100
---z-overlay: 150
---z-drawer: 200
---z-tooltip: 500
-```
-
-### Motion
-
-```
---duration-fast: 150ms
---duration-normal: 250ms
---duration-slow: 350ms
---ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
---ease-out: cubic-bezier(0.0, 0, 0.2, 1)
---ease-in: cubic-bezier(0.4, 0, 1, 1)
-```
-
-### Border Radius
-
-```
---radius: 4px
---radius-pill: 9999px
---radius-full: 50%
-```
-
-### Structural
-
-```
---border-width: 2px
---shadow-hard: 4px 4px 0px 0px var(--shadow-base)
---shadow-hover: 6px 6px 0px 0px var(--shadow-base)
---shadow-sm: 2px 2px 0px 0px var(--card-border)
---shadow-lg: 8px 8px 0px 0px var(--card-border)
-```
-
-### Outline (Focus States)
-
-```
---outline-width: 2px
---outline-offset: 2px
-```
-
-### Sizes
-
-```
---size-icon-sm: 20px
---size-icon-md: 24px
---size-icon-lg: 32px
---size-touch-target: 44px
-```
-
-### Overlay
-
-```
---overlay-opacity: 0.5
-```

package/.agent/skills/doom/styles/utilities.md

@@ -1,84 +0,0 @@
-# Utility Classes
-
-Available globally via `styles/_utilities.scss` (included in globals).
-
-## Display
-
-| Class          | Property               |
-| -------------- | ---------------------- |
-| `.flex`        | `display: flex`        |
-| `.grid`        | `display: grid`        |
-| `.hidden`      | `display: none`        |
-| `.block`       | `display: block`       |
-| `.inline-flex` | `display: inline-flex` |
-
-## Flexbox
-
-| Class              | Property                         |
-| ------------------ | -------------------------------- |
-| `.flex-row`        | `flex-direction: row`            |
-| `.flex-col`        | `flex-direction: column`         |
-| `.flex-wrap`       | `flex-wrap: wrap`                |
-| `.items-center`    | `align-items: center`            |
-| `.items-start`     | `align-items: flex-start`        |
-| `.items-end`       | `align-items: flex-end`          |
-| `.justify-center`  | `justify-content: center`        |
-| `.justify-between` | `justify-content: space-between` |
-| `.justify-end`     | `justify-content: flex-end`      |
-
-## Grid
-
-| Class               | Property                                |
-| ------------------- | --------------------------------------- |
-| `.grid-cols-{1-12}` | `grid-template-columns: repeat(n, 1fr)` |
-
-## Spacing
-
-All spacing uses 4px increments (0-10).
-
-| Class         | Property           |
-| ------------- | ------------------ |
-| `.gap-{0-10}` | Gap                |
-| `.m-{0-10}`   | Margin all         |
-| `.mt-{0-10}`  | Margin top         |
-| `.mb-{0-10}`  | Margin bottom      |
-| `.mx-{0-10}`  | Margin horizontal  |
-| `.my-{0-10}`  | Margin vertical    |
-| `.p-{0-10}`   | Padding all        |
-| `.px-{0-10}`  | Padding horizontal |
-| `.py-{0-10}`  | Padding vertical   |
-
-## Typography
-
-| Class                   | Property                            |
-| ----------------------- | ----------------------------------- |
-| `.text-{xs-6xl}`        | Font size                           |
-| `.font-{regular-black}` | Font weight                         |
-| `.text-{color}`         | Color (primary, muted, error, etc.) |
-| `.uppercase`            | Text transform                      |
-| `.text-center`          | Text align                          |
-
-## Sizing
-
-| Class       | Property        |
-| ----------- | --------------- |
-| `.w-full`   | `width: 100%`   |
-| `.h-full`   | `height: 100%`  |
-| `.h-screen` | `height: 100vh` |
-
-## Responsive Prefixes
-
-Use breakpoint prefixes: `sm:`, `md:`, `lg:`, `xl:`
-
-```html
-<div class="flex-col md:flex-row">
-  <!-- Column on mobile, row on md+ -->
-</div>
-```
-
-## Shadows
-
-| Class                                  | Property                  |
-| -------------------------------------- | ------------------------- |
-| `.shadow-hard`                         | Standard brutalist shadow |
-| `.shadow-{top/bottom/left/right}-hard` | Directional shadows       |

package/dist/components/Chart/sensors/KeyboardSensor.js

@@ -1,82 +0,0 @@
-import { InteractionChannel } from "../types/interaction.js";
-import { findClosestTargets } from "./utils/search.js";
-/**
- * Professional-grade Keyboard Sensor for A11y.
- * Allows navigating data points using ArrowKeys.
- */
-export const KeyboardSensor = (options = {}) => {
-    const { name = InteractionChannel.PRIMARY_HOVER } = options;
-    let focusedIndex = -1;
-    return ({ on, off, getChartContext, upsertInteraction, removeInteraction, }) => {
-        const handleKeyDown = (event) => {
-            const native = event.nativeEvent;
-            const ctx = getChartContext();
-            if (!ctx || !ctx.chartStore) {
-                return;
-            }
-            const state = ctx.chartStore.getState();
-            const { data, scales } = state;
-            if (!data || data.length === 0 || !scales.x) {
-                return;
-            }
-            if (native.key === "ArrowRight") {
-                focusedIndex = Math.min(focusedIndex + 1, data.length - 1);
-                native.preventDefault();
-            }
-            else if (native.key === "ArrowLeft") {
-                focusedIndex = Math.max(focusedIndex - 1, 0);
-                native.preventDefault();
-            }
-            else if (native.key === "Escape") {
-                focusedIndex = -1;
-                removeInteraction(name);
-                return;
-            }
-            else {
-                return;
-            }
-            if (focusedIndex >= 0) {
-                const d = data[focusedIndex];
-                const { x: xScale, y: yScale } = scales;
-                // Resolve coordinates for the primary series/config
-                const xAcc = state.config.x || ((v) => v[0]);
-                const yAcc = state.config.y || ((v) => v[1]);
-                const xVal = typeof xAcc === "function" ? xAcc(d) : d[xAcc];
-                const yVal = typeof yAcc === "function" ? yAcc(d) : d[yAcc];
-                const xPos = xScale(xVal) || 0;
-                const yPos = yScale(yVal) || 0;
-                // Leverage centralized search logic to identify targets at the keyboard-focused point.
-                // This coordinates keyboard navigation with multi-series data processing.
-                const focusEvent = {
-                    type: "CHART_POINTER_MOVE",
-                    nativeEvent: native,
-                    coordinates: {
-                        chartX: xPos,
-                        chartY: yPos,
-                        containerX: xPos,
-                        containerY: yPos,
-                        isWithinPlot: true,
-                    },
-                };
-                const targets = findClosestTargets(focusEvent, "nearest-x", state);
-                if (targets.length > 0) {
-                    upsertInteraction(name, {
-                        pointer: {
-                            x: xPos,
-                            y: yPos,
-                            containerX: xPos,
-                            containerY: yPos,
-                            isTouch: false,
-                        },
-                        targets,
-                        target: targets[0],
-                    });
-                }
-            }
-        };
-        on("CHART_KEY_DOWN", handleKeyDown);
-        return () => {
-            off("CHART_KEY_DOWN", handleKeyDown);
-        };
-    };
-};

package/dist/components/Chart/sensors/SelectionSensor.js

@@ -1,41 +0,0 @@
-import { InteractionChannel } from "../types/interaction.js";
-import { findClosestTargets } from "./utils/search.js";
-/**
- * Professional-grade Selection Sensor.
- * Coordinates with search logic to choose data points on click.
- */
-export const SelectionSensor = (options = {}) => {
-    const { name = InteractionChannel.SELECTION } = options;
-    return ({ on, off, getChartContext, upsertInteraction }) => {
-        const handleDown = (event) => {
-            var _a;
-            const ctx = getChartContext();
-            if (!ctx || !ctx.chartStore) {
-                return;
-            }
-            const state = ctx.chartStore.getState();
-            /**
-             * For selection, we usually want 'closest' or 'exact' mode to ensure
-             * the user clicked precisely what they intended.
-             */
-            const targets = findClosestTargets(event, "closest", state);
-            if (targets.length > 0) {
-                const selectedDatum = targets[0].data;
-                const currentSelection = ((_a = state.interactions.get(name)) === null || _a === void 0 ? void 0 : _a.selection) || [];
-                // Simple toggle logic
-                const isAlreadySelected = currentSelection.includes(selectedDatum);
-                const nextSelection = isAlreadySelected
-                    ? currentSelection.filter((d) => d !== selectedDatum)
-                    : [...currentSelection, selectedDatum];
-                upsertInteraction(name, {
-                    selection: nextSelection,
-                    mode: "discrete",
-                });
-            }
-        };
-        on("CHART_POINTER_DOWN", handleDown);
-        return () => {
-            off("CHART_POINTER_DOWN", handleDown);
-        };
-    };
-};