@number10/jsx-core 5.0.0

package/dist/core-props.d.ts

@@ -0,0 +1,395 @@
+import { AnimatedSignal } from './animation/animated-signal';
+/**
+ * Utility type that allows a value to be either a direct value or an
+ * {@link AnimatedSignal}. Enables direct binding of `useSpring` / `useTween`
+ * signals to JSX props without needing `useForceRedraw` + `.value`.
+ *
+ * @example
+ * ```tsx
+ * const [x, setX] = useSpring(0)
+ * <View x={x} />  // ✅ x is Animatable<number> → accepts AnimatedSignal
+ * ```
+ */
+export type Animatable<T> = T | AnimatedSignal;
+/**
+ * Valid CSS-like size values with type safety
+ * - Fixed pixels: number or "20px"
+ * - Percentage: "50%", "100%"
+ * - Viewport units: "100vw", "50vh"
+ * - Keywords: "auto", "fill"
+ * - Calc expressions: "calc(100% - 20px)"
+ */
+export type SizeValue = number | 'auto' | 'fill' | `${number}%` | `${number}px` | `${number}vw` | `${number}vh` | `calc(${string})`;
+/**
+ * Flex basis size values (subset of SizeValue, no "fill" keyword)
+ */
+export type FlexBasisValue = number | 'auto' | `${number}%` | `${number}px` | `${number}vw` | `${number}vh` | `calc(${string})`;
+/**
+ * Display mode for visibility control
+ * - 'visible': Rendered and takes up layout space (default)
+ * - 'invisible': Not rendered but takes up layout space
+ * - 'none': Not rendered and does not take up layout space
+ */
+export type Display = 'visible' | 'invisible' | 'none';
+/**
+ * Viewport dimensions used for overlay clamping and positioning.
+ */
+export interface ViewportSize {
+    width: number;
+    height: number;
+}
+/**
+ * Clamp a position so that a box of the given size stays within the viewport.
+ * @param x - Desired x position (left edge of the box)
+ * @param y - Desired y position (top edge of the box)
+ * @param boxWidth - Width of the box to clamp
+ * @param boxHeight - Height of the box to clamp
+ * @param viewport - Viewport dimensions
+ * @param padding - Minimum padding from viewport edges (default 8)
+ * @returns Clamped { x, y } position
+ */
+export declare function clampToViewport(x: number, y: number, boxWidth: number, boxHeight: number, viewport: ViewportSize, padding?: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Calculate the preferred placement for an overlay relative to an anchor rect.
+ * Returns the anchor-relative position before viewport clamping.
+ * @param placement - Preferred placement direction
+ * @param anchor - Anchor rect in viewport coordinates
+ * @param contentWidth - Width of the overlay content
+ * @param contentHeight - Height of the overlay content
+ * @param offset - Gap between anchor and overlay (default 4)
+ * @returns Position relative to the anchor
+ */
+export declare function getOverlayPosition(placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end', anchor: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, contentWidth: number, contentHeight: number, offset?: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Transform properties — geometric transformations (position, rotation, scale)
+ * and visual opacity.
+ */
+export interface TransformProps {
+    x?: Animatable<number>;
+    y?: Animatable<number>;
+    rotation?: Animatable<number>;
+    scale?: Animatable<number>;
+    scaleX?: Animatable<number>;
+    scaleY?: Animatable<number>;
+    /** Alpha transparency (0 = fully transparent, 1 = fully opaque) */
+    alpha?: Animatable<number>;
+    /**
+     * Z-order / render depth. Higher values render on top.
+     * Supported by both Phaser (native depth property) and Pixi (child index).
+     */
+    depth?: number;
+}
+/** Edge insets for margins and padding */
+export interface EdgeInsets {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+/** Gap insets for horizontal and vertical gaps */
+export interface GapInsets {
+    horizontal?: number;
+    vertical?: number;
+}
+/** Corner radius specification */
+export interface CornerRadiusInsets {
+    tl?: number;
+    tr?: number;
+    bl?: number;
+    br?: number;
+}
+/**
+ * Normalize edge insets — converts number to all-sides object
+ */
+export declare function normalizeEdgeInsets(value: number | EdgeInsets | undefined): EdgeInsets;
+/**
+ * Normalize corner radius — converts number to all-corners object
+ */
+export declare function normalizeCornerRadius(value: number | CornerRadiusInsets | undefined): number | CornerRadiusInsets;
+/**
+ * Normalize gap values — converts number to GapInsets object
+ */
+export declare function normalizeGap(value: number | GapInsets | undefined): {
+    horizontal: number;
+    vertical: number;
+};
+/**
+ * Layout properties — sizing, spacing, and layout participation.
+ * Renderer-neutral. Every renderer maps these to its native layout system.
+ */
+export interface LayoutProps {
+    /** Visibility and layout participation */
+    visible?: boolean | Display;
+    /** If true, object is rendered but excluded from layout calculations */
+    headless?: boolean;
+    /** Width: number (px), "50%", "100vw", "auto", "fill", "calc(...)" */
+    width?: SizeValue | undefined;
+    /** Height: number (px), "50%", "100vh", "auto", "fill", "calc(...)" */
+    height?: SizeValue | undefined;
+    /** Minimum width constraint */
+    minWidth?: SizeValue | undefined;
+    /** Minimum height constraint */
+    minHeight?: SizeValue | undefined;
+    /** Maximum width constraint */
+    maxWidth?: SizeValue | undefined;
+    /** Maximum height constraint */
+    maxHeight?: SizeValue | undefined;
+    /** Margin outside the container */
+    margin?: number | EdgeInsets | undefined;
+    /** Padding inside the container */
+    padding?: number | EdgeInsets | undefined;
+    /** Layout direction: 'column' (default), 'row', 'stack' */
+    direction?: 'row' | 'column' | 'stack';
+    /** Gap between children */
+    gap?: number | GapInsets | undefined;
+    /** Main axis alignment */
+    justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Cross axis alignment */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Flex grow factor */
+    flex?: number;
+    /** Flex shrink factor */
+    flexShrink?: number;
+    /** Flex basis — initial size before flex distribution */
+    flexBasis?: FlexBasisValue | undefined;
+    /** Overflow handling: 'visible' (default) or 'hidden' (clipped) */
+    overflow?: 'visible' | 'hidden';
+    /** Wrapping behavior for flex layouts */
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** Alignment of wrapped lines */
+    alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch';
+}
+/**
+ * Border line style for advanced border rendering.
+ * - `'solid'`: Continuous line (default)
+ * - `'dashed'`: Segmented line
+ * - `'dotted'`: Rounded dotted line
+ */
+export type BorderLineStyle = 'solid' | 'dashed' | 'dotted';
+/**
+ * Per-side inset values for border widths.
+ * Each side can have a different thickness.
+ */
+export type BorderSideInsets<T> = {
+    top?: T;
+    right?: T;
+    bottom?: T;
+    left?: T;
+};
+/**
+ * Advanced border configuration — extended border styling beyond
+ * the legacy `borderWidth`/`borderColor`/`borderAlpha` props.
+ *
+ * When set on `BackgroundProps.border`, this object takes precedence
+ * over the legacy border props.
+ */
+export interface BorderPropsV2 {
+    /** Border color (number, e.g. 0xff0000 for red) */
+    color?: number;
+    /**
+     * Border opacity.
+     * Accepts either a plain value or an {@link AnimatedSignal}.
+     */
+    alpha?: Animatable<number>;
+    /**
+     * Border width in pixels.
+     * - `number`: uniform width on all sides (supports `cornerRadius`)
+     * - `BorderSideInsets<number>`: per-side widths (supports `cornerRadius`)
+     */
+    width?: number | BorderSideInsets<number>;
+    /** Line style: `'solid'` (default), `'dashed'`, or `'dotted'` */
+    style?: BorderLineStyle;
+    /**
+     * Stroke pattern configuration.
+     *
+     * For `style: 'dashed'`, values are interpreted as alternating dash/gap
+     * lengths, e.g. `[5, 3]`.
+     *
+     * For `style: 'dotted'`, `dash[0]` is the gap and `dash[1]` optionally
+     * overrides the dot diameter.
+     */
+    dash?: number[];
+    /** Offset where the dash pattern starts */
+    dashOffset?: number;
+    /** Line cap style: `'butt'`, `'round'`, `'square'`. */
+    cap?: 'butt' | 'round' | 'square';
+    /** Line join style: `'miter'`, `'round'`, `'bevel'`. */
+    join?: 'miter' | 'round' | 'bevel';
+    /**
+     * Border alignment relative to the edge: `'center'`, `'inside'`, `'outside'`.
+     * - `center`: centered on the edge
+     * - `inside`: fully inside the box
+     * - `outside`: fully outside the box
+     */
+    align?: 'center' | 'inside' | 'outside';
+}
+/**
+ * Background styling properties — renderer-neutral.
+ * Each renderer maps colors and corner radii to its native drawing API.
+ */
+export interface BackgroundProps {
+    backgroundColor?: number | undefined;
+    /**
+     * Background fill opacity.
+     * Accepts either a plain value or an {@link AnimatedSignal}.
+     */
+    backgroundAlpha?: Animatable<number> | undefined;
+    cornerRadius?: number | CornerRadiusInsets | undefined;
+    borderWidth?: number | undefined;
+    borderColor?: number | undefined;
+    /**
+     * Border stroke opacity.
+     * Accepts either a plain value or an {@link AnimatedSignal}.
+     */
+    borderAlpha?: Animatable<number> | undefined;
+    /**
+     * Advanced border configuration (BorderPropsV2).
+     * When set, takes precedence over legacy `borderWidth`/`borderColor`/`borderAlpha`.
+     */
+    border?: BorderPropsV2 | undefined;
+}
+/**
+ * Touch move gesture state.
+ */
+export type TouchMoveState = 'start' | 'move' | 'end';
+/**
+ * Data passed to gesture event handlers.
+ * Renderer-agnostic — the pointer field is opaque.
+ * Each renderer fills it with its own pointer type.
+ */
+export interface GestureEventData<TPointer = unknown> {
+    /** Renderer-specific pointer object */
+    pointer: TPointer;
+    /** Local X coordinate relative to container origin (0,0) */
+    localX: number;
+    /** Local Y coordinate relative to container origin (0,0) */
+    localY: number;
+    /** Delta X since last move event (only for onTouchMove) */
+    dx?: number;
+    /** Delta Y since last move event (only for onTouchMove) */
+    dy?: number;
+    /** Width of the container's hit area */
+    width: number;
+    /** Height of the container's hit area */
+    height: number;
+    /** Whether pointer is currently inside the container hit area */
+    isInside?: boolean;
+    /** Current state of touch move gesture (only for onTouchMove) */
+    state?: TouchMoveState;
+    /** Stop event propagation to parent containers (DOM-style bubbling) */
+    stopPropagation(): void;
+    /** Check if propagation has been stopped */
+    isPropagationStopped(): boolean;
+}
+/**
+ * Data passed to wheel event handlers.
+ * Renderer-agnostic — pointer/originalEvent are opaque.
+ */
+export interface WheelEventData<TPointer = unknown, TOriginalEvent = unknown> {
+    /** Renderer-specific pointer object, if available */
+    pointer: TPointer;
+    /** Local X coordinate relative to container origin (0,0) */
+    localX: number;
+    /** Local Y coordinate relative to container origin (0,0) */
+    localY: number;
+    /** Wheel scroll delta X (horizontal scrolling) */
+    deltaX: number;
+    /** Wheel scroll delta Y (vertical scrolling) */
+    deltaY: number;
+    /** Wheel scroll delta Z */
+    deltaZ: number;
+    /** Delta mode: 0 = pixels, 1 = lines, 2 = pages */
+    deltaMode: number;
+    /** Width of the container's hit area */
+    width: number;
+    /** Height of the container's hit area */
+    height: number;
+    /** Original platform wheel event */
+    originalEvent: TOriginalEvent;
+    /** Stop event propagation to parent containers (DOM-style bubbling) */
+    stopPropagation(): void;
+    /** Check if propagation has been stopped */
+    isPropagationStopped(): boolean;
+    /** Prevent default browser behavior */
+    preventDefault(): void;
+}
+/**
+ * Tooltip position relative to the target element.
+ */
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Renderer-neutral tooltip animation configuration.
+ * Renderers may ignore fields they cannot represent.
+ */
+export interface TooltipAnimation {
+    fadeIn?: number;
+    fadeOut?: number;
+    move?: {
+        dx?: number;
+        dy?: number;
+    };
+    pulse?: boolean;
+    pulseScale?: [number, number];
+}
+/**
+ * Tooltip configuration returned by `onTooltip`.
+ * Text-only on purpose so each renderer can draw it natively.
+ */
+export interface TooltipConfig {
+    content: string;
+    position?: TooltipPosition;
+    showDelay?: number;
+    hideDelay?: number;
+    offset?: number;
+    disabled?: boolean;
+    autoDismiss?: number;
+    animation?: TooltipAnimation;
+}
+/**
+ * Tooltip callback function.
+ * Return `null` / `undefined` to disable the tooltip for the current hover.
+ */
+export type TooltipCallback = () => TooltipConfig | string | null | undefined;
+/**
+ * High-level gesture interaction props.
+ * Renderer-neutral — each renderer provides its own GestureManager.
+ */
+export interface GestureProps<TPointer = unknown> {
+    /** Enable gesture system for this container */
+    enableGestures?: boolean;
+    /** Called on pointer down + up on the same target (click/tap) */
+    onTouch?: (data: GestureEventData<TPointer>) => void;
+    /** Called when pointer up occurs outside the container */
+    onTouchOutside?: (data: GestureEventData<TPointer>) => void;
+    /** Called during pointer movement */
+    onTouchMove?: (data: GestureEventData<TPointer>) => void;
+    /** Called when double tap/click is detected */
+    onDoubleTap?: (data: GestureEventData<TPointer>) => void;
+    /** Called when pointer is held down for configured duration */
+    onLongPress?: (data: GestureEventData<TPointer>) => void;
+    /** Called when mouse wheel / trackpad scroll occurs over the container */
+    onWheel?: (data: WheelEventData<TPointer>) => void;
+    /**
+     * Tooltip configuration callback (desktop / pointer hover only).
+     * The API is portable, the renderer decides how to draw it.
+     */
+    onTooltip?: TooltipCallback;
+    /** Duration in ms to trigger long press (default: 500ms) */
+    longPressDuration?: number;
+    /** Max time in ms between taps for double tap (default: 300ms) */
+    doubleTapDelay?: number;
+    /** Max time in ms for a valid touch/click (default: 500ms) */
+    maxTouchDuration?: number;
+}
+//# sourceMappingURL=core-props.d.ts.map

package/dist/core-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-props.d.ts","sourceRoot":"","sources":["../src/core-props.ts"],"names":[],"mappings":"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"}

package/dist/core-props.js

@@ -0,0 +1,66 @@
+function clampToViewport(x, y, boxWidth, boxHeight, viewport, padding = 8) {
+  return {
+    x: Math.min(Math.max(padding, x), Math.max(padding, viewport.width - boxWidth - padding)),
+    y: Math.min(Math.max(padding, y), Math.max(padding, viewport.height - boxHeight - padding))
+  };
+}
+function getOverlayPosition(placement, anchor, contentWidth, contentHeight, offset = 4) {
+  const cx = anchor.x + anchor.width / 2;
+  const cy = anchor.y + anchor.height / 2;
+  switch (placement) {
+    case "top":
+      return { x: cx - contentWidth / 2, y: anchor.y - contentHeight - offset };
+    case "bottom":
+      return { x: cx - contentWidth / 2, y: anchor.y + anchor.height + offset };
+    case "left":
+      return { x: anchor.x - contentWidth - offset, y: cy - contentHeight / 2 };
+    case "right":
+      return { x: anchor.x + anchor.width + offset, y: cy - contentHeight / 2 };
+    case "top-start":
+      return { x: anchor.x, y: anchor.y - contentHeight - offset };
+    case "top-end":
+      return { x: anchor.x + anchor.width - contentWidth, y: anchor.y - contentHeight - offset };
+    case "bottom-start":
+      return { x: anchor.x, y: anchor.y + anchor.height + offset };
+    case "bottom-end":
+      return { x: anchor.x + anchor.width - contentWidth, y: anchor.y + anchor.height + offset };
+    case "left-start":
+      return { x: anchor.x - contentWidth - offset, y: anchor.y };
+    case "left-end":
+      return { x: anchor.x - contentWidth - offset, y: anchor.y + anchor.height - contentHeight };
+    case "right-start":
+      return { x: anchor.x + anchor.width + offset, y: anchor.y };
+    case "right-end":
+      return { x: anchor.x + anchor.width + offset, y: anchor.y + anchor.height - contentHeight };
+    default:
+      return { x: cx - contentWidth / 2, y: anchor.y + anchor.height + offset };
+  }
+}
+function normalizeEdgeInsets(value) {
+  if (value === void 0) return {};
+  if (typeof value === "number") {
+    return { top: value, right: value, bottom: value, left: value };
+  }
+  return value;
+}
+function normalizeCornerRadius(value) {
+  if (value === void 0) return 0;
+  if (typeof value === "number") return value;
+  return value;
+}
+function normalizeGap(value) {
+  if (value === void 0) return { horizontal: 0, vertical: 0 };
+  if (typeof value === "number") return { horizontal: value, vertical: value };
+  return {
+    horizontal: value.horizontal ?? 0,
+    vertical: value.vertical ?? 0
+  };
+}
+export {
+  clampToViewport,
+  getOverlayPosition,
+  normalizeCornerRadius,
+  normalizeEdgeInsets,
+  normalizeGap
+};
+//# sourceMappingURL=core-props.js.map

package/dist/core-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-props.js","sources":["../src/core-props.ts"],"sourcesContent":["/**\n * Core prop type definitions — renderer-neutral component properties.\n * These prop groups can be composed to build component-specific props.\n *\n * @migration(audit:scene-portal-mount) Phase 3A — split from packages/ui/src/core-props.ts.\n *   Portable types live here in @number10/jsx-core. Phaser-specific props\n *   (PhaserProps, TextSpecificProps, GestureProps) remain in the Phaser package.\n */\n\nimport type { AnimatedSignal } from './animation/animated-signal'\n\n// ---------------------------------------------------------------------------\n// Animatable value helper\n// ---------------------------------------------------------------------------\n\n/**\n * Utility type that allows a value to be either a direct value or an\n * {@link AnimatedSignal}. Enables direct binding of `useSpring` / `useTween`\n * signals to JSX props without needing `useForceRedraw` + `.value`.\n *\n * @example\n * ```tsx\n * const [x, setX] = useSpring(0)\n * <View x={x} />  // ✅ x is Animatable<number> → accepts AnimatedSignal\n * ```\n */\nexport type Animatable<T> = T | AnimatedSignal\n\n// ---------------------------------------------------------------------------\n// Size value types\n// ---------------------------------------------------------------------------\n\n/**\n * Valid CSS-like size values with type safety\n * - Fixed pixels: number or \"20px\"\n * - Percentage: \"50%\", \"100%\"\n * - Viewport units: \"100vw\", \"50vh\"\n * - Keywords: \"auto\", \"fill\"\n * - Calc expressions: \"calc(100% - 20px)\"\n */\nexport type SizeValue =\n  | number\n  | 'auto'\n  | 'fill'\n  | `${number}%`\n  | `${number}px`\n  | `${number}vw`\n  | `${number}vh`\n  | `calc(${string})`\n\n/**\n * Flex basis size values (subset of SizeValue, no \"fill\" keyword)\n */\nexport type FlexBasisValue =\n  | number\n  | 'auto'\n  | `${number}%`\n  | `${number}px`\n  | `${number}vw`\n  | `${number}vh`\n  | `calc(${string})`\n\n/**\n * Display mode for visibility control\n * - 'visible': Rendered and takes up layout space (default)\n * - 'invisible': Not rendered but takes up layout space\n * - 'none': Not rendered and does not take up layout space\n */\nexport type Display = 'visible' | 'invisible' | 'none'\n\n// ---------------------------------------------------------------------------\n// Viewport helpers (portable, for overlay positioning)\n// ---------------------------------------------------------------------------\n\n/**\n * Viewport dimensions used for overlay clamping and positioning.\n */\nexport interface ViewportSize {\n  width: number\n  height: number\n}\n\n/**\n * Clamp a position so that a box of the given size stays within the viewport.\n * @param x - Desired x position (left edge of the box)\n * @param y - Desired y position (top edge of the box)\n * @param boxWidth - Width of the box to clamp\n * @param boxHeight - Height of the box to clamp\n * @param viewport - Viewport dimensions\n * @param padding - Minimum padding from viewport edges (default 8)\n * @returns Clamped { x, y } position\n */\nexport function clampToViewport(\n  x: number,\n  y: number,\n  boxWidth: number,\n  boxHeight: number,\n  viewport: ViewportSize,\n  padding = 8\n): { x: number; y: number } {\n  return {\n    x: Math.min(Math.max(padding, x), Math.max(padding, viewport.width - boxWidth - padding)),\n    y: Math.min(Math.max(padding, y), Math.max(padding, viewport.height - boxHeight - padding)),\n  }\n}\n\n/**\n * Calculate the preferred placement for an overlay relative to an anchor rect.\n * Returns the anchor-relative position before viewport clamping.\n * @param placement - Preferred placement direction\n * @param anchor - Anchor rect in viewport coordinates\n * @param contentWidth - Width of the overlay content\n * @param contentHeight - Height of the overlay content\n * @param offset - Gap between anchor and overlay (default 4)\n * @returns Position relative to the anchor\n */\nexport function getOverlayPosition(\n  placement:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left-start'\n    | 'left-end'\n    | 'right-start'\n    | 'right-end',\n  anchor: { x: number; y: number; width: number; height: number },\n  contentWidth: number,\n  contentHeight: number,\n  offset = 4\n): { x: number; y: number } {\n  const cx = anchor.x + anchor.width / 2\n  const cy = anchor.y + anchor.height / 2\n\n  switch (placement) {\n    case 'top':\n      return { x: cx - contentWidth / 2, y: anchor.y - contentHeight - offset }\n    case 'bottom':\n      return { x: cx - contentWidth / 2, y: anchor.y + anchor.height + offset }\n    case 'left':\n      return { x: anchor.x - contentWidth - offset, y: cy - contentHeight / 2 }\n    case 'right':\n      return { x: anchor.x + anchor.width + offset, y: cy - contentHeight / 2 }\n    case 'top-start':\n      return { x: anchor.x, y: anchor.y - contentHeight - offset }\n    case 'top-end':\n      return { x: anchor.x + anchor.width - contentWidth, y: anchor.y - contentHeight - offset }\n    case 'bottom-start':\n      return { x: anchor.x, y: anchor.y + anchor.height + offset }\n    case 'bottom-end':\n      return { x: anchor.x + anchor.width - contentWidth, y: anchor.y + anchor.height + offset }\n    case 'left-start':\n      return { x: anchor.x - contentWidth - offset, y: anchor.y }\n    case 'left-end':\n      return { x: anchor.x - contentWidth - offset, y: anchor.y + anchor.height - contentHeight }\n    case 'right-start':\n      return { x: anchor.x + anchor.width + offset, y: anchor.y }\n    case 'right-end':\n      return { x: anchor.x + anchor.width + offset, y: anchor.y + anchor.height - contentHeight }\n    default:\n      return { x: cx - contentWidth / 2, y: anchor.y + anchor.height + offset }\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Geometric properties\n// ---------------------------------------------------------------------------\n\n/**\n * Transform properties — geometric transformations (position, rotation, scale)\n * and visual opacity.\n */\nexport interface TransformProps {\n  x?: Animatable<number>\n  y?: Animatable<number>\n  rotation?: Animatable<number>\n  scale?: Animatable<number>\n  scaleX?: Animatable<number>\n  scaleY?: Animatable<number>\n  /** Alpha transparency (0 = fully transparent, 1 = fully opaque) */\n  alpha?: Animatable<number>\n  /**\n   * Z-order / render depth. Higher values render on top.\n   * Supported by both Phaser (native depth property) and Pixi (child index).\n   */\n  depth?: number\n}\n\n// ---------------------------------------------------------------------------\n// Spacing types\n// ---------------------------------------------------------------------------\n\n/** Edge insets for margins and padding */\nexport interface EdgeInsets {\n  top?: number\n  right?: number\n  bottom?: number\n  left?: number\n}\n\n/** Gap insets for horizontal and vertical gaps */\nexport interface GapInsets {\n  horizontal?: number\n  vertical?: number\n}\n\n/** Corner radius specification */\nexport interface CornerRadiusInsets {\n  tl?: number\n  tr?: number\n  bl?: number\n  br?: number\n}\n\n// ---------------------------------------------------------------------------\n// Normalization helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Normalize edge insets — converts number to all-sides object\n */\nexport function normalizeEdgeInsets(value: number | EdgeInsets | undefined): EdgeInsets {\n  if (value === undefined) return {}\n  if (typeof value === 'number') {\n    return { top: value, right: value, bottom: value, left: value }\n  }\n  return value\n}\n\n/**\n * Normalize corner radius — converts number to all-corners object\n */\nexport function normalizeCornerRadius(\n  value: number | CornerRadiusInsets | undefined\n): number | CornerRadiusInsets {\n  if (value === undefined) return 0\n  if (typeof value === 'number') return value\n  return value\n}\n\n/**\n * Normalize gap values — converts number to GapInsets object\n */\nexport function normalizeGap(value: number | GapInsets | undefined): {\n  horizontal: number\n  vertical: number\n} {\n  if (value === undefined) return { horizontal: 0, vertical: 0 }\n  if (typeof value === 'number') return { horizontal: value, vertical: value }\n  return {\n    horizontal: value.horizontal ?? 0,\n    vertical: value.vertical ?? 0,\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Layout properties\n// ---------------------------------------------------------------------------\n\n/**\n * Layout properties — sizing, spacing, and layout participation.\n * Renderer-neutral. Every renderer maps these to its native layout system.\n */\nexport interface LayoutProps {\n  /** Visibility and layout participation */\n  visible?: boolean | Display\n\n  /** If true, object is rendered but excluded from layout calculations */\n  headless?: boolean\n\n  /** Width: number (px), \"50%\", \"100vw\", \"auto\", \"fill\", \"calc(...)\" */\n  width?: SizeValue | undefined\n\n  /** Height: number (px), \"50%\", \"100vh\", \"auto\", \"fill\", \"calc(...)\" */\n  height?: SizeValue | undefined\n\n  /** Minimum width constraint */\n  minWidth?: SizeValue | undefined\n\n  /** Minimum height constraint */\n  minHeight?: SizeValue | undefined\n\n  /** Maximum width constraint */\n  maxWidth?: SizeValue | undefined\n\n  /** Maximum height constraint */\n  maxHeight?: SizeValue | undefined\n\n  /** Margin outside the container */\n  margin?: number | EdgeInsets | undefined\n\n  /** Padding inside the container */\n  padding?: number | EdgeInsets | undefined\n\n  /** Layout direction: 'column' (default), 'row', 'stack' */\n  direction?: 'row' | 'column' | 'stack'\n\n  /** Gap between children */\n  gap?: number | GapInsets | undefined\n\n  /** Main axis alignment */\n  justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'\n\n  /** Cross axis alignment */\n  alignItems?: 'start' | 'center' | 'end' | 'stretch'\n\n  /** Flex grow factor */\n  flex?: number\n\n  /** Flex shrink factor */\n  flexShrink?: number\n\n  /** Flex basis — initial size before flex distribution */\n  flexBasis?: FlexBasisValue | undefined\n\n  /** Overflow handling: 'visible' (default) or 'hidden' (clipped) */\n  overflow?: 'visible' | 'hidden'\n\n  /** Wrapping behavior for flex layouts */\n  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'\n\n  /** Alignment of wrapped lines */\n  alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch'\n}\n\n// ---------------------------------------------------------------------------\n// Advanced border types (BorderPropsV2)\n// ---------------------------------------------------------------------------\n\n/**\n * Border line style for advanced border rendering.\n * - `'solid'`: Continuous line (default)\n * - `'dashed'`: Segmented line\n * - `'dotted'`: Rounded dotted line\n */\nexport type BorderLineStyle = 'solid' | 'dashed' | 'dotted'\n\n/**\n * Per-side inset values for border widths.\n * Each side can have a different thickness.\n */\nexport type BorderSideInsets<T> = {\n  top?: T\n  right?: T\n  bottom?: T\n  left?: T\n}\n\n/**\n * Advanced border configuration — extended border styling beyond\n * the legacy `borderWidth`/`borderColor`/`borderAlpha` props.\n *\n * When set on `BackgroundProps.border`, this object takes precedence\n * over the legacy border props.\n */\nexport interface BorderPropsV2 {\n  /** Border color (number, e.g. 0xff0000 for red) */\n  color?: number\n  /**\n   * Border opacity.\n   * Accepts either a plain value or an {@link AnimatedSignal}.\n   */\n  alpha?: Animatable<number>\n  /**\n   * Border width in pixels.\n   * - `number`: uniform width on all sides (supports `cornerRadius`)\n   * - `BorderSideInsets<number>`: per-side widths (supports `cornerRadius`)\n   */\n  width?: number | BorderSideInsets<number>\n  /** Line style: `'solid'` (default), `'dashed'`, or `'dotted'` */\n  style?: BorderLineStyle\n  /**\n   * Stroke pattern configuration.\n   *\n   * For `style: 'dashed'`, values are interpreted as alternating dash/gap\n   * lengths, e.g. `[5, 3]`.\n   *\n   * For `style: 'dotted'`, `dash[0]` is the gap and `dash[1]` optionally\n   * overrides the dot diameter.\n   */\n  dash?: number[]\n  /** Offset where the dash pattern starts */\n  dashOffset?: number\n  /** Line cap style: `'butt'`, `'round'`, `'square'`. */\n  cap?: 'butt' | 'round' | 'square'\n  /** Line join style: `'miter'`, `'round'`, `'bevel'`. */\n  join?: 'miter' | 'round' | 'bevel'\n  /**\n   * Border alignment relative to the edge: `'center'`, `'inside'`, `'outside'`.\n   * - `center`: centered on the edge\n   * - `inside`: fully inside the box\n   * - `outside`: fully outside the box\n   */\n  align?: 'center' | 'inside' | 'outside'\n}\n\n// ---------------------------------------------------------------------------\n// Background properties\n// ---------------------------------------------------------------------------\n\n/**\n * Background styling properties — renderer-neutral.\n * Each renderer maps colors and corner radii to its native drawing API.\n */\nexport interface BackgroundProps {\n  backgroundColor?: number | undefined\n  /**\n   * Background fill opacity.\n   * Accepts either a plain value or an {@link AnimatedSignal}.\n   */\n  backgroundAlpha?: Animatable<number> | undefined\n  cornerRadius?: number | CornerRadiusInsets | undefined\n  borderWidth?: number | undefined\n  borderColor?: number | undefined\n  /**\n   * Border stroke opacity.\n   * Accepts either a plain value or an {@link AnimatedSignal}.\n   */\n  borderAlpha?: Animatable<number> | undefined\n  /**\n   * Advanced border configuration (BorderPropsV2).\n   * When set, takes precedence over legacy `borderWidth`/`borderColor`/`borderAlpha`.\n   */\n  border?: BorderPropsV2 | undefined\n}\n\n// ---------------------------------------------------------------------------\n// Gesture properties — renderer-neutral touch / mouse / pointer contracts\n// ---------------------------------------------------------------------------\n\n/**\n * Touch move gesture state.\n */\nexport type TouchMoveState = 'start' | 'move' | 'end'\n\n/**\n * Data passed to gesture event handlers.\n * Renderer-agnostic — the pointer field is opaque.\n * Each renderer fills it with its own pointer type.\n */\nexport interface GestureEventData<TPointer = unknown> {\n  /** Renderer-specific pointer object */\n  pointer: TPointer\n  /** Local X coordinate relative to container origin (0,0) */\n  localX: number\n  /** Local Y coordinate relative to container origin (0,0) */\n  localY: number\n  /** Delta X since last move event (only for onTouchMove) */\n  dx?: number\n  /** Delta Y since last move event (only for onTouchMove) */\n  dy?: number\n  /** Width of the container's hit area */\n  width: number\n  /** Height of the container's hit area */\n  height: number\n  /** Whether pointer is currently inside the container hit area */\n  isInside?: boolean\n  /** Current state of touch move gesture (only for onTouchMove) */\n  state?: TouchMoveState\n\n  /** Stop event propagation to parent containers (DOM-style bubbling) */\n  stopPropagation(): void\n\n  /** Check if propagation has been stopped */\n  isPropagationStopped(): boolean\n}\n\n/**\n * Data passed to wheel event handlers.\n * Renderer-agnostic — pointer/originalEvent are opaque.\n */\nexport interface WheelEventData<TPointer = unknown, TOriginalEvent = unknown> {\n  /** Renderer-specific pointer object, if available */\n  pointer: TPointer\n  /** Local X coordinate relative to container origin (0,0) */\n  localX: number\n  /** Local Y coordinate relative to container origin (0,0) */\n  localY: number\n  /** Wheel scroll delta X (horizontal scrolling) */\n  deltaX: number\n  /** Wheel scroll delta Y (vertical scrolling) */\n  deltaY: number\n  /** Wheel scroll delta Z */\n  deltaZ: number\n  /** Delta mode: 0 = pixels, 1 = lines, 2 = pages */\n  deltaMode: number\n  /** Width of the container's hit area */\n  width: number\n  /** Height of the container's hit area */\n  height: number\n  /** Original platform wheel event */\n  originalEvent: TOriginalEvent\n\n  /** Stop event propagation to parent containers (DOM-style bubbling) */\n  stopPropagation(): void\n\n  /** Check if propagation has been stopped */\n  isPropagationStopped(): boolean\n\n  /** Prevent default browser behavior */\n  preventDefault(): void\n}\n\n/**\n * Tooltip position relative to the target element.\n */\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'\n\n/**\n * Renderer-neutral tooltip animation configuration.\n * Renderers may ignore fields they cannot represent.\n */\nexport interface TooltipAnimation {\n  fadeIn?: number\n  fadeOut?: number\n  move?: { dx?: number; dy?: number }\n  pulse?: boolean\n  pulseScale?: [number, number]\n}\n\n/**\n * Tooltip configuration returned by `onTooltip`.\n * Text-only on purpose so each renderer can draw it natively.\n */\nexport interface TooltipConfig {\n  content: string\n  position?: TooltipPosition\n  showDelay?: number\n  hideDelay?: number\n  offset?: number\n  disabled?: boolean\n  autoDismiss?: number\n  animation?: TooltipAnimation\n}\n\n/**\n * Tooltip callback function.\n * Return `null` / `undefined` to disable the tooltip for the current hover.\n */\nexport type TooltipCallback = () => TooltipConfig | string | null | undefined\n\n/**\n * High-level gesture interaction props.\n * Renderer-neutral — each renderer provides its own GestureManager.\n */\nexport interface GestureProps<TPointer = unknown> {\n  /** Enable gesture system for this container */\n  enableGestures?: boolean\n\n  /** Called on pointer down + up on the same target (click/tap) */\n  onTouch?: (data: GestureEventData<TPointer>) => void\n\n  /** Called when pointer up occurs outside the container */\n  onTouchOutside?: (data: GestureEventData<TPointer>) => void\n\n  /** Called during pointer movement */\n  onTouchMove?: (data: GestureEventData<TPointer>) => void\n\n  /** Called when double tap/click is detected */\n  onDoubleTap?: (data: GestureEventData<TPointer>) => void\n\n  /** Called when pointer is held down for configured duration */\n  onLongPress?: (data: GestureEventData<TPointer>) => void\n\n  /** Called when mouse wheel / trackpad scroll occurs over the container */\n  onWheel?: (data: WheelEventData<TPointer>) => void\n\n  /**\n   * Tooltip configuration callback (desktop / pointer hover only).\n   * The API is portable, the renderer decides how to draw it.\n   */\n  onTooltip?: TooltipCallback\n\n  /** Duration in ms to trigger long press (default: 500ms) */\n  longPressDuration?: number\n\n  /** Max time in ms between taps for double tap (default: 300ms) */\n  doubleTapDelay?: number\n\n  /** Max time in ms for a valid touch/click (default: 500ms) */\n  maxTouchDuration?: number\n}\n"],"names":[],"mappings":"AA4FO,SAAS,gBACd,GACA,GACA,UACA,WACA,UACA,UAAU,GACgB;AAC1B,SAAO;AAAA,IACL,GAAG,KAAK,IAAI,KAAK,IAAI,SAAS,CAAC,GAAG,KAAK,IAAI,SAAS,SAAS,QAAQ,WAAW,OAAO,CAAC;AAAA,IACxF,GAAG,KAAK,IAAI,KAAK,IAAI,SAAS,CAAC,GAAG,KAAK,IAAI,SAAS,SAAS,SAAS,YAAY,OAAO,CAAC;AAAA,EAAA;AAE9F;AAYO,SAAS,mBACd,WAaA,QACA,cACA,eACA,SAAS,GACiB;AAC1B,QAAM,KAAK,OAAO,IAAI,OAAO,QAAQ;AACrC,QAAM,KAAK,OAAO,IAAI,OAAO,SAAS;AAEtC,UAAQ,WAAA;AAAA,IACN,KAAK;AACH,aAAO,EAAE,GAAG,KAAK,eAAe,GAAG,GAAG,OAAO,IAAI,gBAAgB,OAAA;AAAA,IACnE,KAAK;AACH,aAAO,EAAE,GAAG,KAAK,eAAe,GAAG,GAAG,OAAO,IAAI,OAAO,SAAS,OAAA;AAAA,IACnE,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,IAAI,eAAe,QAAQ,GAAG,KAAK,gBAAgB,EAAA;AAAA,IACxE,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,IAAI,OAAO,QAAQ,QAAQ,GAAG,KAAK,gBAAgB,EAAA;AAAA,IACxE,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,GAAG,GAAG,OAAO,IAAI,gBAAgB,OAAA;AAAA,IACtD,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,IAAI,OAAO,QAAQ,cAAc,GAAG,OAAO,IAAI,gBAAgB,OAAA;AAAA,IACpF,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,GAAG,GAAG,OAAO,IAAI,OAAO,SAAS,OAAA;AAAA,IACtD,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,IAAI,OAAO,QAAQ,cAAc,GAAG,OAAO,IAAI,OAAO,SAAS,OAAA;AAAA,IACpF,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,IAAI,eAAe,QAAQ,GAAG,OAAO,EAAA;AAAA,IAC1D,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,IAAI,eAAe,QAAQ,GAAG,OAAO,IAAI,OAAO,SAAS,cAAA;AAAA,IAC9E,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,IAAI,OAAO,QAAQ,QAAQ,GAAG,OAAO,EAAA;AAAA,IAC1D,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,IAAI,OAAO,QAAQ,QAAQ,GAAG,OAAO,IAAI,OAAO,SAAS,cAAA;AAAA,IAC9E;AACE,aAAO,EAAE,GAAG,KAAK,eAAe,GAAG,GAAG,OAAO,IAAI,OAAO,SAAS,OAAA;AAAA,EAAO;AAE9E;AA2DO,SAAS,oBAAoB,OAAoD;AACtF,MAAI,UAAU,OAAW,QAAO,CAAA;AAChC,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,EAAE,KAAK,OAAO,OAAO,OAAO,QAAQ,OAAO,MAAM,MAAA;AAAA,EAC1D;AACA,SAAO;AACT;AAKO,SAAS,sBACd,OAC6B;AAC7B,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,SAAO;AACT;AAKO,SAAS,aAAa,OAG3B;AACA,MAAI,UAAU,OAAW,QAAO,EAAE,YAAY,GAAG,UAAU,EAAA;AAC3D,MAAI,OAAO,UAAU,SAAU,QAAO,EAAE,YAAY,OAAO,UAAU,MAAA;AACrE,SAAO;AAAA,IACL,YAAY,MAAM,cAAc;AAAA,IAChC,UAAU,MAAM,YAAY;AAAA,EAAA;AAEhC;"}

package/dist/design-tokens/design-token-presets.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultSpacingTokens = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48
+};
+const defaultSizeTokens = {
+  xs: 16,
+  sm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64,
+  xxl: 96
+};
+const defaultRadiusTokens = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 16,
+  xl: 24,
+  xxl: 48
+};
+function createTextStyleTokens(textColor) {
+  return {
+    DEFAULT: {
+      fontSize: "16px",
+      color: textColor,
+      fontFamily: "Arial",
+      align: "left"
+    },
+    small: {
+      fontSize: "12px",
+      color: textColor,
+      fontFamily: "Arial",
+      align: "left"
+    },
+    medium: {
+      fontSize: "16px",
+      color: textColor,
+      fontFamily: "Arial",
+      align: "left"
+    },
+    large: {
+      fontSize: "20px",
+      color: textColor,
+      fontFamily: "Arial",
+      align: "left"
+    },
+    title: {
+      fontSize: "28px",
+      color: textColor,
+      fontFamily: "Arial",
+      fontStyle: "bold",
+      align: "left"
+    },
+    heading: {
+      fontSize: "36px",
+      color: textColor,
+      fontFamily: "Arial",
+      fontStyle: "bold",
+      align: "left"
+    },
+    caption: {
+      fontSize: "10px",
+      color: textColor,
+      fontFamily: "Arial",
+      align: "left"
+    }
+  };
+}
+const defaultTextStyleTokens = createTextStyleTokens("#ffffff");
+function createDesignTokens(preset) {
+  return {
+    colors: preset.colors,
+    textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
+    spacing: defaultSpacingTokens,
+    sizes: defaultSizeTokens,
+    radius: defaultRadiusTokens
+  };
+}
+exports.createDesignTokens = createDesignTokens;
+exports.createTextStyleTokens = createTextStyleTokens;
+exports.defaultRadiusTokens = defaultRadiusTokens;
+exports.defaultSizeTokens = defaultSizeTokens;
+exports.defaultSpacingTokens = defaultSpacingTokens;
+exports.defaultTextStyleTokens = defaultTextStyleTokens;
+//# sourceMappingURL=design-token-presets.cjs.map

package/dist/design-tokens/design-token-presets.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-token-presets.cjs","sources":["../../src/design-tokens/design-token-presets.ts"],"sourcesContent":["/**\n * Default design token presets\n * Provides sensible defaults for text styles, spacing, sizes, and radius,\n * plus factory functions to create complete DesignTokens from color presets.\n */\nimport type { ColorPreset } from '../colors/color-presets'\nimport type {\n  DesignTokens,\n  RadiusTokens,\n  SizeTokens,\n  SpacingTokens,\n  TextStyleTokens,\n} from './design-token-types'\n\n/**\n * Default spacing scale\n * Based on 4px base unit\n */\nexport const defaultSpacingTokens: SpacingTokens = {\n  xs: 4,\n  sm: 8,\n  md: 16,\n  lg: 24,\n  xl: 32,\n  xxl: 48,\n}\n\n/**\n * Default size scale\n * For width, height, icon sizes, etc.\n */\nexport const defaultSizeTokens: SizeTokens = {\n  xs: 16,\n  sm: 24,\n  md: 32,\n  lg: 48,\n  xl: 64,\n  xxl: 96,\n}\n\n/**\n * Default border radius scale\n */\nexport const defaultRadiusTokens: RadiusTokens = {\n  none: 0,\n  sm: 4,\n  md: 8,\n  lg: 16,\n  xl: 24,\n  xxl: 48,\n}\n\n/**\n * Create text style tokens with the given base text color\n * @param textColor - Base text color (hex string)\n * @returns TextStyleTokens with color applied\n */\nexport function createTextStyleTokens(textColor: string): TextStyleTokens {\n  return {\n    DEFAULT: {\n      fontSize: '16px',\n      color: textColor,\n      fontFamily: 'Arial',\n      align: 'left',\n    },\n    small: {\n      fontSize: '12px',\n      color: textColor,\n      fontFamily: 'Arial',\n      align: 'left',\n    },\n    medium: {\n      fontSize: '16px',\n      color: textColor,\n      fontFamily: 'Arial',\n      align: 'left',\n    },\n    large: {\n      fontSize: '20px',\n      color: textColor,\n      fontFamily: 'Arial',\n      align: 'left',\n    },\n    title: {\n      fontSize: '28px',\n      color: textColor,\n      fontFamily: 'Arial',\n      fontStyle: 'bold',\n      align: 'left',\n    },\n    heading: {\n      fontSize: '36px',\n      color: textColor,\n      fontFamily: 'Arial',\n      fontStyle: 'bold',\n      align: 'left',\n    },\n    caption: {\n      fontSize: '10px',\n      color: textColor,\n      fontFamily: 'Arial',\n      align: 'left',\n    },\n  }\n}\n\n/**\n * Default text style tokens (white text)\n */\nexport const defaultTextStyleTokens: TextStyleTokens = createTextStyleTokens('#ffffff')\n\n/**\n * Create complete design tokens from a color preset.\n * Combines colors with default text styles, spacing, sizes, and radius tokens.\n * @param preset - Color preset (e.g., oceanBluePreset)\n * @returns Complete DesignTokens object\n */\nexport function createDesignTokens(preset: ColorPreset): DesignTokens {\n  return {\n    colors: preset.colors,\n    textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),\n    spacing: defaultSpacingTokens,\n    sizes: defaultSizeTokens,\n    radius: defaultRadiusTokens,\n  }\n}\n"],"names":[],"mappings":";;AAkBO,MAAM,uBAAsC;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP;AAMO,MAAM,oBAAgC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP;AAKO,MAAM,sBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP;AAOO,SAAS,sBAAsB,WAAoC;AACxE,SAAO;AAAA,IACL,SAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IAAA;AAAA,IAET,OAAO;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IAAA;AAAA,IAET,QAAQ;AAAA,MACN,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IAAA;AAAA,IAET,OAAO;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IAAA;AAAA,IAET,OAAO;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,IAET,SAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,IAET,SAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAKO,MAAM,yBAA0C,sBAAsB,SAAS;AAQ/E,SAAS,mBAAmB,QAAmC;AACpE,SAAO;AAAA,IACL,QAAQ,OAAO;AAAA,IACf,YAAY,sBAAsB,OAAO,OAAO,KAAK,QAAQ,UAAU;AAAA,IACvE,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ;;;;;;;"}

package/dist/design-tokens/design-token-presets.d.ts

@@ -0,0 +1,34 @@
+import { ColorPreset } from '../colors/color-presets';
+import { DesignTokens, RadiusTokens, SizeTokens, SpacingTokens, TextStyleTokens } from './design-token-types';
+/**
+ * Default spacing scale
+ * Based on 4px base unit
+ */
+export declare const defaultSpacingTokens: SpacingTokens;
+/**
+ * Default size scale
+ * For width, height, icon sizes, etc.
+ */
+export declare const defaultSizeTokens: SizeTokens;
+/**
+ * Default border radius scale
+ */
+export declare const defaultRadiusTokens: RadiusTokens;
+/**
+ * Create text style tokens with the given base text color
+ * @param textColor - Base text color (hex string)
+ * @returns TextStyleTokens with color applied
+ */
+export declare function createTextStyleTokens(textColor: string): TextStyleTokens;
+/**
+ * Default text style tokens (white text)
+ */
+export declare const defaultTextStyleTokens: TextStyleTokens;
+/**
+ * Create complete design tokens from a color preset.
+ * Combines colors with default text styles, spacing, sizes, and radius tokens.
+ * @param preset - Color preset (e.g., oceanBluePreset)
+ * @returns Complete DesignTokens object
+ */
+export declare function createDesignTokens(preset: ColorPreset): DesignTokens;
+//# sourceMappingURL=design-token-presets.d.ts.map