@keyfunc/keybricks-ds 1.0.2 → 1.0.4

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/SegmentedControl.d.ts

@@ -1,11 +1,18 @@
 import * as React from "react";
-/** Inset segmented control with a raised active segment. Addition — not in the source file. */
+/** Inset segmented control with a raised active segment — switches views of the same data, applies instantly. ← → move between enabled segments. */
 export interface SegmentedControlProps {
-  /** Plain labels, or {label, icon} entries */
-  options?: (string | { label: string; icon?: string })[];
+  /** Plain labels, or { label, icon?, disabled? } entries. Value is matched by label. */
+  options?: (string | { label: string; icon?: string; disabled?: boolean })[];
   value?: string;
   onChange?: (value: string) => void;
+  /** md 32px (default) · sm 26px */
   size?: "sm" | "md";
+  /** Hide labels; each label becomes the segment's aria-label and tooltip */
+  iconOnly?: boolean;
+  /** Greys the whole control */
+  disabled?: boolean;
+  /** Stretch to the container, segments share the width evenly */
+  fullWidth?: boolean;
   style?: React.CSSProperties;
 }
 export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;

package/components/tabs/SegmentedControl.jsx

@@ -1,18 +1,33 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Segmented control — inset track, raised active segment. options: string[] or [{label,icon}]. */
-export function SegmentedControl({ options = [], value, onChange, size = "md", style }) {
+/**
+ * Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
+ * options: string[] | { label, icon?, disabled? }[]   value/onChange by label
+ * size "md" (32) | "sm" (26) · iconOnly hides labels (label becomes aria-label / title)
+ * disabled greys the whole control · fullWidth stretches segments evenly
+ * Keyboard: ← → move between enabled segments.
+ */
+export function SegmentedControl({ options = [], value, onChange, size = "md", iconOnly, disabled, fullWidth, style }) {
   const h = size === "sm" ? 26 : 32;
+  const opts = options.map((o) => (typeof o === "string" ? { label: o } : o));
+  const enabled = opts.filter((o) => !o.disabled);
+  const onKey = (e) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" || disabled || !enabled.length) return;
+    e.preventDefault();
+    const i = enabled.findIndex((o) => o.label === value);
+    const n = e.key === "ArrowRight" ? enabled[(i + 1) % enabled.length] : enabled[(i - 1 + enabled.length) % enabled.length];
+    onChange && onChange(n.label);
+  };
   return (
-    <div style={{ display: "inline-flex", padding: 2, gap: 2, background: "var(--bg-inset)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxSizing: "border-box", ...style }}>
-      {options.map((o) => {
-        const label = typeof o === "string" ? o : o.label;
-        const is = value === label;
+    <div role="tablist" aria-disabled={disabled || undefined} onKeyDown={onKey} style={{ display: fullWidth ? "flex" : "inline-flex", padding: 2, gap: 2, background: "var(--bg-inset)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxSizing: "border-box", opacity: disabled ? .5 : 1, ...style }}>
+      {opts.map((o) => {
+        const is = value === o.label, off = disabled || o.disabled;
         return (
-          <button key={label} type="button" onClick={() => onChange && onChange(label)}
-            style={{ height: h - 6, padding: "0 10px", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: "pointer", background: is ? "var(--bg-surface)" : "transparent", boxShadow: is ? "0 1px 2px rgba(0,0,0,.08)" : "none", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", color: is ? "var(--text-heading)" : "var(--text-secondary)", whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
-            {typeof o === "object" && o.icon ? <Icon name={o.icon} size={13} /> : null}{label}
+          <button key={o.label} type="button" role="tab" aria-selected={is} aria-label={iconOnly ? o.label : undefined} title={iconOnly ? o.label : undefined} disabled={off} tabIndex={is ? 0 : -1}
+            onClick={() => !off && onChange && onChange(o.label)}
+            style={{ height: h - 6, padding: iconOnly ? "0 8px" : "0 10px", flex: fullWidth ? 1 : "none", justifyContent: "center", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: off ? "not-allowed" : "pointer", background: is ? "var(--bg-surface)" : "transparent", boxShadow: is ? "0 1px 2px rgba(0,0,0,.08)" : "none", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", color: is ? "var(--text-heading)" : "var(--text-secondary)", opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
+            {o.icon ? <Icon name={o.icon} size={13} /> : null}{iconOnly ? null : o.label}
           </button>
         );
       })}

package/components/tabs/SegmentedControl.vue

@@ -1,15 +1,27 @@
 <script setup>
+import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Segmented control — inset track, raised active segment. options: string[] or [{label,icon}].
-const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: { type: String, default: 'md' }, style: Object })
+// Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
+// options: string[] | { label, icon?, disabled? }[] · v-model by label · size md (32) | sm (26)
+// iconOnly hides labels (label → aria-label/title) · disabled greys the control · fullWidth stretches segments · ← → keyboard.
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: { type: String, default: 'md' }, iconOnly: Boolean, disabled: Boolean, fullWidth: Boolean, style: Object })
 const emit = defineEmits(['update:modelValue'])
-function label(o) { return typeof o === 'string' ? o : o.label }
+const opts = computed(() => props.options.map(o => typeof o === 'string' ? { label: o } : o))
+const enabled = computed(() => opts.value.filter(o => !o.disabled))
+const h = computed(() => props.size === 'sm' ? 26 : 32)
+const pick = (o) => { if (!(props.disabled || o.disabled)) emit('update:modelValue', o.label) }
+function onKey(e) {
+  if ((e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') || props.disabled || !enabled.value.length) return
+  e.preventDefault()
+  const i = enabled.value.findIndex(o => o.label === props.modelValue), n = enabled.value.length
+  emit('update:modelValue', (e.key === 'ArrowRight' ? enabled.value[(i + 1) % n] : enabled.value[(i - 1 + n) % n]).label)
+}
 </script>
 <template>
-  <div :style="{ display: 'inline-flex', padding: 2, gap: 2, background: 'var(--bg-inset)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box', ...style }">
-    <button v-for="o in options" :key="label(o)" type="button" @click="emit('update:modelValue', label(o))"
-      :style="{ height: (size === 'sm' ? 26 : 32) - 6, padding: '0 10px', display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 'var(--radius-sm)', border: 'none', cursor: 'pointer', background: modelValue === label(o) ? 'var(--bg-surface)' : 'transparent', boxShadow: modelValue === label(o) ? '0 1px 2px rgba(0,0,0,.08)' : 'none', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', color: modelValue === label(o) ? 'var(--text-heading)' : 'var(--text-secondary)', whiteSpace: 'nowrap', transition: 'var(--t-hover)' }">
-      <Icon v-if="typeof o === 'object' && o.icon" :name="o.icon" :size="13" />{{ label(o) }}
+  <div role="tablist" :aria-disabled="disabled || undefined" @keydown="onKey" :style="{ display: fullWidth ? 'flex' : 'inline-flex', padding: '2px', gap: '2px', background: 'var(--bg-inset)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box', opacity: disabled ? .5 : 1, ...style }">
+    <button v-for="o in opts" :key="o.label" type="button" role="tab" :aria-selected="modelValue === o.label" :aria-label="iconOnly ? o.label : undefined" :title="iconOnly ? o.label : undefined" :disabled="disabled || o.disabled" :tabindex="modelValue === o.label ? 0 : -1" @click="pick(o)"
+      :style="{ height: (h - 6) + 'px', padding: iconOnly ? '0 8px' : '0 10px', flex: fullWidth ? 1 : 'none', justifyContent: 'center', display: 'inline-flex', alignItems: 'center', gap: '6px', borderRadius: 'var(--radius-sm)', border: 'none', cursor: (disabled || o.disabled) ? 'not-allowed' : 'pointer', background: modelValue === o.label ? 'var(--bg-surface)' : 'transparent', boxShadow: modelValue === o.label ? '0 1px 2px rgba(0,0,0,.08)' : 'none', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', color: modelValue === o.label ? 'var(--text-heading)' : 'var(--text-secondary)', opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: 'nowrap', transition: 'var(--t-hover)' }">
+      <Icon v-if="o.icon" :name="o.icon" :size="13" /><template v-if="!iconOnly">{{ o.label }}</template>
     </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/components/tabs/tabs.prompt.md

@@ -7,8 +7,10 @@ Tab systems: `Tabs` (13px underline — page level), `PanelTabs` (12px underline
 <ViewToggle value={view} onChange={setView}/>
 ```
 
-`SegmentedControl` (addition) for view/range switches:
+`SegmentedControl` (addition) for view/range switches — same data, instant; never a saved value and never page navigation. `iconOnly`, per-option `disabled`, `fullWidth`:
 
 ```jsx
 <SegmentedControl options={[{label:"List",icon:"list"},{label:"Grid",icon:"layout-grid"}]} value={v} onChange={setV}/>
+<SegmentedControl iconOnly options={[{icon:"table",label:"Table"},{icon:"chart-column",label:"Chart"}]} value={m} onChange={setM}/>
+<SegmentedControl fullWidth options={["Overview","Details","History"]} value={t} onChange={setT}/>
 ```

package/package.json

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

package/tokens/tokens.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "source": "tokens/*.css",
   "note": "Generated by _scripts/build-tokens.mjs — CSS is the source of truth.",
   "tokens": {