@keyfunc/keybricks-ds 1.0.1 → 1.0.3

package/components/pipeline/PalettePanel.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { IconTile } from "../display/Badge.jsx";
 import { ViewToggle } from "../tabs/ViewToggle.jsx";
+import { PIPELINE_CATALOG } from "./pipeline-catalog.js";
 
 /** Palette grid tile — 40px tinted icon + 10px two-line label. */
 export function PaletteItem({ icon, hue, label, onClick, style }) {
@@ -27,14 +28,7 @@ export function PaletteListItem({ icon, hue, label, onClick, style }) {
   );
 }
 
-/** The full component set of the pipeline editor, verbatim from the file. */
-export const PIPELINE_CATALOG = [
-  { label: "Data Source", icon: "table", hue: "source", items: [{ label: "Detail Sheet", icon: "table" }, { label: "Model", icon: "layers" }, { label: "Dimension", icon: "grid-3x3" }] },
-  { label: "Data Join", icon: "text-search", hue: "join", items: [{ label: "Lookup Data", icon: "text-search" }, { label: "Association Match", icon: "shuffle" }] },
-  { label: "Data Transformation", icon: "sliders-horizontal", hue: "transform", items: [{ label: "Field Value Calculation", icon: "sliders-horizontal" }, { label: "Field Split", icon: "split" }, { label: "Row to Column", icon: "arrow-right-left" }, { label: "Column to Row", icon: "menu" }, { label: "Multi-Condition Judge", icon: "funnel" }, { label: "Regional Calculation", icon: "chart-no-axes-column" }, { label: "Advanced Transformation", icon: "trending-up" }, { label: "JS Enhanced Processing", icon: "code" }] },
-  { label: "Data Merge", icon: "database", hue: "merge", items: [{ label: "Group Calculation", icon: "database" }, { label: "Concat Merge", icon: "merge" }] },
-  { label: "Data Output", icon: "table", hue: "output", items: [{ label: "Detail Sheet", icon: "table" }, { label: "Model", icon: "layers" }, { label: "Dimension", icon: "grid-3x3" }] },
-];
+export { PIPELINE_CATALOG };
 
 /** 240px "Components" palette panel with list/grid toggle and collapsible hued categories. */
 export function PalettePanel({ catalog = PIPELINE_CATALOG, height = "100%", onPick, style }) {

package/components/pipeline/PalettePanel.vue

@@ -1,18 +1,11 @@
 <script setup>
 import { ref } from 'vue'
 import Icon from '../icons/Icon.vue'
-import { IconTile } from '../display/Badge.vue'
+import { PIPELINE_CATALOG } from './pipeline-catalog.js'
 import ViewToggle from '../tabs/ViewToggle.vue'
 import PaletteItem from './PaletteItem.vue'
 import PaletteListItem from './PaletteListItem.vue'
 
-export const PIPELINE_CATALOG = [
-  { label: 'Data Source', icon: 'table', hue: 'source', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
-  { label: 'Data Join', icon: 'text-search', hue: 'join', items: [{ label: 'Lookup Data', icon: 'text-search' }, { label: 'Association Match', icon: 'shuffle' }] },
-  { label: 'Data Transformation', icon: 'sliders-horizontal', hue: 'transform', items: [{ label: 'Field Value Calculation', icon: 'sliders-horizontal' }, { label: 'Field Split', icon: 'split' }, { label: 'Row to Column', icon: 'arrow-right-left' }, { label: 'Column to Row', icon: 'menu' }, { label: 'Multi-Condition Judge', icon: 'funnel' }, { label: 'Regional Calculation', icon: 'chart-no-axes-column' }, { label: 'Advanced Transformation', icon: 'trending-up' }, { label: 'JS Enhanced Processing', icon: 'code' }] },
-  { label: 'Data Merge', icon: 'database', hue: 'merge', items: [{ label: 'Group Calculation', icon: 'database' }, { label: 'Concat Merge', icon: 'merge' }] },
-  { label: 'Data Output', icon: 'table', hue: 'output', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
-]
 // 240px "Components" palette panel with list/grid toggle and collapsible hued categories.
 const props = defineProps({ catalog: { type: Array, default: () => PIPELINE_CATALOG }, height: { type: [String, Number], default: '100%' }, style: Object })
 const emit = defineEmits(['pick'])

package/components/pipeline/pipeline-catalog.js

@@ -0,0 +1,8 @@
+// The full component set of the pipeline editor, verbatim from the file. Shared by PalettePanel.vue; also re-exported by PalettePanel.jsx.
+export const PIPELINE_CATALOG = [
+  { label: 'Data Source', icon: 'table', hue: 'source', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
+  { label: 'Data Join', icon: 'text-search', hue: 'join', items: [{ label: 'Lookup Data', icon: 'text-search' }, { label: 'Association Match', icon: 'shuffle' }] },
+  { label: 'Data Transformation', icon: 'sliders-horizontal', hue: 'transform', items: [{ label: 'Field Value Calculation', icon: 'sliders-horizontal' }, { label: 'Field Split', icon: 'split' }, { label: 'Row to Column', icon: 'arrow-right-left' }, { label: 'Column to Row', icon: 'menu' }, { label: 'Multi-Condition Judge', icon: 'funnel' }, { label: 'Regional Calculation', icon: 'chart-no-axes-column' }, { label: 'Advanced Transformation', icon: 'trending-up' }, { label: 'JS Enhanced Processing', icon: 'code' }] },
+  { label: 'Data Merge', icon: 'database', hue: 'merge', items: [{ label: 'Group Calculation', icon: 'database' }, { label: 'Concat Merge', icon: 'merge' }] },
+  { label: 'Data Output', icon: 'table', hue: 'output', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
+]

package/components/tabs/PanelTabs.vue

@@ -0,0 +1,10 @@
+<script setup>
+defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
+const emit = defineEmits(['change'])
+</script>
+<template>
+  <div :style="{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', ...style }">
+    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
+      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '8px 12px', marginBottom: -1, borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--action-primary)' : 'var(--text-secondary)' }">{{ t }}</button>
+  </div>
+</template>

package/components/tabs/PillTabs.vue

@@ -0,0 +1,10 @@
+<script setup>
+defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
+const emit = defineEmits(['change'])
+</script>
+<template>
+  <div :style="{ display: 'flex', gap: 8, ...style }">
+    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
+      :style="{ background: t === active ? 'var(--bg-active)' : 'transparent', border: 'none', cursor: 'pointer', height: 28, padding: '0 11px', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--text-heading)' : 'var(--text-secondary)' }">{{ t }}</button>
+  </div>
+</template>

package/components/tabs/Tabs.vue

@@ -9,31 +9,3 @@ const emit = defineEmits(['change'])
       :style="{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '9px 16px', marginBottom: -1, borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: t === active ? 'var(--action-primary)' : 'var(--text-body)' }">{{ t }}</button>
   </div>
 </template>
-
-<!-- PanelTabs — compact panel tabs (Node Info · Calc Rules · Output Fields · SQL Preview), 12px. -->
-<!--
-<script setup name="PanelTabs">
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
-const emit = defineEmits(['change'])
-</script>
-<template>
-  <div :style="{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', ...style }">
-    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
-      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '8px 12px', marginBottom: -1, borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--action-primary)' : 'var(--text-secondary)' }">{{ t }}</button>
-  </div>
-</template>
--->
-
-<!-- PillTabs — text pill filter tabs (For Review · To be Submitted · For Approval). Active = filled pill. -->
-<!--
-<script setup name="PillTabs">
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
-const emit = defineEmits(['change'])
-</script>
-<template>
-  <div :style="{ display: 'flex', gap: 8, ...style }">
-    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
-      :style="{ background: t === active ? 'var(--bg-active)' : 'transparent', border: 'none', cursor: 'pointer', height: 28, padding: '0 11px', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--text-heading)' : 'var(--text-secondary)' }">{{ t }}</button>
-  </div>
-</template>
--->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Keybricks design system — 334 design tokens and 118 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",

package/readme.md

@@ -148,3 +148,4 @@ These extend the original inventory — each is a standard need this product cle
 - `ZoomControls` — 管道画布的缩放控件；源文件隐含平移/缩放交互，但未给出对应控件。
 - `StatCard`/`Donut`/`ProgressBar`/`AreaChart`/`MiniBars` 内置的图表小工具，免去引入图表库。
 - Token 补充：`tokens/motion.css`、层级（z-index）体系。
+cicd test

package/tokens/alpha.css

@@ -21,7 +21,3 @@
 --neutral-alpha-2:rgba(255,255,255,.02);--neutral-alpha-4:rgba(255,255,255,.04);--neutral-alpha-8:rgba(255,255,255,.08);--neutral-alpha-12:rgba(255,255,255,.12);--neutral-alpha-16:rgba(255,255,255,.16);--neutral-alpha-24:rgba(255,255,255,.24);--neutral-alpha-32:rgba(255,255,255,.32);--neutral-alpha-48:rgba(255,255,255,.48);--neutral-alpha-64:rgba(255,255,255,.64);--neutral-alpha-80:rgba(255,255,255,.8);
 --brand-alpha-8:rgba(43,127,255,.1);--brand-alpha-12:rgba(43,127,255,.14);--brand-alpha-16:rgba(43,127,255,.2);--brand-alpha-24:rgba(43,127,255,.28);--brand-alpha-32:rgba(43,127,255,.36);
 }
-@media (prefers-color-scheme: dark){:root{
---neutral-alpha-2:rgba(255,255,255,.02);--neutral-alpha-4:rgba(255,255,255,.04);--neutral-alpha-8:rgba(255,255,255,.08);--neutral-alpha-12:rgba(255,255,255,.12);--neutral-alpha-16:rgba(255,255,255,.16);--neutral-alpha-24:rgba(255,255,255,.24);--neutral-alpha-32:rgba(255,255,255,.32);--neutral-alpha-48:rgba(255,255,255,.48);--neutral-alpha-64:rgba(255,255,255,.64);--neutral-alpha-80:rgba(255,255,255,.8);
---brand-alpha-8:rgba(43,127,255,.1);--brand-alpha-12:rgba(43,127,255,.14);--brand-alpha-16:rgba(43,127,255,.2);--brand-alpha-24:rgba(43,127,255,.28);--brand-alpha-32:rgba(43,127,255,.36);
-}}

package/tokens/charts.css

@@ -47,9 +47,3 @@
 --chart-heat-1:#162456;--chart-heat-2:#193cb8;--chart-heat-3:#1447e6;--chart-heat-4:#51a2ff;--chart-heat-5:#bedbff;
 --chart-heat-ink:#0a0a0a;
 }
-@media (prefers-color-scheme: dark){:root{
---series-1:#51a2ff;--series-2:var(--teal-300);--series-3:var(--purple-300);--series-4:var(--orange-300);--series-5:var(--emerald-300);--series-6:var(--pink-300);--series-7:var(--cyan-300);--series-8:var(--amber-300);--series-9:var(--red-300);--series-10:var(--neutral-500);
---chart-grid:#1f1f1f;--chart-axis:#3f3f3f;--chart-label:#8f8f8f;--chart-pos:var(--emerald-400);--chart-neg:var(--red-400);--chart-total:var(--neutral-300);--chart-track:#1f1f1f;--chart-guide:#525252;--chart-area-alpha:.22; /* @kind other */
---chart-heat-1:#162456;--chart-heat-2:#193cb8;--chart-heat-3:#1447e6;--chart-heat-4:#51a2ff;--chart-heat-5:#bedbff;
---chart-heat-ink:#0a0a0a;
-}}

package/tokens/colors-extended.css

@@ -37,4 +37,3 @@
 }
 /* Dark theme: deep-tint bg + 300-step fg keeps pills readable on #0a0a0a */
 [data-theme="dark"]{--hue-gray-bg:#262626;--hue-gray-fg:#a1a1a1;--hue-blue-bg:#162456;--hue-blue-fg:#8ec5ff;--hue-green-bg:#00311d;--hue-green-fg:#8adeb3;--hue-orange-bg:#461700;--hue-orange-fg:#ffb798;--hue-amber-bg:#362400;--hue-amber-fg:#ffd280;--hue-teal-bg:#002f2a;--hue-teal-fg:#90d7cc;--hue-cyan-bg:#0b2d33;--hue-cyan-fg:#57daf3;--hue-purple-bg:#35085b;--hue-purple-fg:#d2b3ff;--hue-pink-bg:#460c33;--hue-pink-fg:#ffa4da;--hue-red-bg:#520006;--hue-red-fg:#ffa79f}
-@media (prefers-color-scheme: dark){:root{--hue-gray-bg:#262626;--hue-gray-fg:#a1a1a1;--hue-blue-bg:#162456;--hue-blue-fg:#8ec5ff;--hue-green-bg:#00311d;--hue-green-fg:#8adeb3;--hue-orange-bg:#461700;--hue-orange-fg:#ffb798;--hue-amber-bg:#362400;--hue-amber-fg:#ffd280;--hue-teal-bg:#002f2a;--hue-teal-fg:#90d7cc;--hue-cyan-bg:#0b2d33;--hue-cyan-fg:#57daf3;--hue-purple-bg:#35085b;--hue-purple-fg:#d2b3ff;--hue-pink-bg:#460c33;--hue-pink-fg:#ffa4da;--hue-red-bg:#520006;--hue-red-fg:#ffa79f}}

package/tokens/dark.css

@@ -1,4 +1,7 @@
-/* Keybricks dark theme — apply with <html data-theme="dark">.
+/* Keybricks dark theme — apply with <html data-theme="dark">. To follow the OS, run
+   tokens/theme.js in <head>: it stamps data-theme="dark" when the OS prefers dark and
+   nothing is set. data-theme="light" always forces light. No @media here on purpose —
+   an OS media query in :root cannot be overridden by an attribute.
    The source .fig ships a "Dark Mode" nav item but no dark frames, so these values
    are an original, contrast-tested derivation of the light palette (same hue families).
 
@@ -49,48 +52,3 @@ color-scheme:dark;
 }
 [data-theme="dark"] body{background:var(--bg-app);color:var(--text-primary)}
 [data-theme="dark"] img[src$="keybricks-logo.png"]{filter:none}
-
-@media (prefers-color-scheme: dark){
-:root{
-
-color-scheme:dark;
-/* Surfaces — 4 steps, each ~+6% luminance, so nesting reads without borders */
---bg-app:#0a0a0a;--bg-surface:#161616;--bg-raised:#1d1d1d;--bg-inset:#1f1f1f;--bg-hover:#262626;--bg-active:#2e2e2e;--bg-scrim:rgba(0,0,0,.6);
-/* Text */
---text-primary:#fafafa;--text-heading:#f5f5f5;--text-strong:#e5e5e5;--text-body:#d4d4d4;--text-secondary:#a1a1a1;--text-muted:#737373;--text-inverse:#0a0a0a;
---on-accent:#ffffff;--action-dark-fg:#0a0a0a;
-/* Borders */
---border-card:rgba(255,255,255,.09);--border-control:#333333;--border-subtle:#242424;--border-strong:#454545;
-/* Actions */
---action-primary:#1f6feb;--action-primary-hover:#2b7fff;--action-primary-active:#1a5ec9;--action-dark:#fafafa;--action-dark-hover:#e5e5e5;--action-dark-active:#d4d4d4;
-/* Press (active) fills — one step past the hover value in each family */
---bg-press:#3a3a3a;--soft-active:rgba(43,127,255,.32);--danger-active:#c10007;--danger-soft-active:rgba(251,44,54,.26);
---focus-ring:rgba(43,127,255,.32);--focus-border:#2b7fff;--selected-border:#51a2ff;
---soft-bg:rgba(43,127,255,.14);--soft-border:#2b7fff;--soft-hover:rgba(43,127,255,.24);
---info-bg:rgba(43,127,255,.14);--info-fg:#8ab8ff;
---link:#7cb0ff;--link-hover:#a8caff;
-/* Structure */
---track:#303030;--dot-neutral:#737373;--skeleton:#242424;--checkbox-border:#4a4a4a;
---port-border:#3f3f3f;--dropzone-border:#3a3a3a;--dropzone-border-hover:#525252;
---edge:#4b5563;--chart-blue:#4d93ff;--purple-500:#c07cff;
---tooltip-bg:#f5f5f5;--tooltip-fg:#0a0a0a;
-/* Category hues — glyph lifted for contrast, tile tint becomes a low-alpha wash */
---cat-source:#22c58f;--cat-source-bg:rgba(0,188,125,.16);
---cat-join:#5b9bff;--cat-join-bg:rgba(43,127,255,.16);
---cat-transform:#ff8b3d;--cat-transform-bg:rgba(255,105,0,.16);
---cat-merge:#c07cff;--cat-merge-bg:rgba(152,16,250,.18);
---cat-output:#22bfb2;--cat-output-bg:rgba(0,150,137,.18);
-/* Status — solid dots keep the brand hue; tints/text lift for legibility */
---success:#00bc7d;--success-strong:#22c58f;--success-bg:rgba(0,188,125,.14);--success-text:#4ade9f;
---danger:#fb2c36;--danger-bg:rgba(251,44,54,.14);--danger-text:#ff8085;
---warning:#ffb900;--warning-bg:rgba(255,185,0,.14);--warning-text:#ffc55c;
-/* Elevation reads as a deeper shadow plus a lighter surface, never a glow */
---shadow-node:0 1px 3px 0 rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.5);
---shadow-selected:0 0 0 2px rgba(43,127,255,.32),0 1px 3px 0 rgba(0,0,0,.6);
---shadow-menu:0 4px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
---shadow-modal:0 24px 64px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);
-
-}
-body{background:var(--bg-app);color:var(--text-primary)}
-img[src$="keybricks-logo.png"]{filter:none}
-}

package/tokens/interaction.css

@@ -14,7 +14,6 @@
    Reduced-motion users still get both states — neither is animated. */
 :root{--press-filter:brightness(.94);/* @kind other */--press-filter-strong:brightness(.88)/* @kind other */}
 [data-theme="dark"]{--press-filter:brightness(1.35);/* @kind other */--press-filter-strong:brightness(1.6)/* @kind other */}
-@media (prefers-color-scheme: dark){:root{--press-filter:brightness(1.35);/* @kind other */--press-filter-strong:brightness(1.6)/* @kind other */}}
 
 button:not(:disabled):not([data-press="own"]):active,
 a:active,

package/tokens/theme.js

@@ -0,0 +1,11 @@
+/* Keybricks theme bootstrap — include in <head> BEFORE styles.css to avoid a flash:
+     <script src="@keyfunc/keybricks-ds/tokens/theme.js"></script>
+   Rules: an existing data-theme on <html> always wins ("light" forces light, "dark" forces
+   dark); with none set, the OS preference is stamped as data-theme and tracked live.
+   Your app owns persistence — set data-theme yourself from saved settings before this runs. */
+(function () {
+  var html = document.documentElement, mq = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+  function follow() { if (!html.hasAttribute('data-theme') || html.dataset.themeSource === 'os') { html.setAttribute('data-theme', mq && mq.matches ? 'dark' : 'light'); html.dataset.themeSource = 'os'; } }
+  follow();
+  if (mq && mq.addEventListener) mq.addEventListener('change', follow);
+})();

package/tokens/tokens.d.ts

@@ -1,4 +1,4 @@
-/* Generated from tokens/*.css by scripts/build-tokens.mjs — do not edit by hand. */
+/* Generated from tokens/*.css by _scripts/build-tokens.mjs — do not edit by hand. */
 export type TokenName =
   | "--action-dark"
   | "--action-dark-active"

package/tokens/tokens.js

@@ -1,4 +1,4 @@
-/* Generated from tokens/*.css by scripts/build-tokens.mjs — do not edit by hand.
+/* Generated from tokens/*.css by _scripts/build-tokens.mjs — do not edit by hand.
    cssVar keeps theming live (preferred in components); light/dark are flattened
    literals for canvas, PDF, native and export pipelines. */
 

package/tokens/tokens.json

@@ -1,8 +1,8 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "source": "tokens/*.css",
-  "note": "Generated by scripts/build-tokens.mjs — CSS is the source of truth.",
+  "note": "Generated by _scripts/build-tokens.mjs — CSS is the source of truth.",
   "tokens": {
     "--action-dark": {
       "group": "colors",