@mechane-ai/elements 0.0.0-stage → 0.4.1

package/dist/style-composition-uYlczSsB.js

@@ -0,0 +1,9 @@
+import { mergeProps as e } from "@base-ui/react/merge-props";
+// packages/foundations/src/style-composition.ts
+function t({ className: t, style: n, styles: r }) {
+	return {
+		className: (n) => typeof t == "function" ? e(r, { className: t(n) }).className : e(r, { className: t }).className,
+		style: (t) => typeof n == "function" ? e(r, { style: n(t) }).style : e(r, { style: n }).style
+	};
+}
+export { t };

package/dist/theme.js

@@ -0,0 +1,7 @@
+import "@stylexjs/stylex";
+// packages/foundations/src/theme.ts
+var e = {
+	light: { className: "xbixft x19aimcq" },
+	dark: { className: "xbixft xntwwlm x12671sc xm90lv7 xuezpbh x102x4ow xqsppe0 x181h4q1 x8g9w8d x1e8hs47" }
+};
+export { e as themeProps };

package/dist/tokens.js

@@ -0,0 +1,138 @@
+import "@stylexjs/stylex";
+// packages/foundations/src/tokens.stylex.ts
+var e = {
+	canvas: "var(--x7wqmh8)",
+	surface: "var(--x13kja51)",
+	ink: "var(--x169lqhw)",
+	inkHover: "var(--x1umbgym)",
+	inverse: "var(--x1m6gvuh)",
+	muted: "var(--x24btp3)",
+	faint: "var(--x1x21x07)",
+	line: "var(--xe11pje)",
+	focus: "var(--xzqn2nu)",
+	accent: "var(--x1mu3en6)",
+	accentSoft: "var(--x197nfi7)",
+	warning: "var(--x17jbh5p)",
+	warningSoft: "var(--xpslqxl)",
+	danger: "var(--x5peq9z)",
+	dangerHover: "var(--xo9v4xm)",
+	dangerSoft: "var(--x1im53j)",
+	overlay: "var(--x1i8t5sg)",
+	__varGroupHash__: "xm90lv7"
+}, t = {
+	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 = {
+	series1: "var(--x1nlt3ga)",
+	series2: "var(--x5yb4il)",
+	series3: "var(--x3s82iy)",
+	series4: "var(--x1t7wf97)",
+	series5: "var(--x13umt8e)",
+	series6: "var(--x1f0bn7f)",
+	negative: "var(--xiumgsg)",
+	positive: "var(--x1l35zjm)",
+	missing: "var(--x5dm89x)",
+	__varGroupHash__: "x102x4ow"
+}, r = {
+	series1: "#86a9d3",
+	series2: "#83b69f",
+	series3: "#b49bce",
+	series4: "#cfad70",
+	series5: "#80bbc0",
+	series6: "#d39aad",
+	negative: "#e0929b",
+	positive: "#80add0",
+	missing: "#363636"
+}, i = {
+	keyword: "var(--x1t6rq9)",
+	string: "var(--x1pa6z6o)",
+	comment: "var(--x4crkt3)",
+	number: "var(--x1ih6ezv)",
+	type: "var(--x1gibtqd)",
+	__varGroupHash__: "x181h4q1"
+}, a = {
+	keyword: "#c4a1e5",
+	string: "#8ed3b3",
+	comment: "#a3a3a3",
+	number: "#edc479",
+	type: "#84bce3"
+}, o = {
+	xxs: "var(--xjighox)",
+	xs: "var(--x1xijsos)",
+	sm: "var(--xxhyxt)",
+	md: "var(--x1drqizm)",
+	lg: "var(--x1qq5i99)",
+	xl: "var(--x1iwxfi2)",
+	xxl: "var(--x153fiic)",
+	__varGroupHash__: "xi13snk"
+}, s = {
+	fontFamily: "var(--xax3y77)",
+	monoFamily: "var(--xntcpct)",
+	bodySize: "var(--x105xqs)",
+	bodyLineHeight: "var(--x1eh4a5a)",
+	multilineLineHeight: "var(--x1kk28mq)",
+	captionSize: "var(--xobsf79)",
+	captionLineHeight: "var(--xdvbmuj)",
+	inputSize: "var(--x1af0fv0)",
+	touchInputSize: "var(--x18ymnwu)",
+	sectionSize: "var(--xehpjyu)",
+	sectionLineHeight: "var(--x170noae)",
+	headingSize: "var(--x14wionz)",
+	headingLineHeight: "var(--x1o42vor)",
+	compactHeadingSize: "var(--x3ivco5)",
+	compactHeadingLineHeight: "var(--x1q14agh)",
+	headingTracking: "var(--xgto76l)",
+	__varGroupHash__: "xledmcz"
+}, c = {
+	smHeight: "var(--x1hdxzrk)",
+	mdHeight: "var(--xymjgzc)",
+	coarseTarget: "var(--x6uufy4)",
+	iconSize: "var(--x1ud0cvw)",
+	paddingInline: "var(--xrzkwmd)",
+	paddingBlock: "var(--xjz2qh5)",
+	gap: "var(--x1z0o8cd)",
+	focusWidth: "var(--xxx3t85)",
+	disabledOpacity: "var(--x9ngs59)",
+	__varGroupHash__: "x1sjug0q"
+}, l = {
+	sm: "var(--x1asdyoo)",
+	md: "var(--xz1oyae)",
+	__varGroupHash__: "x1i152zt"
+}, u = {
+	duration: "var(--xjjzqp4)",
+	easing: "var(--x5xz5r2)",
+	drawerDuration: "var(--xrmqybo)",
+	drawerEasing: "var(--xumjr7l)",
+	__varGroupHash__: "xtoz1ri"
+}, d = {
+	popup: "var(--xfou7vv)",
+	__varGroupHash__: "x1e8hs47"
+}, f = { popup: "0 4px 16px #00000066" }, p = {
+	backdrop: "20",
+	dialog: "21",
+	popup: "30",
+	tooltip: "40",
+	skipLink: "50"
+}, 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 { 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,6 +1,151 @@
 {
   "name": "@mechane-ai/elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.1",
+  "description": "Elements by Mechane — React components for applications, AI interfaces, and analytical graphics",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mechane-ai/mechane.git",
+    "directory": "workspaces/core/packages/browser/elements"
+  },
+  "files": [
+    "dist",
+    "packages/foundations/src/tokens.stylex.ts",
+    "styles.css",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/packages/core/src/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./forms": {
+      "types": "./dist/packages/forms/src/index.d.ts",
+      "import": "./dist/forms.js"
+    },
+    "./forms/dates": {
+      "types": "./dist/packages/forms/src/dates/index.d.ts",
+      "import": "./dist/forms/dates.js"
+    },
+    "./overlays": {
+      "types": "./dist/packages/overlays/src/index.d.ts",
+      "import": "./dist/overlays.js"
+    },
+    "./feedback": {
+      "types": "./dist/packages/feedback/src/index.d.ts",
+      "import": "./dist/feedback.js"
+    },
+    "./navigation": {
+      "types": "./dist/packages/navigation/src/index.d.ts",
+      "import": "./dist/navigation.js"
+    },
+    "./navigation/commands": {
+      "types": "./dist/packages/navigation/src/commands/index.d.ts",
+      "import": "./dist/navigation/commands.js"
+    },
+    "./layout": {
+      "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/link": {
+      "types": "./dist/packages/content/src/link.d.ts",
+      "import": "./dist/content/link.js"
+    },
+    "./content/markdown": {
+      "types": "./dist/packages/content/src/markdown/index.d.ts",
+      "import": "./dist/content/markdown.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/packages/charts/src/index.d.ts",
+      "import": "./dist/charts.js"
+    },
+    "./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"
+    },
+    "./charts/hierarchy": {
+      "types": "./dist/packages/charts/src/hierarchy/index.d.ts",
+      "import": "./dist/charts/hierarchy.js"
+    },
+    "./charts/timeline": {
+      "types": "./dist/packages/charts/src/timeline/index.d.ts",
+      "import": "./dist/charts/timeline.js"
+    },
+    "./theme": {
+      "types": "./dist/packages/foundations/src/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./tokens": {
+      "types": "./dist/packages/foundations/src/tokens.stylex.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./tokens.stylex": "./packages/foundations/src/tokens.stylex.ts",
+    "./styles.css": "./styles.css"
+  },
+  "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",
+    "react-resizable-panels": "4.18.0",
+    "streamdown": "2.7.1",
+    "strip-ansi": "7.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
+  }
 }

package/packages/foundations/src/tokens.stylex.ts

@@ -0,0 +1,145 @@
+import * as stylex from '@stylexjs/stylex';
+
+export const colors = stylex.defineVars({
+  canvas: '#f5f5f5',
+  surface: '#ffffff',
+  ink: '#0a0a0a',
+  inkHover: '#333333',
+  inverse: '#ffffff',
+  muted: '#545454',
+  faint: '#9d9d9d',
+  line: '#ebebeb',
+  focus: '#0a69e2',
+  accent: '#21684f',
+  accentSoft: '#eef6f1',
+  warning: '#875900',
+  warningSoft: '#fff7e6',
+  danger: '#b13838',
+  dangerHover: '#922d2d',
+  dangerSoft: '#fff1f1',
+  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',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '24px',
+  xxl: '32px',
+});
+
+export const typography = stylex.defineVars({
+  fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif',
+  monoFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+  bodySize: '13px',
+  bodyLineHeight: '20px',
+  multilineLineHeight: '1.6',
+  captionSize: '12px',
+  captionLineHeight: '18px',
+  inputSize: '14px',
+  touchInputSize: '16px',
+  sectionSize: '16px',
+  sectionLineHeight: '22px',
+  headingSize: '36px',
+  headingLineHeight: '44px',
+  compactHeadingSize: '28px',
+  compactHeadingLineHeight: '36px',
+  headingTracking: '-0.035em',
+});
+
+export const controls = stylex.defineVars({
+  smHeight: '32px',
+  mdHeight: '36px',
+  coarseTarget: '44px',
+  iconSize: '16px',
+  paddingInline: '10px',
+  paddingBlock: '7px',
+  gap: '6px',
+  focusWidth: '2px',
+  disabledOpacity: '0.45',
+});
+
+export const radii = stylex.defineVars({ sm: '4px', md: '6px' });
+
+export const motion = stylex.defineVars({
+  duration: '140ms',
+  easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
+  drawerDuration: '220ms',
+  drawerEasing: 'cubic-bezier(0.32, 0.72, 0, 1)',
+});
+
+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({
+  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)',
+});

package/styles.css

@@ -0,0 +1,2 @@
+@layer reset, elements;
+@import './dist/assets/stylex.css' layer(elements);