@flytedan/flytebot-design-system 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,87 @@
+# @flytedan/flytebot-design-system
+
+The flytedesk Design System's Media Planner UI kit, ported to a standalone,
+framework-agnostic-consumer npm package: React 18 + TypeScript components,
+tokens, and business-logic kits for flytedesk apps.
+
+## Install
+
+```bash
+pnpm add @flytedan/flytebot-design-system
+```
+
+`react` and `react-dom` (^18.3.1) are peer dependencies.
+
+## Usage
+
+Import the vendored CSS once, near your app's entry point, then use components
+directly:
+
+```tsx
+import "@flytedan/flytebot-design-system/styles/tokens.css";
+import "@flytedan/flytebot-design-system/styles/foundations.css";
+import "@flytedan/flytebot-design-system/styles/components.css";
+
+import { Button, Card, DataTable } from "@flytedan/flytebot-design-system";
+
+function Example() {
+  return (
+    <Card>
+      <Button variant="primary">Save</Button>
+    </Card>
+  );
+}
+```
+
+## What's in the package
+
+**32 core components** across seven groups — actions (Button, IconButton,
+SegmentedControl, Popover, Menu, MenuButton), forms (Input, NumberInput,
+Textarea, Select, DatePicker, TimePicker, Checkbox, Radio, Switch, Slider,
+RangeSlider, FileGrid, Dropzone, MarkdownEditor), surfaces (Card, CardRow,
+Collapsible, Modal, Drawer), data (DataTable, Pagination, SortMenu, StatTile,
+Meter, CsiBadge, CsiMeter, CsiHero, Markdown, CodeBlock, DiffBlock, StepList,
+SegmentedMeter, QuotaRow, Clamp, RelativeTime), feedback (Badge, Tag, Avatar,
+AvatarStack, Flag, Toast, Tooltip, EmptyState, KeyHint), loading (Skeleton,
+SkeletonText, LoadingRegion, Spinner, ProgressBar), and navigation (Tabs,
+SidebarNav, Topbar).
+
+**Platform components** for identity/session UI — AccountMenu,
+ApiSpecBrowser, Gate/FeatureGate/PermissionDenied/PermissionHint,
+ProfilePage, ComingSoon, RoadmapTimeline, ModeSwitch/TestModeBar.
+
+**Planner components** for media-planning UIs — SaturationDistribution,
+MixGap, ChannelContribution, SurroundSound, BudgetReallocator, ChannelMeta.
+
+**Chat components** — AgentChatPanel, ChatComposer, ChatSessionBar,
+ChatTranscript, ChatTurn, chatEngine.
+
+**Business-logic kits** (framework-light, no UI) — SessionKit (roles,
+permissions, feature flags), QueryKit (paged/sorted/filtered list state via
+`useServerTable`), RuntimeKit (feature-completeness/live-vs-test derivation),
+FileKit, MockJobKit (`{ jobId } → poll` async job simulation), VersionKit
+(append-only version history stores).
+
+Every export has its own documented page — props transcribed from the real
+TypeScript interfaces, a live interactive example, and a usage snippet — in
+the docs site included in this repo (not yet published as a hosted site):
+
+```bash
+git clone git@github.com:flytedan/flytebot-design-system.git
+cd flytebot-design-system
+pnpm install
+pnpm run docs
+```
+
+## Development
+
+```bash
+pnpm run build       # tsup — emits dist/{index.js,index.cjs,index.d.ts}
+pnpm run typecheck   # tsc --noEmit
+pnpm run lint        # eslint .
+pnpm run test        # vitest run
+```
+
+## License
+
+UNLICENSED — internal flytedesk use only.

package/dist/index.cjs

@@ -2195,7 +2195,8 @@ function SegmentedMeter({
   const pct = safeTotal ? Math.min(100, Math.round(used / safeTotal * 100)) : 0;
   const w = (v) => safeTotal ? Math.max(0, Math.min(100, Number(v) / safeTotal * 100)) : 0;
   const fill = (s, i) => s.color || (s.variant ? VARIANT_FILL[s.variant] : void 0) || CHART[i % CHART.length];
-  const uid2 = React11.useId ? React11.useId() : id || "segmeter";
+  const generatedId = React11.useId();
+  const uid2 = id || generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: ["fd-segmeter", className].filter(Boolean).join(" "), onClick, children: [
     label || showTotal ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fd-segmeter-head", children: [
       label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fd-segmeter-label", id: uid2 + "-l", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {}),
@@ -3489,6 +3490,36 @@ function RangeSlider({
   className = "",
   ...rest
 }) {
+  const fmt2 = format || ((v) => String(v));
+  const [a, b] = value || [min, max];
+  const [drag, setDrag] = React20.useState(null);
+  const [focus, setFocus] = React20.useState(null);
+  const railRef = React20.useRef(null);
+  const pct = (v) => max === min ? 0 : (v - min) / (max - min) * 100;
+  const clampPair = (i, v) => {
+    v = Math.min(max, Math.max(min, Math.round(v / step) * step));
+    if (snap && marks.length) {
+      const near = marks.reduce((best, m) => Math.abs(m.value - v) < Math.abs(best - v) ? m.value : best, Infinity);
+      if (Math.abs(near - v) <= (max - min) * 0.015) v = near;
+    }
+    const pair = i === 0 ? [Math.min(v, b - minGap), b] : [a, Math.max(v, a + minGap)];
+    return pair;
+  };
+  const fromEvent = (e) => {
+    const r = railRef.current.getBoundingClientRect();
+    return min + Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * (max - min);
+  };
+  React20.useEffect(() => {
+    if (drag === null) return;
+    const mv = (e) => onChange && onChange(clampPair(drag, fromEvent(e)));
+    const upH = () => setDrag(null);
+    window.addEventListener("pointermove", mv);
+    window.addEventListener("pointerup", upH);
+    return () => {
+      window.removeEventListener("pointermove", mv);
+      window.removeEventListener("pointerup", upH);
+    };
+  }, [drag, a, b]);
   if (stops && stops.length > 1) {
     const S = stops.map((s) => typeof s === "object" ? s : { value: s });
     const num = (v) => v === Infinity || v == null ? Number.MAX_SAFE_INTEGER : v;
@@ -3517,25 +3548,6 @@ function RangeSlider({
       }
     );
   }
-  const fmt2 = format || ((v) => String(v));
-  const [a, b] = value || [min, max];
-  const [drag, setDrag] = React20.useState(null);
-  const [focus, setFocus] = React20.useState(null);
-  const railRef = React20.useRef(null);
-  const pct = (v) => max === min ? 0 : (v - min) / (max - min) * 100;
-  const clampPair = (i, v) => {
-    v = Math.min(max, Math.max(min, Math.round(v / step) * step));
-    if (snap && marks.length) {
-      const near = marks.reduce((best, m) => Math.abs(m.value - v) < Math.abs(best - v) ? m.value : best, Infinity);
-      if (Math.abs(near - v) <= (max - min) * 0.015) v = near;
-    }
-    const pair = i === 0 ? [Math.min(v, b - minGap), b] : [a, Math.max(v, a + minGap)];
-    return pair;
-  };
-  const fromEvent = (e) => {
-    const r = railRef.current.getBoundingClientRect();
-    return min + Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * (max - min);
-  };
   const startDrag = (i) => (e) => {
     e.preventDefault();
     e.target.setPointerCapture && e.target.setPointerCapture(e.pointerId);
@@ -3547,17 +3559,6 @@ function RangeSlider({
     onChange && onChange(clampPair(i, v));
     setDrag(i);
   };
-  React20.useEffect(() => {
-    if (drag === null) return;
-    const mv = (e) => onChange && onChange(clampPair(drag, fromEvent(e)));
-    const upH = () => setDrag(null);
-    window.addEventListener("pointermove", mv);
-    window.addEventListener("pointerup", upH);
-    return () => {
-      window.removeEventListener("pointermove", mv);
-      window.removeEventListener("pointerup", upH);
-    };
-  }, [drag, a, b]);
   const key = (i) => (e) => {
     const big = (max - min) / 10;
     let d = 0;