@opendata-ai/openchart-core 8.0.0-rc.2 → 8.0.0-rc.21

package/src/styles/dark.css

@@ -1,44 +0,0 @@
-/* GENERATED FILE — do not edit. Source: packages/core/src/styles/token-definitions.ts. Regenerate: bun run generate:tokens */
-
-@layer oc.tokens {
-  /* ---------------------------------------------------------------------------
-   * Dark mode overrides (fallback defaults)
-   *
-   * At runtime, the JS theme engine stamps dark-adapted --oc-* custom
-   * properties on each .oc-root container. These CSS values serve as
-   * fallbacks for contexts where JS hasn't mounted yet.
-   * --------------------------------------------------------------------------- */
-
-  .oc-dark {
-    /* Surfaces (zinc-based achromatic ramp) */
-    --oc-bg: #09090b;
-    --oc-card: #111113;
-    --oc-secondary: #27272a;
-
-    /* Text levels — see tokens.css for the cross-mode naming rationale */
-    --oc-text: #f7f8f8;
-    --oc-text-secondary: #d0d6e0;
-    --oc-text-muted: #a1a1aa;
-    --oc-text-faint: #52525b;
-
-    /* Lines */
-    --oc-gridline: rgba(255, 255, 255, 0.05);
-    --oc-axis: rgba(255, 255, 255, 0.1);
-    --oc-border: rgba(255, 255, 255, 0.1);
-
-    /* Brand and semantic — accent stays cyan (no darkening on dark bg) */
-    --oc-accent: #06b6d4;
-    --oc-accent-strong: #06b6d4;
-    --oc-positive: #34d399;
-    --oc-negative: #fb7185;
-    --oc-focus: #60a5fa;
-
-    /* Interactive states */
-    --oc-hover-bg: rgba(255, 255, 255, 0.05);
-    --oc-tooltip-bg: rgba(17, 17, 19, 0.92);
-    --oc-tooltip-border: rgba(255, 255, 255, 0.08);
-    --oc-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.4);
-    --oc-tooltip-text: #f7f8f8;
-    --oc-legend-text: #d0d6e0;
-  }
-}

package/src/styles/graph.css

@@ -1,135 +0,0 @@
-@layer oc.components {
-  /* ---------------------------------------------------------------------------
-   * Graph
-   * --------------------------------------------------------------------------- */
-
-  .oc-graph-wrapper {
-    position: relative;
-    overflow: hidden;
-    background: var(--oc-bg);
-    font-family: var(--oc-font-family);
-    width: 100%;
-    height: 100%;
-  }
-
-  .oc-graph-canvas {
-    display: block;
-    width: 100%;
-    height: 100%;
-    cursor: grab;
-  }
-
-  .oc-graph-canvas--dragging {
-    cursor: grabbing;
-  }
-
-  .oc-graph-chrome {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    padding: 16px 16px 8px;
-    pointer-events: none;
-
-    & .oc-title {
-      font-size: var(--oc-title-size);
-      font-weight: var(--oc-title-weight);
-      letter-spacing: var(--oc-title-tracking);
-      color: var(--oc-text);
-      margin: 0 0 4px;
-      --_stroke: color-mix(in srgb, var(--oc-bg) 80%, transparent);
-      text-shadow:
-        -2px -2px 0 var(--_stroke),
-        2px -2px 0 var(--_stroke),
-        -2px 2px 0 var(--_stroke),
-        2px 2px 0 var(--_stroke),
-        0 -2px 0 var(--_stroke),
-        0 2px 0 var(--_stroke),
-        -2px 0 0 var(--_stroke),
-        2px 0 0 var(--_stroke);
-    }
-
-    & .oc-subtitle {
-      font-size: var(--oc-subtitle-size);
-      color: var(--oc-text-secondary);
-      margin: 0;
-      --_stroke: color-mix(in srgb, var(--oc-bg) 80%, transparent);
-      text-shadow:
-        -1px -1px 0 var(--_stroke),
-        1px -1px 0 var(--_stroke),
-        -1px 1px 0 var(--_stroke),
-        1px 1px 0 var(--_stroke);
-    }
-  }
-
-  .oc-graph-legend {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background: var(--oc-bg);
-    border: 1px solid var(--oc-border);
-    border-radius: var(--oc-border-radius);
-    padding: 8px 12px;
-    font-size: 12px;
-    color: var(--oc-text-secondary);
-    max-height: 200px;
-    overflow-y: auto;
-  }
-
-  .oc-graph-legend-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 2px 0;
-  }
-
-  .oc-graph-legend-swatch {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .oc-graph-search {
-    position: absolute;
-    top: 8px;
-    left: 8px;
-
-    & input {
-      font-family: var(--oc-font-family);
-      font-size: var(--oc-body-size);
-      padding: 6px 10px;
-      border: 1px solid var(--oc-border);
-      border-radius: var(--oc-border-radius);
-      background: var(--oc-bg);
-      color: var(--oc-text);
-      outline: none;
-
-      &:focus {
-        border-color: var(--oc-focus);
-        box-shadow: 0 0 0 2px var(--oc-focus-ring-strong);
-      }
-    }
-  }
-
-  /* Dark mode graph overrides (darker bg for canvas-based rendering) */
-  .oc-dark .oc-graph-wrapper,
-  .oc-graph-wrapper.oc-dark {
-    /* GitHub-dark canvas background, intentionally not a token */
-    --oc-bg: #0d1117;
-  }
-
-  /*
-   * graph-mount.ts stamps .oc-dark on both .oc-graph-wrapper and
-   * .oc-graph-container simultaneously, so the self-variant
-   * (.oc-dark.oc-graph-wrapper) and descendant variant
-   * (.oc-dark .oc-graph-legend) resolve identically.
-   */
-  .oc-dark .oc-graph-legend,
-  .oc-dark.oc-graph-wrapper .oc-graph-legend,
-  .oc-dark .oc-graph-search input {
-    background: rgba(13, 17, 23, 0.85);
-    border-color: var(--oc-border);
-  }
-}

package/src/styles/index.css

@@ -1,28 +0,0 @@
-/**
- * @opendata-ai/openchart-core styles
- *
- * CSS with oc- prefix for all class names.
- * CSS custom properties for theme overrides.
- * Dark mode via .oc-dark class on the container.
- * Cascade layers: oc.tokens, oc.base, oc.components, oc.animation, oc.reduced-motion.
- */
-
-/* For optimal typography, load Inter: https://fonts.google.com/specimen/Inter */
-
-@layer oc.tokens, oc.base, oc.components, oc.animation, oc.reduced-motion;
-
-@import "./tokens.css";
-@import "./dark.css";
-@import "./base.css";
-@import "./chrome.css";
-@import "./tooltip.css";
-@import "./legend.css";
-@import "./series-search.css";
-@import "./you-draw-it.css";
-@import "./table.css";
-@import "./table-animation.css";
-@import "./graph.css";
-@import "./sparkline.css";
-@import "./keyframes.css";
-@import "./animation.css";
-@import "./reduced-motion.css";

package/src/styles/keyframes.css

@@ -1,135 +0,0 @@
-@layer oc.animation {
-  /* ---------------------------------------------------------------------------
-   * Animation keyframes
-   * --------------------------------------------------------------------------- */
-
-  /* Bar entrance: clip-path reveal bottom-to-top + fade in (vertical columns).
-     Bars grow upward from baseline with a soft opacity fade. */
-  @keyframes oc-enter-bar {
-    from {
-      clip-path: inset(100% 0 0 0);
-      opacity: 0;
-    }
-    75% {
-      opacity: 1;
-    }
-    to {
-      clip-path: inset(0 0 0 0);
-      opacity: 1;
-    }
-  }
-
-  /* Bar entrance: clip-path reveal left-to-right + fade in (horizontal bars).
-     Bars grow rightward from axis with a soft opacity fade. */
-  @keyframes oc-enter-bar-h {
-    from {
-      clip-path: inset(0 100% 0 0);
-      opacity: 0;
-    }
-    75% {
-      opacity: 1;
-    }
-    to {
-      clip-path: inset(0 0 0 0);
-      opacity: 1;
-    }
-  }
-
-  /* Line/area entrance: clip-path reveal left-to-right + fade in.
-     Lines draw in following reading direction with a soft lead-in. */
-  @keyframes oc-enter-line {
-    from {
-      clip-path: inset(0 100% 0 0);
-      opacity: 0;
-    }
-    15% {
-      opacity: 1;
-    }
-    to {
-      clip-path: inset(0 0 0 0);
-      opacity: 1;
-    }
-  }
-
-  /* Point/arc entrance: scale up + fade in from center */
-  @keyframes oc-enter-point {
-    from {
-      opacity: 0;
-      transform: scale(0.3);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  /* Map feature entrance: fade in while transitioning fill from a neutral base
-     to the data-driven color stored in --oc-feature-fill. */
-  @keyframes oc-enter-map-fill {
-    from {
-      fill: var(--oc-secondary);
-      opacity: 0;
-    }
-    to {
-      fill: var(--oc-feature-fill);
-      opacity: 1;
-    }
-  }
-
-  /* Pure opacity fade (no transform). Safe for elements with existing transforms
-     like arc groups that use translate() for positioning. */
-  @keyframes oc-enter-fade-only {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  /* Fade + subtle slide up for text, rule, tick, annotations */
-  @keyframes oc-enter-fade {
-    from {
-      opacity: 0;
-      transform: translateY(4px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  /* Table row entrance: slide up only, no opacity (cells fade independently
-     to avoid opacity compounding between row and cell animations) */
-  @keyframes oc-table-enter-row {
-    from {
-      transform: translateY(6px);
-    }
-    to {
-      transform: translateY(0);
-    }
-  }
-
-  /* Table bar fill entrance: clip-path grow only, no opacity
-     (preserves resting opacity: 0.15 from table.css) */
-  @keyframes oc-table-enter-bar-fill {
-    from {
-      clip-path: inset(0 100% 0 0);
-    }
-    to {
-      clip-path: inset(0 0 0 0);
-    }
-  }
-
-  /* Tooltip entrance */
-  @keyframes oc-tooltip-in {
-    from {
-      opacity: 0;
-      transform: translateY(2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-}

package/src/styles/legend.css

@@ -1,18 +0,0 @@
-@layer oc.components {
-  /* ---------------------------------------------------------------------------
-   * Legend
-   * --------------------------------------------------------------------------- */
-
-  .oc-legend {
-    font-family: var(--oc-font-family);
-    font-size: var(--oc-body-size);
-  }
-
-  .oc-legend-entry {
-    cursor: default;
-  }
-
-  .oc-legend text {
-    fill: var(--oc-legend-text);
-  }
-}

package/src/styles/reduced-motion.css

@@ -1,67 +0,0 @@
-/* ---------------------------------------------------------------------------
- * Reduced motion
- *
- * Catch-all: last-declared layer beats every earlier layer regardless of
- * specificity. No !important, no hand-maintained selector mirror.
- *
- * Selector list matches CSS_TOKEN_ROOT_SELECTORS in token-definitions.ts.
- * --------------------------------------------------------------------------- */
-
-@layer oc.reduced-motion {
-  @media (prefers-reduced-motion: reduce) {
-    :is(
-        .oc-root,
-        .oc-chart-root,
-        .oc-table-wrapper,
-        .oc-table-root,
-        .oc-graph-wrapper,
-        .oc-graph-root,
-        .oc-sankey-root,
-        .oc-tilemap-root,
-        .oc-barlist-root,
-        .oc-map-root
-      ),
-    :is(
-        .oc-root,
-        .oc-chart-root,
-        .oc-table-wrapper,
-        .oc-table-root,
-        .oc-graph-wrapper,
-        .oc-graph-root,
-        .oc-sankey-root,
-        .oc-tilemap-root,
-        .oc-barlist-root,
-        .oc-map-root
-      )
-      *,
-    :is(
-        .oc-root,
-        .oc-chart-root,
-        .oc-table-wrapper,
-        .oc-table-root,
-        .oc-graph-wrapper,
-        .oc-graph-root,
-        .oc-sankey-root,
-        .oc-tilemap-root,
-        .oc-barlist-root,
-        .oc-map-root
-      )
-      *::before,
-    :is(
-        .oc-root,
-        .oc-chart-root,
-        .oc-table-wrapper,
-        .oc-table-root,
-        .oc-graph-wrapper,
-        .oc-graph-root,
-        .oc-sankey-root,
-        .oc-tilemap-root,
-        .oc-barlist-root,
-        .oc-map-root
-      )
-      *::after {
-      animation: none;
-      transition: none;
-    }
-  }
-}

package/src/styles/series-search.css

@@ -1,153 +0,0 @@
-@layer oc.components {
-  /* ---------------------------------------------------------------------------
-   * Series search (seriesSearch)
-   *
-   * DOM combobox overlaid on the SVG band the engine reserves below chrome.
-   * The wrapper is absolutely positioned by the vanilla adapter (inline
-   * left/top/width/height), so everything here is visual only. All colors come
-   * from --oc-* tokens, which flip in .oc-dark.
-   * --------------------------------------------------------------------------- */
-
-  .oc-series-search {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px;
-    font-family: var(--oc-font-family);
-    z-index: 10;
-  }
-
-  /* Chips: removable filter tokens for the current selection. They flow to the
-   * left of the input and scroll horizontally rather than wrapping over the
-   * chart when a reader picks many series. */
-  .oc-series-search-chips {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  .oc-series-search-chips::-webkit-scrollbar {
-    display: none;
-  }
-
-  .oc-series-search-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 4px 3px 10px;
-    border: 1px solid var(--oc-border);
-    border-radius: 999px;
-    background: var(--oc-secondary);
-    color: var(--oc-text-secondary);
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 16px;
-    white-space: nowrap;
-  }
-
-  .oc-series-search-chip-remove {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    /* 16px glyph, but a >=24px hit area (WCAG 2.5.5 target size) via padding
-       pulled back with negative margin so the chip layout stays tight. */
-    width: 16px;
-    height: 16px;
-    padding: 4px;
-    margin: -4px -2px -4px -4px;
-    border: none;
-    border-radius: 50%;
-    background: transparent;
-    color: var(--oc-text-muted);
-    cursor: pointer;
-    transition:
-      color 0.15s,
-      background-color 0.15s;
-  }
-
-  .oc-series-search-chip-remove:hover {
-    color: var(--oc-text);
-    background: var(--oc-hover-bg);
-  }
-
-  .oc-series-search-chip-remove:focus-visible {
-    outline: 2px solid var(--oc-focus);
-    outline-offset: 1px;
-  }
-
-  .oc-series-search-chip-remove svg {
-    display: block;
-  }
-
-  /* Combobox: input + popup listbox. Styling matches the table search input
-   * (border, radius, focus ring) so the two search surfaces read as one system. */
-  .oc-series-search-box {
-    position: relative;
-    flex: 0 1 220px;
-    min-width: 120px;
-  }
-
-  .oc-series-search-icon {
-    position: absolute;
-    left: 9px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--oc-text-muted);
-    pointer-events: none;
-  }
-
-  /* Shared skin provided by the grouped rule in table.css.
-     Only divergent props live here. */
-  .oc-series-search-input {
-    height: 32px;
-    padding: 0 10px 0 28px;
-  }
-
-  .oc-series-search-listbox {
-    position: absolute;
-    top: calc(100% + 4px);
-    right: 0;
-    min-width: 100%;
-    max-height: 240px;
-    overflow-y: auto;
-    margin: 0;
-    padding: 4px;
-    list-style: none;
-    border: 1px solid var(--oc-border);
-    border-radius: 8px;
-    background: var(--oc-card);
-    box-shadow: var(--oc-tooltip-shadow);
-    z-index: 20;
-  }
-
-  .oc-series-search-option {
-    padding: 6px 10px;
-    border-radius: 4px;
-    font-size: 13px;
-    color: var(--oc-text);
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .oc-series-search-option[aria-selected="true"],
-  .oc-series-search-option:hover {
-    background: var(--oc-hover-bg);
-  }
-
-  /* The typed substring within each suggestion. */
-  .oc-series-search-match {
-    font-weight: 600;
-  }
-
-  .oc-series-search-empty {
-    padding: 6px 10px;
-    font-size: 12px;
-    color: var(--oc-text-muted);
-  }
-}

package/src/styles/sparkline.css

@@ -1,16 +0,0 @@
-@layer oc.components {
-  /**
-   * Sparkline display mode.
-   *
-   * Stamped on the SVG root as data-display="sparkline" by the renderer when
-   * the spec sets display: 'sparkline'. Strips any inherited padding/margin
-   * so the mark renders truly edge-to-edge in tight container layouts (KPI
-   * cards, table cells, dashboard tiles).
-   */
-
-  .oc-chart[data-display="sparkline"] {
-    display: block;
-    margin: 0;
-    padding: 0;
-  }
-}

package/src/styles/table-animation.css

@@ -1,93 +0,0 @@
-@layer oc.animation {
-  /* ---------------------------------------------------------------------------
-   * Table entrance animations (.oc-table-wrapper.oc-animate)
-   * --------------------------------------------------------------------------- */
-
-  .oc-table-wrapper.oc-animate {
-    /* Chrome (title/subtitle): fade + slide up */
-    & > .oc-chrome {
-      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.6)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    }
-
-    /* Table header: quick fade before rows start */
-    & thead {
-      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.4)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    }
-
-    /* Row entrance: slide up only, no opacity (cells handle their own fading
-       to avoid opacity compounding between row and cell animations) */
-    & tbody tr {
-      animation: oc-table-enter-row var(--oc-animation-duration)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-row-index, 0));
-    }
-
-    /* Cell text: fade in synced with row slide */
-    & tbody td {
-      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.5)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-row-index, 0));
-    }
-
-    /* Heatmap/category cell backgrounds: longer fade, delayed after row appears */
-    & td.oc-table-heatmap,
-    & td.oc-table-category {
-      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.7)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(
-        var(--oc-animation-stagger) *
-        var(--oc-row-index, 0) +
-        var(--oc-animation-duration) *
-        0.3
-      );
-    }
-
-    /* Bar fill: clip-path grow only (no opacity change to preserve resting
-       opacity: 0.15 from table.css) */
-    & .oc-table-bar-fill {
-      animation: oc-table-enter-bar-fill calc(var(--oc-animation-duration) * 0.8)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(
-        var(--oc-animation-stagger) *
-        var(--oc-row-index, 0) +
-        var(--oc-animation-duration) *
-        0.3
-      );
-    }
-
-    /* Sparkline SVG: clip-path reveal left-to-right. Targets the SVG directly
-       (not the wrapper) to avoid clipping absolutely-positioned dots and labels. */
-    & .oc-table-sparkline > svg {
-      animation: oc-enter-line calc(var(--oc-animation-duration) * 0.8)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(
-        var(--oc-animation-stagger) *
-        var(--oc-row-index, 0) +
-        var(--oc-animation-duration) *
-        0.4
-      );
-    }
-
-    /* Sparkline dots and labels: fade in after the line draws through */
-    & .oc-table-sparkline-dot,
-    & .oc-table-sparkline-labels {
-      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.3)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(
-        var(--oc-animation-stagger) *
-        var(--oc-row-index, 0) +
-        var(--oc-animation-duration) *
-        0.8
-      );
-    }
-
-    /* Search and pagination: quick fade on mount */
-    & .oc-table-search,
-    & .oc-table-pagination {
-      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.5)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    }
-  }
-}