@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/src/SVGIcon/tokens.stylex.ts

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file tokens.stylex.ts
+ * @input Astryx design token system
+ * @output CSS custom properties for SVG icon rendering
+ * @position Token definitions consumed by SVGIcon and variation presets
+ *
+ * Two-layer system (primary/secondary) with per-role rendering (fill vs stroke).
+ * Bold mode uses mask-based gap subtraction controlled by --icon-gap tokens.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+export const iconVars = stylex.defineVars({
+  // Primary layer — fill-role elements
+  '--icon-layer-primary-fill': 'none',
+  '--icon-layer-primary-stroke': 'currentColor',
+  '--icon-layer-primary-opacity': '1',
+
+  // Primary layer — stroke-role elements (lines that never become fills)
+  '--icon-layer-primary-stroke-role-fill': 'none',
+  '--icon-layer-primary-stroke-role-stroke': 'currentColor',
+  '--icon-layer-primary-stroke-role-opacity': '1',
+  '--icon-layer-primary-stroke-role-width': '1.5',
+
+  // Secondary layer — fill-role elements
+  '--icon-layer-secondary-fill': 'none',
+  '--icon-layer-secondary-stroke': 'currentColor',
+  '--icon-layer-secondary-opacity': '1',
+
+  // Secondary layer — stroke-role elements
+  '--icon-layer-secondary-stroke-role-fill': 'none',
+  '--icon-layer-secondary-stroke-role-stroke': 'currentColor',
+  '--icon-layer-secondary-stroke-role-opacity': '1',
+  '--icon-layer-secondary-stroke-role-width': '1.5',
+
+  // QoL adjustments
+  '--icon-size': '24px',
+  '--icon-stroke-width': '1.5',
+  '--icon-stroke-linecap': 'round',
+  '--icon-stroke-linejoin': 'round',
+  '--icon-padding': '0px',
+  '--icon-inline-offset': '0px',
+  '--icon-block-offset': '0px',
+
+  // Bold mode adjustments
+  '--icon-bold-stroke-boost': '0.5',
+
+  // Bold mode mask gaps
+  '--icon-gap': '0.75',
+  '--icon-gap-linejoin': 'round',
+});

package/src/SVGIcon/variations.stylex.ts

@@ -0,0 +1,122 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file variations.stylex.ts
+ * @input Icon token vars
+ * @output StyleX styles for each icon variation preset
+ * @position Consumed by SVGIcon to apply variation-specific token overrides
+ *
+ * Each variation sets tokens for both fill-role and stroke-role elements
+ * per the path role system. Stroke-role elements (lines, detail strokes)
+ * never become fills — they stay as strokes across all variations.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import {iconVars} from './tokens.stylex';
+
+export const variations = stylex.create({
+  linear: {
+    // Fill-role: stroked outlines
+    [iconVars['--icon-layer-primary-fill']]: 'none',
+    [iconVars['--icon-layer-primary-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-primary-opacity']]: '1',
+    [iconVars['--icon-layer-primary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-primary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-primary-stroke-role-opacity']]: '1',
+    // Secondary
+    [iconVars['--icon-layer-secondary-fill']]: 'none',
+    [iconVars['--icon-layer-secondary-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-opacity']]: '1',
+    [iconVars['--icon-layer-secondary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-secondary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-stroke-role-opacity']]: '1',
+  },
+  bold: {
+    // Fill-role: solid filled (mask handles overlaps)
+    [iconVars['--icon-layer-primary-fill']]: 'currentColor',
+    [iconVars['--icon-layer-primary-stroke']]: 'none',
+    [iconVars['--icon-layer-primary-opacity']]: '1',
+    // Stroke-role: stays stroked, thicker for visual weight
+    [iconVars['--icon-layer-primary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-primary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-primary-stroke-role-opacity']]: '1',
+    [iconVars['--icon-layer-primary-stroke-role-width']]: '2',
+    // Secondary
+    [iconVars['--icon-layer-secondary-fill']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-stroke']]: 'none',
+    [iconVars['--icon-layer-secondary-opacity']]: '1',
+    [iconVars['--icon-layer-secondary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-secondary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-stroke-role-opacity']]: '1',
+    [iconVars['--icon-layer-secondary-stroke-role-width']]: '2.5',
+  },
+  twotone: {
+    // Fill-role: stroked, full opacity
+    [iconVars['--icon-layer-primary-fill']]: 'none',
+    [iconVars['--icon-layer-primary-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-primary-opacity']]: '1',
+    // Stroke-role: stroked, reduced opacity
+    [iconVars['--icon-layer-primary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-primary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-primary-stroke-role-opacity']]: '0.4',
+    // Secondary: reduced opacity
+    [iconVars['--icon-layer-secondary-fill']]: 'none',
+    [iconVars['--icon-layer-secondary-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-opacity']]: '0.4',
+    [iconVars['--icon-layer-secondary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-secondary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-stroke-role-opacity']]: '0.4',
+  },
+  bulk: {
+    // Fill-role: solid filled
+    [iconVars['--icon-layer-primary-fill']]: 'currentColor',
+    [iconVars['--icon-layer-primary-stroke']]: 'none',
+    [iconVars['--icon-layer-primary-opacity']]: '1',
+    // Stroke-role: reduced opacity
+    [iconVars['--icon-layer-primary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-primary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-primary-stroke-role-opacity']]: '0.4',
+    // Secondary: filled at reduced opacity
+    [iconVars['--icon-layer-secondary-fill']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-stroke']]: 'none',
+    [iconVars['--icon-layer-secondary-opacity']]: '0.4',
+    [iconVars['--icon-layer-secondary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-secondary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-stroke-role-opacity']]: '0.4',
+  },
+  broken: {
+    [iconVars['--icon-layer-primary-fill']]: 'none',
+    [iconVars['--icon-layer-primary-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-primary-opacity']]: '1',
+    [iconVars['--icon-layer-primary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-primary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-primary-stroke-role-opacity']]: '1',
+    // Secondary hidden
+    [iconVars['--icon-layer-secondary-fill']]: 'none',
+    [iconVars['--icon-layer-secondary-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-opacity']]: '0',
+    [iconVars['--icon-layer-secondary-stroke-role-fill']]: 'none',
+    [iconVars['--icon-layer-secondary-stroke-role-stroke']]: 'currentColor',
+    [iconVars['--icon-layer-secondary-stroke-role-opacity']]: '0',
+  },
+});
+
+/** Optical size compensation — thicker strokes at smaller sizes */
+export const opticalSize = stylex.create({
+  xsm: {
+    [iconVars['--icon-stroke-width']]: '2',
+    [iconVars['--icon-size']]: '12px',
+  },
+  sm: {
+    [iconVars['--icon-stroke-width']]: '1.75',
+    [iconVars['--icon-size']]: '16px',
+  },
+  md: {
+    [iconVars['--icon-stroke-width']]: '1.5',
+    [iconVars['--icon-size']]: '20px',
+  },
+  lg: {
+    [iconVars['--icon-stroke-width']]: '1.5',
+    [iconVars['--icon-size']]: '24px',
+  },
+});

package/src/SVGIcon/xif-examples.ts

@@ -0,0 +1,191 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file xif-examples.ts
+ * @description Example icons demonstrating XIF spec features
+ *
+ * Each example showcases a different capability:
+ * - Simple stroke-only (check)
+ * - Two-layer with bold knockout (home)
+ * - Composable with slots (file, shield)
+ * - Animated (bell)
+ * - Personality override (star)
+ * - Bold geometry override (bell-override)
+ */
+
+import type {XIFIcon} from './xif-types';
+
+// =============================================================================
+// Simple stroke-only
+// =============================================================================
+
+export const xifCheck: XIFIcon = {
+  name: 'check',
+  paths: [{type: 'path', attrs: {d: 'M5 13l4 4L19 7'}, role: 'stroke'}],
+  tags: ['action', 'confirm'],
+};
+
+// =============================================================================
+// Two-layer with bold knockout
+// =============================================================================
+
+export const xifHome: XIFIcon = {
+  name: 'home',
+  paths: [
+    {
+      type: 'path',
+      attrs: {
+        d: 'M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z',
+      },
+      role: 'fill',
+      layer: 'primary',
+    },
+    {
+      type: 'path',
+      attrs: {d: 'M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'},
+      role: 'fill',
+      layer: 'secondary',
+    },
+  ],
+  tags: ['navigation'],
+};
+
+// =============================================================================
+// Composable icon with slot
+// =============================================================================
+
+export const xifFile: XIFIcon = {
+  name: 'file',
+  paths: [
+    {
+      type: 'path',
+      attrs: {
+        d: 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z',
+      },
+      role: 'fill',
+      layer: 'primary',
+    },
+    {
+      type: 'path',
+      attrs: {d: 'M14 2v4a2 2 0 0 0 2 2h4'},
+      role: 'stroke',
+      layer: 'secondary',
+    },
+  ],
+  slots: [{name: 'badge', position: {x: 0.5, y: 0.65}, size: 0.35}],
+  tags: ['file', 'document'],
+};
+
+export const xifShield: XIFIcon = {
+  name: 'shield',
+  paths: [
+    {
+      type: 'path',
+      attrs: {
+        d: 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z',
+      },
+      role: 'fill',
+      layer: 'primary',
+    },
+  ],
+  slots: [{name: 'badge', position: 'center', size: 0.42}],
+  tags: ['security', 'protection'],
+};
+
+// =============================================================================
+// Animated icon
+// =============================================================================
+
+export const xifBell: XIFIcon = {
+  name: 'bell',
+  paths: [
+    {
+      type: 'path',
+      attrs: {d: 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'},
+      role: 'fill',
+      layer: 'primary',
+      animate: {type: 'scale', sequence: 1},
+    },
+    {
+      type: 'path',
+      attrs: {d: 'M10.3 21a1.94 1.94 0 0 0 3.4 0'},
+      role: 'stroke',
+      layer: 'secondary',
+      animate: {type: 'draw', sequence: 2},
+    },
+  ],
+  tags: ['notification', 'alert'],
+};
+
+// =============================================================================
+// Personality override — star keeps sharp points
+// =============================================================================
+
+export const xifStar: XIFIcon = {
+  name: 'star',
+  paths: [
+    {
+      type: 'path',
+      attrs: {
+        d: 'M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z',
+      },
+      role: 'fill',
+      layer: 'primary',
+      personality: {cornerRounding: 0},
+    },
+  ],
+  tags: ['rating', 'favorite'],
+};
+
+// =============================================================================
+// Bold geometry override
+// =============================================================================
+
+export const xifBellOverride: XIFIcon = {
+  name: 'bell-override',
+  paths: [
+    {
+      type: 'path',
+      attrs: {d: 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'},
+      role: 'fill',
+      layer: 'primary',
+    },
+    {
+      type: 'path',
+      attrs: {d: 'M10.3 21a1.94 1.94 0 0 0 3.4 0'},
+      role: 'stroke',
+      layer: 'secondary',
+    },
+  ],
+  overrides: {
+    bold: [
+      {
+        type: 'path',
+        attrs: {d: 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'},
+        role: 'fill',
+        layer: 'primary',
+      },
+      {
+        type: 'path',
+        attrs: {d: 'M10.3 21a1.94 1.94 0 0 0 3.4 0'},
+        role: 'fill',
+        layer: 'secondary',
+      },
+    ],
+  },
+  tags: ['notification'],
+};
+
+// =============================================================================
+// All examples
+// =============================================================================
+
+export const xifExamples: XIFIcon[] = [
+  xifCheck,
+  xifHome,
+  xifFile,
+  xifShield,
+  xifBell,
+  xifStar,
+  xifBellOverride,
+];

package/src/SVGIcon/xif-types.ts

@@ -0,0 +1,181 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file xif-types.ts
+ * @description Astryx Icon Format (XIF) type definitions — v0.1.0 draft
+ *
+ * Icons are pure structure — zero visual values. The theme resolves
+ * all visual properties (color, weight, rounding, timing).
+ *
+ * This file defines the SOURCE format types. The resolved/build output
+ * uses a simpler pre-computed format (see theme build pipeline).
+ */
+
+// =============================================================================
+// Personality
+// =============================================================================
+
+/**
+ * Percentile adjustment parameters for shape personality.
+ * All values 0-1. 0 = artist's original. 1 = maximum shift.
+ * Adjustments are RELATIVE — they preserve the artist's hierarchy
+ * of sharp vs soft, straight vs curved.
+ */
+export interface XIFPersonality {
+  /**
+   * Shift corners toward rounded.
+   * A sharp 90° corner shifts more than an already-gentle 150° corner.
+   * Formula: adjustedR = baseR + (maxR - baseR) × cornerRounding
+   */
+  cornerRounding?: number;
+
+  /**
+   * Shift straight segments toward curved.
+   * A straight line gains a bow; an existing curve barely changes.
+   * Formula: adjusted = original + (1 - original) × segmentCurvature
+   */
+  segmentCurvature?: number;
+
+  /**
+   * How tightly curves hug their control points.
+   * 0 = loose (curves balloon). 0.5 = neutral. 1 = tight (near-straight).
+   */
+  tension?: number;
+}
+
+// =============================================================================
+// Animation
+// =============================================================================
+
+/**
+ * Animation intent for a path element.
+ * Declares WHAT animates and in WHAT ORDER — not timing or easing.
+ * The theme resolves all visual animation properties.
+ */
+export interface XIFAnimate {
+  /**
+   * Semantic animation type.
+   * - draw: stroke reveals along path (dasharray/dashoffset)
+   * - fade: opacity entrance
+   * - scale: grow from center
+   * - rotate: continuous spin (loaders)
+   * - morph: interpolate between variation states
+   */
+  type: 'draw' | 'fade' | 'scale' | 'rotate' | 'morph';
+
+  /**
+   * Stagger order. Lower numbers animate first.
+   * Paths with the same sequence animate simultaneously.
+   */
+  sequence?: number;
+}
+
+// =============================================================================
+// Slots (Composition)
+// =============================================================================
+
+/**
+ * A named position where a sub-icon can be injected.
+ * The theme resolves position/size to actual viewBox coordinates.
+ */
+export interface XIFSlot {
+  /** Slot identifier — used in component props */
+  name: string;
+
+  /** Semantic position. Theme resolves to coordinates. */
+  position:
+    | 'center'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+    | {x: number; y: number}; // normalized 0-1 relative to viewBox
+
+  /**
+   * Size of the injected icon relative to parent.
+   * 'content' = auto-sized by theme. number = fraction of parent.
+   */
+  size?: 'content' | number;
+}
+
+// =============================================================================
+// Path Entry
+// =============================================================================
+
+/**
+ * A single shape element within an icon.
+ * Contains geometry + semantic metadata. Zero visual values.
+ */
+export interface XIFPath {
+  /** SVG element type. Default: 'path' */
+  type?:
+    | 'path'
+    | 'circle'
+    | 'rect'
+    | 'line'
+    | 'polyline'
+    | 'ellipse'
+    | 'polygon';
+
+  /** SVG geometry attributes (d, cx, cy, r, x, y, width, height, etc.) */
+  attrs: Record<string, string | number>;
+
+  /**
+   * Rendering behavior across variations.
+   * - 'fill': Closed shape — stroked in linear, filled in bold.
+   * - 'stroke': Line/detail — always rendered as a stroke.
+   * Default: 'fill'
+   */
+  role?: 'fill' | 'stroke';
+
+  /**
+   * Visual hierarchy for twotone/bulk and bold knockouts.
+   * - 'primary': Full opacity. In bold, rendered as solid fill.
+   * - 'secondary': Reduced opacity in twotone/bulk. Knocked out in bold.
+   * Default: 'primary'
+   */
+  layer?: 'primary' | 'secondary';
+
+  /** Per-path personality overrides (shift from theme/icon defaults) */
+  personality?: XIFPersonality;
+
+  /** Animation intent */
+  animate?: XIFAnimate;
+}
+
+// =============================================================================
+// Icon Definition
+// =============================================================================
+
+/**
+ * Root type for an Astryx Icon Format definition.
+ * Pure structure — no visual values.
+ */
+export interface XIFIcon {
+  /** Unique identifier */
+  name: string;
+
+  /** ViewBox dimensions. Default: '0 0 24 24' */
+  viewBox?: string;
+
+  /** Shape elements that compose the icon */
+  paths: XIFPath[];
+
+  /**
+   * Per-variation geometry overrides.
+   * Rendered in DOM alongside default paths; CSS toggles visibility.
+   */
+  overrides?: {
+    bold?: XIFPath[];
+    broken?: XIFPath[];
+  };
+
+  /** Named slots for sub-icon composition */
+  slots?: XIFSlot[];
+
+  /** Icon-level personality overrides */
+  personality?: XIFPersonality;
+
+  /** Tags for search and categorization */
+  tags?: string[];
+}

package/src/Sankey/SankeyChart.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../core/src/docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'SankeyChart',
+  displayName: 'Sankey Chart',
+  group: 'Sankey',
+  category: 'Data Visualization',
+
+  usage: {
+    description: '',
+  },
+
+  props: [],
+};