@mechane-ai/ui 0.2.2 → 0.3.0

package/dist/tokens.js

@@ -1,84 +1,138 @@
 import "@stylexjs/stylex";
-// src/tokens.stylex.ts
+// packages/core/src/tokens.stylex.ts
 var e = {
-	canvas: "var(--x1nqxagb)",
-	surface: "var(--x1kupdtt)",
-	ink: "var(--x15p3jnv)",
-	inkHover: "var(--xhixglo)",
-	inverse: "var(--x1flvyz4)",
-	muted: "var(--xpd4v19)",
-	faint: "var(--xm6oem5)",
-	line: "var(--x1glhyjp)",
-	focus: "var(--x1p3cbpj)",
-	accent: "var(--xvee6di)",
-	accentSoft: "var(--xnwsrbi)",
-	warning: "var(--x40kjqr)",
-	warningSoft: "var(--xe3cigw)",
-	danger: "var(--xp9kirc)",
-	dangerHover: "var(--xg0vt9w)",
-	dangerSoft: "var(--xd94q93)",
-	overlay: "var(--xq6u5jv)",
-	__varGroupHash__: "xr1g0yw"
+	canvas: "var(--x1p5ljr5)",
+	surface: "var(--x1iul49q)",
+	ink: "var(--x1ddc8ia)",
+	inkHover: "var(--x1x6tgui)",
+	inverse: "var(--x1rqljb7)",
+	muted: "var(--x1r2a105)",
+	faint: "var(--x1thxymv)",
+	line: "var(--xaq9kgs)",
+	focus: "var(--xb56ywx)",
+	accent: "var(--x1fhu0w4)",
+	accentSoft: "var(--xb9yz18)",
+	warning: "var(--xhs0ahb)",
+	warningSoft: "var(--xymeuv6)",
+	danger: "var(--xdta076)",
+	dangerHover: "var(--xuxhvo8)",
+	dangerSoft: "var(--x1ml5xie)",
+	overlay: "var(--x392hfm)",
+	__varGroupHash__: "x5xsh35"
 }, t = {
-	xxs: "var(--xy2rqe2)",
-	xs: "var(--xrcifeq)",
-	sm: "var(--x1chpkuu)",
-	md: "var(--x2v3yb5)",
-	lg: "var(--xyf8nzo)",
-	xl: "var(--x1puc1tu)",
-	xxl: "var(--x1nlsusz)",
-	__varGroupHash__: "xnjkq85"
+	canvas: "#191919",
+	surface: "#101010",
+	ink: "#f2f2f2",
+	inkHover: "#d6d6d6",
+	inverse: "#0a0a0a",
+	muted: "#b0b0b0",
+	faint: "#777777",
+	line: "#303030",
+	focus: "#79b3ff",
+	accent: "#8ed3b3",
+	accentSoft: "#152b22",
+	warning: "#edc479",
+	warningSoft: "#302511",
+	danger: "#f59696",
+	dangerHover: "#ffc3c3",
+	dangerSoft: "#321c1c",
+	overlay: "#00000099"
 }, n = {
-	fontFamily: "var(--x1m9j3x4)",
-	monoFamily: "var(--xekxf36)",
-	bodySize: "var(--x1pe3ll1)",
-	bodyLineHeight: "var(--x1o4ziua)",
-	captionSize: "var(--x1mwsp88)",
-	captionLineHeight: "var(--x10r02xe)",
-	inputSize: "var(--x14ocyhu)",
-	touchInputSize: "var(--x1cbkt0e)",
-	sectionSize: "var(--x12rnewd)",
-	sectionLineHeight: "var(--x13tj69x)",
-	headingSize: "var(--x1x4emdg)",
-	headingLineHeight: "var(--x1c3nks6)",
-	compactHeadingSize: "var(--x1p83npe)",
-	compactHeadingLineHeight: "var(--xntw5c)",
-	headingTracking: "var(--xau97yy)",
-	__varGroupHash__: "x19k47ix"
+	series1: "var(--xdugh9o)",
+	series2: "var(--x1lv4932)",
+	series3: "var(--x1dsmilu)",
+	series4: "var(--x1u57klv)",
+	series5: "var(--xrcytu5)",
+	series6: "var(--x1xhcb4q)",
+	negative: "var(--xdt1vx)",
+	positive: "var(--x1u7028u)",
+	missing: "var(--x1ir1a9y)",
+	__varGroupHash__: "xqaa8if"
 }, r = {
-	smHeight: "var(--xauqmbp)",
-	mdHeight: "var(--x1ngx1aq)",
-	coarseTarget: "var(--xobaqj)",
-	iconSize: "var(--x9pj4p9)",
-	paddingInline: "var(--x143qv1u)",
-	gap: "var(--x17iw6mo)",
-	focusWidth: "var(--xb4pdys)",
-	disabledOpacity: "var(--x1qtwr64)",
-	__varGroupHash__: "x1w6w4x"
+	series1: "#86a9d3",
+	series2: "#83b69f",
+	series3: "#b49bce",
+	series4: "#cfad70",
+	series5: "#80bbc0",
+	series6: "#d39aad",
+	negative: "#e0929b",
+	positive: "#80add0",
+	missing: "#363636"
 }, i = {
-	sm: "var(--xlsahia)",
-	md: "var(--xmydd8r)",
-	__varGroupHash__: "x1rar5af"
+	keyword: "var(--xwg0knh)",
+	string: "var(--x16fvter)",
+	comment: "var(--x1bg0sel)",
+	number: "var(--x167s6ci)",
+	type: "var(--xhxiua2)",
+	__varGroupHash__: "x1bply03"
 }, a = {
-	duration: "var(--x1a2hahs)",
-	easing: "var(--xp4majk)",
-	drawerDuration: "var(--xf96llh)",
-	drawerEasing: "var(--x1gpifc1)",
-	__varGroupHash__: "xrhtzqn"
+	keyword: "#c4a1e5",
+	string: "#8ed3b3",
+	comment: "#a3a3a3",
+	number: "#edc479",
+	type: "#84bce3"
 }, o = {
-	popup: "var(--xj28h13)",
-	__varGroupHash__: "x1o10zac"
+	xxs: "var(--x5efp78)",
+	xs: "var(--xm9w62g)",
+	sm: "var(--xhjdjxv)",
+	md: "var(--xabgw61)",
+	lg: "var(--x1t7j008)",
+	xl: "var(--x5ylzws)",
+	xxl: "var(--x16yrdb4)",
+	__varGroupHash__: "xq3sq5v"
 }, s = {
+	fontFamily: "var(--xdch1se)",
+	monoFamily: "var(--x10841uf)",
+	bodySize: "var(--xczx5o2)",
+	bodyLineHeight: "var(--xb4mn4r)",
+	multilineLineHeight: "var(--x1dp0fmv)",
+	captionSize: "var(--xtzlta7)",
+	captionLineHeight: "var(--xnqcrj8)",
+	inputSize: "var(--xj235h0)",
+	touchInputSize: "var(--xfe0sjy)",
+	sectionSize: "var(--xlqfq8k)",
+	sectionLineHeight: "var(--x4mw7ow)",
+	headingSize: "var(--xu1nwjt)",
+	headingLineHeight: "var(--x1fhdqma)",
+	compactHeadingSize: "var(--xo2rde7)",
+	compactHeadingLineHeight: "var(--x1qggawv)",
+	headingTracking: "var(--x10p9l8w)",
+	__varGroupHash__: "xf7ylh"
+}, c = {
+	smHeight: "var(--x1zt73f)",
+	mdHeight: "var(--x1ygnwra)",
+	coarseTarget: "var(--xcaafs3)",
+	iconSize: "var(--xcl94oi)",
+	paddingInline: "var(--xgwbosp)",
+	paddingBlock: "var(--x7kb0k)",
+	gap: "var(--xn6vahv)",
+	focusWidth: "var(--xx2fo7a)",
+	disabledOpacity: "var(--xgf2hii)",
+	__varGroupHash__: "x1o9jrcc"
+}, l = {
+	sm: "var(--xeybq7s)",
+	md: "var(--xjx9mcg)",
+	__varGroupHash__: "xfef9vy"
+}, u = {
+	duration: "var(--x1rw7vk8)",
+	easing: "var(--x1tsnwv7)",
+	drawerDuration: "var(--xadr6vu)",
+	drawerEasing: "var(--x1v2dj04)",
+	__varGroupHash__: "x1bapadp"
+}, d = {
+	popup: "var(--x18p2rfb)",
+	__varGroupHash__: "x19a6d3u"
+}, f = { popup: "0 4px 16px #00000066" }, p = {
 	backdrop: "20",
 	dialog: "21",
 	popup: "30",
 	tooltip: "40",
 	skipLink: "50"
-}, c = {
+}, m = {
 	coarsePointer: "@media (pointer: coarse)",
 	hoverPointer: "@media (hover: hover) and (pointer: fine)",
 	compactText: "@media (max-width:639px)",
 	compactTable: "@media (max-width:600px)",
 	reducedMotion: "@media (prefers-reduced-motion: reduce)"
 };
-export { e as colors, c as conditions, r as controls, s as layers, a as motion, i as radii, o as shadows, t as spacing, n as typography };
+export { n as chartColors, e as colors, m as conditions, c as controls, r as darkChartColors, t as darkColors, f as darkShadows, a as darkSyntaxColors, p as layers, u as motion, l as radii, d as shadows, o as spacing, i as syntaxColors, s as typography };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mechane-ai/ui",
-  "version": "0.2.2",
-  "description": "Mechane UI components, tokens, application layouts, and charts",
+  "version": "0.3.0",
+  "description": "Mechane controls, content, AI interfaces, application layouts, and charts",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -10,7 +10,7 @@
   },
   "files": [
     "dist",
-    "src/tokens.stylex.ts",
+    "packages/core/src/tokens.stylex.ts",
     "styles.css",
     "README.md",
     "LICENSE",
@@ -22,30 +22,87 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/packages/core/src/index.d.ts",
       "import": "./dist/index.js"
     },
     "./tokens": {
-      "types": "./dist/tokens.stylex.d.ts",
+      "types": "./dist/packages/core/src/tokens.stylex.d.ts",
       "import": "./dist/tokens.js"
     },
-    "./tokens.stylex": "./src/tokens.stylex.ts",
+    "./tokens.stylex": "./packages/core/src/tokens.stylex.ts",
     "./layout": {
-      "types": "./dist/layout/index.d.ts",
+      "types": "./dist/packages/layout/src/index.d.ts",
       "import": "./dist/layout.js"
     },
+    "./collections": {
+      "types": "./dist/packages/collections/src/index.d.ts",
+      "import": "./dist/collections.js"
+    },
+    "./content": {
+      "types": "./dist/packages/content/src/index.d.ts",
+      "import": "./dist/content.js"
+    },
+    "./content/code": {
+      "types": "./dist/packages/content/src/code/index.d.ts",
+      "import": "./dist/content/code.js"
+    },
+    "./content/diff": {
+      "types": "./dist/packages/content/src/diff/index.d.ts",
+      "import": "./dist/content/diff.js"
+    },
+    "./content/tree": {
+      "types": "./dist/packages/content/src/tree/index.d.ts",
+      "import": "./dist/content/tree.js"
+    },
+    "./ai": {
+      "types": "./dist/packages/ai/src/index.d.ts",
+      "import": "./dist/ai.js"
+    },
     "./charts": {
-      "types": "./dist/charts/index.d.ts",
+      "types": "./dist/packages/charts/src/index.d.ts",
       "import": "./dist/charts.js"
     },
-    "./styles.css": "./styles.css"
+    "./charts/cartesian": {
+      "types": "./dist/packages/charts/src/cartesian/index.d.ts",
+      "import": "./dist/charts/cartesian.js"
+    },
+    "./charts/distribution": {
+      "types": "./dist/packages/charts/src/distribution/index.d.ts",
+      "import": "./dist/charts/distribution.js"
+    },
+    "./charts/matrix": {
+      "types": "./dist/packages/charts/src/matrix/index.d.ts",
+      "import": "./dist/charts/matrix.js"
+    },
+    "./charts/graph": {
+      "types": "./dist/packages/charts/src/graph/index.d.ts",
+      "import": "./dist/charts/graph.js"
+    },
+    "./styles.css": "./styles.css",
+    "./content/link": {
+      "types": "./dist/packages/content/src/link.d.ts",
+      "import": "./dist/content/link.js"
+    }
   },
   "dependencies": {
     "@base-ui/react": "1.9.0",
+    "@daypicker/react": "10.0.2",
+    "@pierre/diffs": "1.6.4",
+    "@pierre/highlights": "0.4.0",
+    "@pierre/theme": "1.1.0",
+    "@pierre/trees": "1.0.0-beta.6",
+    "@shadcn/react": "0.3.1",
     "@stylexjs/stylex": "0.19.1",
+    "@tanstack/react-hotkeys": "0.22.0",
+    "@tanstack/react-table": "9.3.1",
+    "@tanstack/react-virtual": "3.14.26",
+    "@visx/hierarchy": "4.0.0",
     "@visx/scale": "4.0.0",
     "@visx/shape": "4.0.0",
-    "lucide-react": "1.66.0"
+    "lucide-react": "1.66.0",
+    "react-resizable-panels": "4.18.0",
+    "streamdown": "2.7.1",
+    "strip-ansi": "7.2.0"
   },
   "peerDependencies": {
     "react": "^19.3.1",

package/{src → packages/core/src}/tokens.stylex.ts

@@ -20,6 +20,66 @@ export const colors = stylex.defineVars({
   overlay: '#00000066',
 });
 
+export const darkColors = stylex.defineConsts({
+  canvas: '#191919',
+  surface: '#101010',
+  ink: '#f2f2f2',
+  inkHover: '#d6d6d6',
+  inverse: '#0a0a0a',
+  muted: '#b0b0b0',
+  faint: '#777777',
+  line: '#303030',
+  focus: '#79b3ff',
+  accent: '#8ed3b3',
+  accentSoft: '#152b22',
+  warning: '#edc479',
+  warningSoft: '#302511',
+  danger: '#f59696',
+  dangerHover: '#ffc3c3',
+  dangerSoft: '#321c1c',
+  overlay: '#00000099',
+});
+
+export const chartColors = stylex.defineVars({
+  series1: '#5178a8',
+  series2: '#568b76',
+  series3: '#9077ac',
+  series4: '#b18843',
+  series5: '#4f9296',
+  series6: '#ac7186',
+  negative: '#b95d66',
+  positive: '#46799f',
+  missing: '#e7e7e7',
+});
+
+export const darkChartColors = stylex.defineConsts({
+  series1: '#86a9d3',
+  series2: '#83b69f',
+  series3: '#b49bce',
+  series4: '#cfad70',
+  series5: '#80bbc0',
+  series6: '#d39aad',
+  negative: '#e0929b',
+  positive: '#80add0',
+  missing: '#363636',
+});
+
+export const syntaxColors = stylex.defineVars({
+  keyword: '#785ba1',
+  string: '#21684f',
+  comment: '#626262',
+  number: '#754c00',
+  type: '#1c628f',
+});
+
+export const darkSyntaxColors = stylex.defineConsts({
+  keyword: '#c4a1e5',
+  string: '#8ed3b3',
+  comment: '#a3a3a3',
+  number: '#edc479',
+  type: '#84bce3',
+});
+
 export const spacing = stylex.defineVars({
   xxs: '2px',
   xs: '4px',
@@ -35,6 +95,7 @@ export const typography = stylex.defineVars({
   monoFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
   bodySize: '13px',
   bodyLineHeight: '20px',
+  multilineLineHeight: '1.6',
   captionSize: '12px',
   captionLineHeight: '18px',
   inputSize: '14px',
@@ -54,6 +115,7 @@ export const controls = stylex.defineVars({
   coarseTarget: '44px',
   iconSize: '16px',
   paddingInline: '10px',
+  paddingBlock: '7px',
   gap: '6px',
   focusWidth: '2px',
   disabledOpacity: '0.45',
@@ -70,6 +132,8 @@ export const motion = stylex.defineVars({
 
 export const shadows = stylex.defineVars({ popup: '0 4px 16px #00000014' });
 
+export const darkShadows = stylex.defineConsts({ popup: '0 4px 16px #00000066' });
+
 export const layers = stylex.defineConsts({ backdrop: '20', dialog: '21', popup: '30', tooltip: '40', skipLink: '50' });
 
 export const conditions = stylex.defineConsts({

package/dist/charts/index.d.ts

@@ -1,2 +0,0 @@
-export { Waterfall } from './waterfall.tsx';
-export type { WaterfallItem } from './waterfall.tsx';

package/dist/index.d.ts

@@ -1,16 +0,0 @@
-export { Button, IconButton, TextButton, TextLink } from './actions.tsx';
-export { Badge, Heading, Identifier, Muted, Prose, Status, Subheading, Text } from './text.tsx';
-export { Field, Input, Textarea } from './forms.tsx';
-export { Select } from './select.tsx';
-export { Dialog } from './dialog.tsx';
-export { Drawer } from './drawer.tsx';
-export { Tooltip } from './tooltip.tsx';
-export { Columns, Divider, EmptyState, Notice, Panel, Row, Stack } from './surfaces.tsx';
-export { ListFooter } from './list-footer.tsx';
-export { Cell, Table } from './table.tsx';
-export { Metric, MetricGrid } from './metrics.tsx';
-export { CopyValue } from './copy-value.tsx';
-export { Loading } from './loading.tsx';
-export { Tabs } from './tabs.tsx';
-export { Inspector, Details } from './inspector.tsx';
-export { SkipLink } from './skip-link.tsx';