@zendir/ui 0.6.2 → 0.7.0

package/dist/react/charts/unified/useChartStream.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChartStream.js","names":[],"sources":["../../../../src/react/charts/unified/useChartStream.ts"],"sourcesContent":["/**\r\n * @zendir/ui - Real-time Chart Streaming Hook\r\n *\r\n * Provides efficient real-time data streaming for charts.\r\n * Handles buffering, throttling, and memory management.\r\n */\r\n\r\nimport { useRef, useCallback, useEffect, useState } from \"react\";\r\nimport type { AstroChartHandle } from \"./AstroChart\";\r\nimport type { TimeSeriesPoint, DataPoint } from \"./types\";\r\n\r\n// =============================================================================\r\n// Types\r\n// =============================================================================\r\n\r\nexport interface StreamOptions {\r\n  /** Maximum data points to keep */\r\n  maxPoints?: number;\r\n  /** Time window in milliseconds (alternative to maxPoints) */\r\n  timeWindow?: number;\r\n  /** Throttle interval in milliseconds */\r\n  throttleMs?: number;\r\n  /** Buffer size before flushing */\r\n  bufferSize?: number;\r\n  /** Enable data decimation for large datasets */\r\n  decimate?: boolean;\r\n  /** Decimation threshold (start decimating above this count) */\r\n  decimateThreshold?: number;\r\n}\r\n\r\nexport interface StreamController {\r\n  /** Push a single data point */\r\n  push: (seriesIndex: number, point: TimeSeriesPoint | DataPoint) => void;\r\n  /** Push multiple data points */\r\n  pushBatch: (\r\n    seriesIndex: number,\r\n    points: (TimeSeriesPoint | DataPoint)[],\r\n  ) => void;\r\n  /** Clear all data */\r\n  clear: () => void;\r\n  /** Pause streaming */\r\n  pause: () => void;\r\n  /** Resume streaming */\r\n  resume: () => void;\r\n  /** Get current state */\r\n  isPaused: boolean;\r\n  /** Get current point count */\r\n  pointCount: number;\r\n}\r\n\r\n// =============================================================================\r\n// Hook Implementation\r\n// =============================================================================\r\n\r\nexport function useChartStream(\r\n  chartRef: React.RefObject<AstroChartHandle>,\r\n  options: StreamOptions = {},\r\n): StreamController {\r\n  const {\r\n    maxPoints: _maxPoints = 1000,\r\n    timeWindow: _timeWindow,\r\n    throttleMs = 16, // ~60fps\r\n    bufferSize = 10,\r\n    decimate = true,\r\n    decimateThreshold = 5000,\r\n  } = options;\r\n\r\n  const bufferRef = useRef<Map<number, (TimeSeriesPoint | DataPoint)[]>>(\r\n    new Map(),\r\n  );\r\n  const lastFlushRef = useRef<number>(0);\r\n  const pointCountRef = useRef<number>(0);\r\n  const [isPaused, setIsPaused] = useState(false);\r\n  const animationFrameRef = useRef<number>();\r\n\r\n  // Flush buffer to chart\r\n  const flush = useCallback(() => {\r\n    const chart = chartRef.current;\r\n    if (!chart || isPaused) return;\r\n\r\n    const now = Date.now();\r\n    if (now - lastFlushRef.current < throttleMs) {\r\n      // Schedule next flush\r\n      animationFrameRef.current = requestAnimationFrame(flush);\r\n      return;\r\n    }\r\n\r\n    bufferRef.current.forEach((points, seriesIndex) => {\r\n      if (points.length === 0) return;\r\n\r\n      // Apply decimation if needed\r\n      let processedPoints = points;\r\n      if (decimate && pointCountRef.current > decimateThreshold) {\r\n        processedPoints = decimateData(points, Math.ceil(points.length / 2));\r\n      }\r\n\r\n      // Append each point\r\n      processedPoints.forEach((point) => {\r\n        chart.appendData(seriesIndex, point);\r\n      });\r\n\r\n      pointCountRef.current += processedPoints.length;\r\n    });\r\n\r\n    // Clear buffer\r\n    bufferRef.current.clear();\r\n    lastFlushRef.current = now;\r\n  }, [chartRef, isPaused, throttleMs, decimate, decimateThreshold]);\r\n\r\n  // Push single point\r\n  const push = useCallback(\r\n    (seriesIndex: number, point: TimeSeriesPoint | DataPoint) => {\r\n      if (isPaused) return;\r\n\r\n      let buffer = bufferRef.current.get(seriesIndex);\r\n      if (!buffer) {\r\n        buffer = [];\r\n        bufferRef.current.set(seriesIndex, buffer);\r\n      }\r\n\r\n      buffer.push(point);\r\n\r\n      // Flush if buffer is full\r\n      if (buffer.length >= bufferSize) {\r\n        flush();\r\n      } else if (!animationFrameRef.current) {\r\n        // Schedule flush\r\n        animationFrameRef.current = requestAnimationFrame(() => {\r\n          animationFrameRef.current = undefined;\r\n          flush();\r\n        });\r\n      }\r\n    },\r\n    [isPaused, bufferSize, flush],\r\n  );\r\n\r\n  // Push batch\r\n  const pushBatch = useCallback(\r\n    (seriesIndex: number, points: (TimeSeriesPoint | DataPoint)[]) => {\r\n      if (isPaused || points.length === 0) return;\r\n\r\n      let buffer = bufferRef.current.get(seriesIndex);\r\n      if (!buffer) {\r\n        buffer = [];\r\n        bufferRef.current.set(seriesIndex, buffer);\r\n      }\r\n\r\n      buffer.push(...points);\r\n      flush();\r\n    },\r\n    [isPaused, flush],\r\n  );\r\n\r\n  // Clear all data\r\n  const clear = useCallback(() => {\r\n    bufferRef.current.clear();\r\n    pointCountRef.current = 0;\r\n    chartRef.current?.clearData();\r\n  }, [chartRef]);\r\n\r\n  // Pause/resume\r\n  const pause = useCallback(() => setIsPaused(true), []);\r\n  const resume = useCallback(() => setIsPaused(false), []);\r\n\r\n  // Cleanup\r\n  useEffect(() => {\r\n    return () => {\r\n      if (animationFrameRef.current) {\r\n        cancelAnimationFrame(animationFrameRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  return {\r\n    push,\r\n    pushBatch,\r\n    clear,\r\n    pause,\r\n    resume,\r\n    isPaused,\r\n    pointCount: pointCountRef.current,\r\n  };\r\n}\r\n\r\n// =============================================================================\r\n// Data Decimation\r\n// =============================================================================\r\n\r\n/**\r\n * Largest Triangle Three Buckets (LTTB) algorithm for data decimation\r\n * Preserves visual shape while reducing point count\r\n */\r\nfunction decimateData<T extends TimeSeriesPoint | DataPoint>(\r\n  data: T[],\r\n  threshold: number,\r\n): T[] {\r\n  if (data.length <= threshold) return data;\r\n\r\n  const result: T[] = [];\r\n  const bucketSize = (data.length - 2) / (threshold - 2);\r\n\r\n  // Always include first point\r\n  result.push(data[0]);\r\n\r\n  let a = 0; // Previous selected point\r\n\r\n  for (let i = 0; i < threshold - 2; i++) {\r\n    // Calculate bucket range\r\n    const bucketStart = Math.floor((i + 1) * bucketSize) + 1;\r\n    const bucketEnd = Math.floor((i + 2) * bucketSize) + 1;\r\n    const bucketLength = Math.min(bucketEnd, data.length) - bucketStart;\r\n\r\n    // Calculate average point in next bucket\r\n    let avgX = 0;\r\n    let avgY = 0;\r\n    const nextBucketStart = Math.floor((i + 2) * bucketSize) + 1;\r\n    const nextBucketEnd = Math.min(\r\n      Math.floor((i + 3) * bucketSize) + 1,\r\n      data.length,\r\n    );\r\n    const nextBucketLength = nextBucketEnd - nextBucketStart;\r\n\r\n    for (let j = nextBucketStart; j < nextBucketEnd; j++) {\r\n      const point = data[j];\r\n      const [x, y] = getPointXY(point);\r\n      avgX += x;\r\n      avgY += y;\r\n    }\r\n    avgX /= nextBucketLength || 1;\r\n    avgY /= nextBucketLength || 1;\r\n\r\n    // Find point with largest triangle area\r\n    const [aX, aY] = getPointXY(data[a]);\r\n    let maxArea = -1;\r\n    let maxIdx = bucketStart;\r\n\r\n    for (let j = bucketStart; j < bucketStart + bucketLength; j++) {\r\n      const point = data[j];\r\n      const [x, y] = getPointXY(point);\r\n\r\n      // Triangle area\r\n      const area = Math.abs((aX - avgX) * (y - aY) - (aX - x) * (avgY - aY));\r\n\r\n      if (area > maxArea) {\r\n        maxArea = area;\r\n        maxIdx = j;\r\n      }\r\n    }\r\n\r\n    result.push(data[maxIdx]);\r\n    a = maxIdx;\r\n  }\r\n\r\n  // Always include last point\r\n  result.push(data[data.length - 1]);\r\n\r\n  return result;\r\n}\r\n\r\nfunction getPointXY(point: TimeSeriesPoint | DataPoint): [number, number] {\r\n  if (\"time\" in point) {\r\n    return [\r\n      typeof point.time === \"number\"\r\n        ? point.time\r\n        : new Date(point.time).getTime(),\r\n      point.value,\r\n    ];\r\n  }\r\n  return [typeof point.x === \"number\" ? point.x : 0, point.y];\r\n}\r\n\r\n// =============================================================================\r\n// WebSocket Stream Hook\r\n// =============================================================================\r\n\r\nexport interface WebSocketStreamOptions extends StreamOptions {\r\n  /** WebSocket URL */\r\n  url: string;\r\n  /** Reconnect on disconnect */\r\n  reconnect?: boolean;\r\n  /** Reconnect delay in milliseconds */\r\n  reconnectDelay?: number;\r\n  /** Maximum reconnect attempts */\r\n  maxReconnects?: number;\r\n  /** Message parser */\r\n  parseMessage?: (\r\n    data: unknown,\r\n  ) => { seriesIndex: number; point: TimeSeriesPoint | DataPoint } | null;\r\n}\r\n\r\nexport interface WebSocketStreamController extends StreamController {\r\n  /** WebSocket connection state */\r\n  connectionState: \"connecting\" | \"connected\" | \"disconnected\" | \"error\";\r\n  /** Manually connect */\r\n  connect: () => void;\r\n  /** Manually disconnect */\r\n  disconnect: () => void;\r\n}\r\n\r\nexport function useWebSocketStream(\r\n  chartRef: React.RefObject<AstroChartHandle>,\r\n  options: WebSocketStreamOptions,\r\n): WebSocketStreamController {\r\n  const {\r\n    url,\r\n    reconnect = true,\r\n    reconnectDelay = 1000,\r\n    maxReconnects = 10,\r\n    parseMessage,\r\n    ...streamOptions\r\n  } = options;\r\n\r\n  const wsRef = useRef<WebSocket | null>(null);\r\n  const reconnectCountRef = useRef(0);\r\n  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout>>();\r\n  const [connectionState, setConnectionState] =\r\n    useState<WebSocketStreamController[\"connectionState\"]>(\"disconnected\");\r\n\r\n  const stream = useChartStream(chartRef, streamOptions);\r\n\r\n  const connect = useCallback(() => {\r\n    if (wsRef.current?.readyState === WebSocket.OPEN) return;\r\n\r\n    setConnectionState(\"connecting\");\r\n    const ws = new WebSocket(url);\r\n\r\n    ws.onopen = () => {\r\n      setConnectionState(\"connected\");\r\n      reconnectCountRef.current = 0;\r\n    };\r\n\r\n    ws.onmessage = (event) => {\r\n      try {\r\n        const data = JSON.parse(event.data);\r\n        const parsed = parseMessage\r\n          ? parseMessage(data)\r\n          : defaultParseMessage(data);\r\n\r\n        if (parsed) {\r\n          stream.push(parsed.seriesIndex, parsed.point);\r\n        }\r\n      } catch (e) {\r\n        if (import.meta.env.DEV) {\r\n          console.error(\"Failed to parse WebSocket message:\", e);\r\n        }\r\n      }\r\n    };\r\n\r\n    ws.onerror = () => {\r\n      setConnectionState(\"error\");\r\n    };\r\n\r\n    ws.onclose = () => {\r\n      setConnectionState(\"disconnected\");\r\n\r\n      if (reconnect && reconnectCountRef.current < maxReconnects) {\r\n        reconnectCountRef.current++;\r\n        reconnectTimerRef.current = setTimeout(\r\n          connect,\r\n          reconnectDelay * reconnectCountRef.current,\r\n        );\r\n      }\r\n    };\r\n\r\n    wsRef.current = ws;\r\n  }, [url, reconnect, reconnectDelay, maxReconnects, parseMessage, stream]);\r\n\r\n  const disconnect = useCallback(() => {\r\n    clearTimeout(reconnectTimerRef.current);\r\n    wsRef.current?.close();\r\n    wsRef.current = null;\r\n  }, []);\r\n\r\n  // Auto-connect on mount\r\n  useEffect(() => {\r\n    connect();\r\n    return disconnect;\r\n  }, [connect, disconnect]);\r\n\r\n  return {\r\n    ...stream,\r\n    connectionState,\r\n    connect,\r\n    disconnect,\r\n  };\r\n}\r\n\r\nfunction defaultParseMessage(\r\n  data: unknown,\r\n): { seriesIndex: number; point: TimeSeriesPoint } | null {\r\n  if (typeof data !== \"object\" || data === null) return null;\r\n\r\n  const obj = data as Record<string, unknown>;\r\n\r\n  if (\"time\" in obj && \"value\" in obj) {\r\n    return {\r\n      seriesIndex: typeof obj.seriesIndex === \"number\" ? obj.seriesIndex : 0,\r\n      point: {\r\n        time: obj.time as number,\r\n        value: obj.value as number,\r\n      },\r\n    };\r\n  }\r\n\r\n  return null;\r\n}\r\n"],"mappings":"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"}
+{"version":3,"file":"useChartStream.js","names":[],"sources":["../../../../src/react/charts/unified/useChartStream.ts"],"sourcesContent":["/**\n * @zendir/ui - Real-time Chart Streaming Hook\n *\n * Provides efficient real-time data streaming for charts.\n * Handles buffering, throttling, and memory management.\n */\n\nimport { useRef, useCallback, useEffect, useState } from \"react\";\nimport type { AstroChartHandle } from \"./AstroChart\";\nimport type { TimeSeriesPoint, DataPoint } from \"./types\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface StreamOptions {\n  /** Maximum data points to keep */\n  maxPoints?: number;\n  /** Time window in milliseconds (alternative to maxPoints) */\n  timeWindow?: number;\n  /** Throttle interval in milliseconds */\n  throttleMs?: number;\n  /** Buffer size before flushing */\n  bufferSize?: number;\n  /** Enable data decimation for large datasets */\n  decimate?: boolean;\n  /** Decimation threshold (start decimating above this count) */\n  decimateThreshold?: number;\n}\n\nexport interface StreamController {\n  /** Push a single data point */\n  push: (seriesIndex: number, point: TimeSeriesPoint | DataPoint) => void;\n  /** Push multiple data points */\n  pushBatch: (\n    seriesIndex: number,\n    points: (TimeSeriesPoint | DataPoint)[],\n  ) => void;\n  /** Clear all data */\n  clear: () => void;\n  /** Pause streaming */\n  pause: () => void;\n  /** Resume streaming */\n  resume: () => void;\n  /** Get current state */\n  isPaused: boolean;\n  /** Get current point count */\n  pointCount: number;\n}\n\n// =============================================================================\n// Hook Implementation\n// =============================================================================\n\nexport function useChartStream(\n  chartRef: React.RefObject<AstroChartHandle>,\n  options: StreamOptions = {},\n): StreamController {\n  const {\n    maxPoints: _maxPoints = 1000,\n    timeWindow: _timeWindow,\n    throttleMs = 16, // ~60fps\n    bufferSize = 10,\n    decimate = true,\n    decimateThreshold = 5000,\n  } = options;\n\n  const bufferRef = useRef<Map<number, (TimeSeriesPoint | DataPoint)[]>>(\n    new Map(),\n  );\n  const lastFlushRef = useRef<number>(0);\n  const pointCountRef = useRef<number>(0);\n  const [isPaused, setIsPaused] = useState(false);\n  const animationFrameRef = useRef<number>();\n\n  // Flush buffer to chart\n  const flush = useCallback(() => {\n    const chart = chartRef.current;\n    if (!chart || isPaused) return;\n\n    const now = Date.now();\n    if (now - lastFlushRef.current < throttleMs) {\n      // Schedule next flush\n      animationFrameRef.current = requestAnimationFrame(flush);\n      return;\n    }\n\n    bufferRef.current.forEach((points, seriesIndex) => {\n      if (points.length === 0) return;\n\n      // Apply decimation if needed\n      let processedPoints = points;\n      if (decimate && pointCountRef.current > decimateThreshold) {\n        processedPoints = decimateData(points, Math.ceil(points.length / 2));\n      }\n\n      // Append each point\n      processedPoints.forEach((point) => {\n        chart.appendData(seriesIndex, point);\n      });\n\n      pointCountRef.current += processedPoints.length;\n    });\n\n    // Clear buffer\n    bufferRef.current.clear();\n    lastFlushRef.current = now;\n  }, [chartRef, isPaused, throttleMs, decimate, decimateThreshold]);\n\n  // Push single point\n  const push = useCallback(\n    (seriesIndex: number, point: TimeSeriesPoint | DataPoint) => {\n      if (isPaused) return;\n\n      let buffer = bufferRef.current.get(seriesIndex);\n      if (!buffer) {\n        buffer = [];\n        bufferRef.current.set(seriesIndex, buffer);\n      }\n\n      buffer.push(point);\n\n      // Flush if buffer is full\n      if (buffer.length >= bufferSize) {\n        flush();\n      } else if (!animationFrameRef.current) {\n        // Schedule flush\n        animationFrameRef.current = requestAnimationFrame(() => {\n          animationFrameRef.current = undefined;\n          flush();\n        });\n      }\n    },\n    [isPaused, bufferSize, flush],\n  );\n\n  // Push batch\n  const pushBatch = useCallback(\n    (seriesIndex: number, points: (TimeSeriesPoint | DataPoint)[]) => {\n      if (isPaused || points.length === 0) return;\n\n      let buffer = bufferRef.current.get(seriesIndex);\n      if (!buffer) {\n        buffer = [];\n        bufferRef.current.set(seriesIndex, buffer);\n      }\n\n      buffer.push(...points);\n      flush();\n    },\n    [isPaused, flush],\n  );\n\n  // Clear all data\n  const clear = useCallback(() => {\n    bufferRef.current.clear();\n    pointCountRef.current = 0;\n    chartRef.current?.clearData();\n  }, [chartRef]);\n\n  // Pause/resume\n  const pause = useCallback(() => setIsPaused(true), []);\n  const resume = useCallback(() => setIsPaused(false), []);\n\n  // Cleanup\n  useEffect(() => {\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    push,\n    pushBatch,\n    clear,\n    pause,\n    resume,\n    isPaused,\n    pointCount: pointCountRef.current,\n  };\n}\n\n// =============================================================================\n// Data Decimation\n// =============================================================================\n\n/**\n * Largest Triangle Three Buckets (LTTB) algorithm for data decimation\n * Preserves visual shape while reducing point count\n */\nfunction decimateData<T extends TimeSeriesPoint | DataPoint>(\n  data: T[],\n  threshold: number,\n): T[] {\n  if (data.length <= threshold) return data;\n\n  const result: T[] = [];\n  const bucketSize = (data.length - 2) / (threshold - 2);\n\n  // Always include first point\n  result.push(data[0]);\n\n  let a = 0; // Previous selected point\n\n  for (let i = 0; i < threshold - 2; i++) {\n    // Calculate bucket range\n    const bucketStart = Math.floor((i + 1) * bucketSize) + 1;\n    const bucketEnd = Math.floor((i + 2) * bucketSize) + 1;\n    const bucketLength = Math.min(bucketEnd, data.length) - bucketStart;\n\n    // Calculate average point in next bucket\n    let avgX = 0;\n    let avgY = 0;\n    const nextBucketStart = Math.floor((i + 2) * bucketSize) + 1;\n    const nextBucketEnd = Math.min(\n      Math.floor((i + 3) * bucketSize) + 1,\n      data.length,\n    );\n    const nextBucketLength = nextBucketEnd - nextBucketStart;\n\n    for (let j = nextBucketStart; j < nextBucketEnd; j++) {\n      const point = data[j];\n      const [x, y] = getPointXY(point);\n      avgX += x;\n      avgY += y;\n    }\n    avgX /= nextBucketLength || 1;\n    avgY /= nextBucketLength || 1;\n\n    // Find point with largest triangle area\n    const [aX, aY] = getPointXY(data[a]);\n    let maxArea = -1;\n    let maxIdx = bucketStart;\n\n    for (let j = bucketStart; j < bucketStart + bucketLength; j++) {\n      const point = data[j];\n      const [x, y] = getPointXY(point);\n\n      // Triangle area\n      const area = Math.abs((aX - avgX) * (y - aY) - (aX - x) * (avgY - aY));\n\n      if (area > maxArea) {\n        maxArea = area;\n        maxIdx = j;\n      }\n    }\n\n    result.push(data[maxIdx]);\n    a = maxIdx;\n  }\n\n  // Always include last point\n  result.push(data[data.length - 1]);\n\n  return result;\n}\n\nfunction getPointXY(point: TimeSeriesPoint | DataPoint): [number, number] {\n  if (\"time\" in point) {\n    return [\n      typeof point.time === \"number\"\n        ? point.time\n        : new Date(point.time).getTime(),\n      point.value,\n    ];\n  }\n  return [typeof point.x === \"number\" ? point.x : 0, point.y];\n}\n\n// =============================================================================\n// WebSocket Stream Hook\n// =============================================================================\n\nexport interface WebSocketStreamOptions extends StreamOptions {\n  /** WebSocket URL */\n  url: string;\n  /** Reconnect on disconnect */\n  reconnect?: boolean;\n  /** Reconnect delay in milliseconds */\n  reconnectDelay?: number;\n  /** Maximum reconnect attempts */\n  maxReconnects?: number;\n  /** Message parser */\n  parseMessage?: (\n    data: unknown,\n  ) => { seriesIndex: number; point: TimeSeriesPoint | DataPoint } | null;\n}\n\nexport interface WebSocketStreamController extends StreamController {\n  /** WebSocket connection state */\n  connectionState: \"connecting\" | \"connected\" | \"disconnected\" | \"error\";\n  /** Manually connect */\n  connect: () => void;\n  /** Manually disconnect */\n  disconnect: () => void;\n}\n\nexport function useWebSocketStream(\n  chartRef: React.RefObject<AstroChartHandle>,\n  options: WebSocketStreamOptions,\n): WebSocketStreamController {\n  const {\n    url,\n    reconnect = true,\n    reconnectDelay = 1000,\n    maxReconnects = 10,\n    parseMessage,\n    ...streamOptions\n  } = options;\n\n  const wsRef = useRef<WebSocket | null>(null);\n  const reconnectCountRef = useRef(0);\n  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout>>();\n  const [connectionState, setConnectionState] =\n    useState<WebSocketStreamController[\"connectionState\"]>(\"disconnected\");\n\n  const stream = useChartStream(chartRef, streamOptions);\n\n  const connect = useCallback(() => {\n    if (wsRef.current?.readyState === WebSocket.OPEN) return;\n\n    setConnectionState(\"connecting\");\n    const ws = new WebSocket(url);\n\n    ws.onopen = () => {\n      setConnectionState(\"connected\");\n      reconnectCountRef.current = 0;\n    };\n\n    ws.onmessage = (event) => {\n      try {\n        const data = JSON.parse(event.data);\n        const parsed = parseMessage\n          ? parseMessage(data)\n          : defaultParseMessage(data);\n\n        if (parsed) {\n          stream.push(parsed.seriesIndex, parsed.point);\n        }\n      } catch (e) {\n        if (import.meta.env.DEV) {\n          console.error(\"Failed to parse WebSocket message:\", e);\n        }\n      }\n    };\n\n    ws.onerror = () => {\n      setConnectionState(\"error\");\n    };\n\n    ws.onclose = () => {\n      setConnectionState(\"disconnected\");\n\n      if (reconnect && reconnectCountRef.current < maxReconnects) {\n        reconnectCountRef.current++;\n        reconnectTimerRef.current = setTimeout(\n          connect,\n          reconnectDelay * reconnectCountRef.current,\n        );\n      }\n    };\n\n    wsRef.current = ws;\n  }, [url, reconnect, reconnectDelay, maxReconnects, parseMessage, stream]);\n\n  const disconnect = useCallback(() => {\n    clearTimeout(reconnectTimerRef.current);\n    wsRef.current?.close();\n    wsRef.current = null;\n  }, []);\n\n  // Auto-connect on mount\n  useEffect(() => {\n    connect();\n    return disconnect;\n  }, [connect, disconnect]);\n\n  return {\n    ...stream,\n    connectionState,\n    connect,\n    disconnect,\n  };\n}\n\nfunction defaultParseMessage(\n  data: unknown,\n): { seriesIndex: number; point: TimeSeriesPoint } | null {\n  if (typeof data !== \"object\" || data === null) return null;\n\n  const obj = data as Record<string, unknown>;\n\n  if (\"time\" in obj && \"value\" in obj) {\n    return {\n      seriesIndex: typeof obj.seriesIndex === \"number\" ? obj.seriesIndex : 0,\n      point: {\n        time: obj.time as number,\n        value: obj.value as number,\n      },\n    };\n  }\n\n  return null;\n}\n"],"mappings":"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"}

package/dist/react/context/DisplaySettingsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplaySettingsContext.js","names":[],"sources":["../../../src/react/context/DisplaySettingsContext.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - DisplaySettingsContext\r\n *\r\n * Centralized context for app-wide display preferences.\r\n * Controls compact mode, accent colors, glass tint, and other display settings.\r\n *\r\n * Features:\r\n * - Compact mode toggle (affects all cards globally)\r\n * - Accent color selection (for card accents)\r\n * - Glass tint selection (for transparent themes)\r\n * - Color target control (both, accent-only, glass-only)\r\n * - LocalStorage persistence\r\n *\r\n * @example\r\n * ```tsx\r\n * import { DisplaySettingsProvider, useDisplaySettings } from '@zendir/ui';\r\n *\r\n * // Wrap your app\r\n * <DisplaySettingsProvider>\r\n *   <App />\r\n * </DisplaySettingsProvider>\r\n *\r\n * // Use in components\r\n * function MyCard() {\r\n *   const { compactMode, accentColor } = useDisplaySettings();\r\n *   return <Card compact={compactMode} />;\r\n * }\r\n * ```\r\n */\r\n\r\nimport React, {\r\n  createContext,\r\n  useContext,\r\n  useState,\r\n  useCallback,\r\n  useMemo,\r\n  useEffect,\r\n  type ReactNode,\r\n} from \"react\";\r\n\r\n// =============================================================================\r\n// Types\r\n// =============================================================================\r\n\r\nexport type ColorTarget = \"both\" | \"accent\" | \"glass\";\r\n\r\nexport interface DisplaySettings {\r\n  /** Global compact mode - affects all cards */\r\n  compactMode: boolean;\r\n\r\n  /** Accent color for cards and UI elements */\r\n  accentColor: string;\r\n\r\n  /** Glass tint color for transparent themes */\r\n  glassTint: string;\r\n\r\n  /** Which color setting to apply: both, accent-only, or glass-only */\r\n  colorTarget: ColorTarget;\r\n\r\n  /** Enable accent-colored borders on cards (for transparent themes) */\r\n  accentBorders: boolean;\r\n}\r\n\r\nexport interface DisplaySettingsContextValue extends DisplaySettings {\r\n  /** Set compact mode on/off */\r\n  setCompactMode: (value: boolean) => void;\r\n\r\n  /** Toggle compact mode */\r\n  toggleCompactMode: () => void;\r\n\r\n  /** Set accent color */\r\n  setAccentColor: (color: string) => void;\r\n\r\n  /** Set glass tint color */\r\n  setGlassTint: (color: string) => void;\r\n\r\n  /** Set which color setting to apply */\r\n  setColorTarget: (target: ColorTarget) => void;\r\n\r\n  /** Set a color that applies based on current target */\r\n  setColor: (color: string) => void;\r\n\r\n  /** Set accent borders on/off */\r\n  setAccentBorders: (value: boolean) => void;\r\n\r\n  /** Toggle accent borders */\r\n  toggleAccentBorders: () => void;\r\n\r\n  /** Reset all settings to defaults */\r\n  resetSettings: () => void;\r\n}\r\n\r\n// =============================================================================\r\n// Preset Colors\r\n// =============================================================================\r\n\r\nexport const PRESET_COLORS = {\r\n  purple: \"#8b5cf6\",\r\n  blue: \"#3b82f6\",\r\n  cyan: \"#06b6d4\",\r\n  teal: \"#14b8a6\",\r\n  green: \"#10b981\",\r\n  lime: \"#84cc16\",\r\n  amber: \"#f59e0b\",\r\n  orange: \"#f97316\",\r\n  pink: \"#ec4899\",\r\n  red: \"#ef4444\",\r\n  slate: \"#64748b\",\r\n} as const;\r\n\r\nexport const GLASS_TINTS = {\r\n  ...PRESET_COLORS,\r\n  clear: \"rgba(255,255,255,0.05)\",\r\n  dark: \"rgba(0,0,0,0.3)\",\r\n} as const;\r\n\r\nexport type PresetColorKey = keyof typeof PRESET_COLORS;\r\nexport type GlassTintKey = keyof typeof GLASS_TINTS;\r\n\r\n// =============================================================================\r\n// Default Values\r\n// =============================================================================\r\n\r\nconst DEFAULT_SETTINGS: DisplaySettings = {\r\n  compactMode: false,\r\n  accentColor: PRESET_COLORS.purple,\r\n  glassTint: PRESET_COLORS.purple,\r\n  colorTarget: \"both\",\r\n  accentBorders: true,\r\n};\r\n\r\nconst STORAGE_KEY = \"zendir-display-settings\";\r\n\r\n// =============================================================================\r\n// Context\r\n// =============================================================================\r\n\r\nconst DisplaySettingsContext =\r\n  createContext<DisplaySettingsContextValue | null>(null);\r\n\r\n// =============================================================================\r\n// Provider Props\r\n// =============================================================================\r\n\r\nexport interface DisplaySettingsProviderProps {\r\n  children: ReactNode;\r\n\r\n  /** Initial compact mode state */\r\n  defaultCompactMode?: boolean;\r\n\r\n  /** Initial accent color */\r\n  defaultAccentColor?: string;\r\n\r\n  /** Initial glass tint color */\r\n  defaultGlassTint?: string;\r\n\r\n  /** Initial color target */\r\n  defaultColorTarget?: ColorTarget;\r\n\r\n  /** Initial accent borders state */\r\n  defaultAccentBorders?: boolean;\r\n\r\n  /** Enable localStorage persistence (default: true) */\r\n  persist?: boolean;\r\n}\r\n\r\n// =============================================================================\r\n// Provider Component\r\n// =============================================================================\r\n\r\nexport function DisplaySettingsProvider({\r\n  children,\r\n  defaultCompactMode,\r\n  defaultAccentColor,\r\n  defaultGlassTint,\r\n  defaultColorTarget,\r\n  defaultAccentBorders,\r\n  persist = true,\r\n}: DisplaySettingsProviderProps): React.ReactElement {\r\n  // Initialize state from localStorage or defaults\r\n  const [settings, setSettings] = useState<DisplaySettings>(() => {\r\n    if (persist && typeof window !== \"undefined\") {\r\n      try {\r\n        const stored = localStorage.getItem(STORAGE_KEY);\r\n        if (stored) {\r\n          const parsed = JSON.parse(stored);\r\n          return {\r\n            compactMode:\r\n              parsed.compactMode ??\r\n              defaultCompactMode ??\r\n              DEFAULT_SETTINGS.compactMode,\r\n            accentColor:\r\n              parsed.accentColor ??\r\n              defaultAccentColor ??\r\n              DEFAULT_SETTINGS.accentColor,\r\n            glassTint:\r\n              parsed.glassTint ??\r\n              defaultGlassTint ??\r\n              DEFAULT_SETTINGS.glassTint,\r\n            colorTarget:\r\n              parsed.colorTarget ??\r\n              defaultColorTarget ??\r\n              DEFAULT_SETTINGS.colorTarget,\r\n            accentBorders:\r\n              parsed.accentBorders ??\r\n              defaultAccentBorders ??\r\n              DEFAULT_SETTINGS.accentBorders,\r\n          };\r\n        }\r\n      } catch {\r\n        // Ignore parse errors\r\n      }\r\n    }\r\n\r\n    return {\r\n      compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\r\n      accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\r\n      glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\r\n      colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\r\n      accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\r\n    };\r\n  });\r\n\r\n  // Persist to localStorage when settings change\r\n  useEffect(() => {\r\n    if (persist && typeof window !== \"undefined\") {\r\n      try {\r\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\r\n      } catch {\r\n        // Ignore storage errors\r\n      }\r\n    }\r\n  }, [settings, persist]);\r\n\r\n  // Setters\r\n  const setCompactMode = useCallback((value: boolean) => {\r\n    setSettings((prev) => ({ ...prev, compactMode: value }));\r\n  }, []);\r\n\r\n  const toggleCompactMode = useCallback(() => {\r\n    setSettings((prev) => ({ ...prev, compactMode: !prev.compactMode }));\r\n  }, []);\r\n\r\n  const setAccentColor = useCallback((color: string) => {\r\n    setSettings((prev) => ({ ...prev, accentColor: color }));\r\n  }, []);\r\n\r\n  const setGlassTint = useCallback((color: string) => {\r\n    setSettings((prev) => ({ ...prev, glassTint: color }));\r\n  }, []);\r\n\r\n  const setColorTarget = useCallback((target: ColorTarget) => {\r\n    setSettings((prev) => ({ ...prev, colorTarget: target }));\r\n  }, []);\r\n\r\n  // Set color based on current target\r\n  const setColor = useCallback((color: string) => {\r\n    setSettings((prev) => {\r\n      switch (prev.colorTarget) {\r\n        case \"accent\":\r\n          return { ...prev, accentColor: color };\r\n        case \"glass\":\r\n          return { ...prev, glassTint: color };\r\n        case \"both\":\r\n        default:\r\n          return { ...prev, accentColor: color, glassTint: color };\r\n      }\r\n    });\r\n  }, []);\r\n\r\n  const setAccentBorders = useCallback((value: boolean) => {\r\n    setSettings((prev) => ({ ...prev, accentBorders: value }));\r\n  }, []);\r\n\r\n  const toggleAccentBorders = useCallback(() => {\r\n    setSettings((prev) => ({ ...prev, accentBorders: !prev.accentBorders }));\r\n  }, []);\r\n\r\n  const resetSettings = useCallback(() => {\r\n    setSettings(DEFAULT_SETTINGS);\r\n  }, []);\r\n\r\n  // Memoized context value\r\n  const value = useMemo<DisplaySettingsContextValue>(\r\n    () => ({\r\n      ...settings,\r\n      setCompactMode,\r\n      toggleCompactMode,\r\n      setAccentColor,\r\n      setGlassTint,\r\n      setColorTarget,\r\n      setColor,\r\n      setAccentBorders,\r\n      toggleAccentBorders,\r\n      resetSettings,\r\n    }),\r\n    [\r\n      settings,\r\n      setCompactMode,\r\n      toggleCompactMode,\r\n      setAccentColor,\r\n      setGlassTint,\r\n      setColorTarget,\r\n      setColor,\r\n      setAccentBorders,\r\n      toggleAccentBorders,\r\n      resetSettings,\r\n    ],\r\n  );\r\n\r\n  return (\r\n    <DisplaySettingsContext.Provider value={value}>\r\n      {children}\r\n    </DisplaySettingsContext.Provider>\r\n  );\r\n}\r\n\r\n// =============================================================================\r\n// Hook\r\n// =============================================================================\r\n\r\n/**\r\n * Access display settings context\r\n * Must be used within a DisplaySettingsProvider\r\n */\r\nexport function useDisplaySettings(): DisplaySettingsContextValue {\r\n  const context = useContext(DisplaySettingsContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\r\n      \"useDisplaySettings must be used within a DisplaySettingsProvider\",\r\n    );\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\n/**\r\n * Optional hook that returns null if not within provider\r\n * Useful for components that should work with or without the provider\r\n */\r\nexport function useDisplaySettingsOptional(): DisplaySettingsContextValue | null {\r\n  return useContext(DisplaySettingsContext);\r\n}\r\n\r\n// =============================================================================\r\n// Utility Functions\r\n// =============================================================================\r\n\r\n/**\r\n * Get effective compact mode value\r\n * Priority: explicit prop > context value > default (false)\r\n */\r\nexport function getEffectiveCompactMode(\r\n  propValue: boolean | undefined,\r\n  contextValue: boolean | undefined,\r\n): boolean {\r\n  if (propValue !== undefined) return propValue;\r\n  if (contextValue !== undefined) return contextValue;\r\n  return false;\r\n}\r\n\r\n/**\r\n * Get effective accent borders value\r\n * Priority: explicit prop > context value > default (true)\r\n */\r\nexport function getEffectiveAccentBorders(\r\n  propValue: boolean | undefined,\r\n  contextValue: boolean | undefined,\r\n): boolean {\r\n  if (propValue !== undefined) return propValue;\r\n  if (contextValue !== undefined) return contextValue;\r\n  return true;\r\n}\r\n\r\n/**\r\n * Hook to get card border style based on accentBorders setting\r\n * Returns the appropriate border style for transparent themes\r\n */\r\nexport function useCardBorderStyle(\r\n  tokens: any,\r\n  isTransparentTheme: boolean,\r\n): React.CSSProperties {\r\n  const displaySettings = useDisplaySettingsOptional();\r\n  const accentBorders = displaySettings?.accentBorders ?? true;\r\n\r\n  if (!isTransparentTheme) {\r\n    return (\r\n      tokens.colors.border.cardStyle ?? {\r\n        border: `1px solid ${tokens.colors.border.muted}`,\r\n      }\r\n    );\r\n  }\r\n\r\n  if (accentBorders) {\r\n    return tokens.colors.border.cardStyle ?? {};\r\n  }\r\n\r\n  // Fallback to subtle neutral border when accent borders disabled\r\n  return { border: \"1px solid rgba(255, 255, 255, 0.08)\" };\r\n}\r\n\r\nexport default DisplaySettingsProvider;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,IAAa,gBAAgB;CAC3B,QAAQ;CACR,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACN,KAAK;CACL,OAAO;AACT;AAEA,IAAa,cAAc;CACzB,GAAG;CACH,OAAO;CACP,MAAM;AACR;AASA,IAAM,mBAAoC;CACxC,aAAa;CACb,aAAa,cAAc;CAC3B,WAAW,cAAc;CACzB,aAAa;CACb,eAAe;AACjB;AAEA,IAAM,cAAc;AAMpB,IAAM,yBACJ,cAAkD,IAAI;AAgCxD,SAAgB,wBAAwB,EACtC,UACA,oBACA,oBACA,kBACA,oBACA,sBACA,UAAU,QACyC;CAEnD,MAAM,CAAC,UAAU,eAAe,eAAgC;EAC9D,IAAI,WAAW,OAAO,WAAW,aAC/B,IAAI;GACF,MAAM,SAAS,aAAa,QAAQ,WAAW;GAC/C,IAAI,QAAQ;IACV,MAAM,SAAS,KAAK,MAAM,MAAM;IAChC,OAAO;KACL,aACE,OAAO,eACP,sBACA,iBAAiB;KACnB,aACE,OAAO,eACP,sBACA,iBAAiB;KACnB,WACE,OAAO,aACP,oBACA,iBAAiB;KACnB,aACE,OAAO,eACP,sBACA,iBAAiB;KACnB,eACE,OAAO,iBACP,wBACA,iBAAiB;IACrB;GACF;EACF,QAAQ,CAER;EAGF,OAAO;GACL,aAAa,sBAAsB,iBAAiB;GACpD,aAAa,sBAAsB,iBAAiB;GACpD,WAAW,oBAAoB,iBAAiB;GAChD,aAAa,sBAAsB,iBAAiB;GACpD,eAAe,wBAAwB,iBAAiB;EAC1D;CACF,CAAC;CAGD,gBAAgB;EACd,IAAI,WAAW,OAAO,WAAW,aAC/B,IAAI;GACF,aAAa,QAAQ,aAAa,KAAK,UAAU,QAAQ,CAAC;EAC5D,QAAQ,CAER;CAEJ,GAAG,CAAC,UAAU,OAAO,CAAC;CAGtB,MAAM,iBAAiB,aAAa,UAAmB;EACrD,aAAa,UAAU;GAAE,GAAG;GAAM,aAAa;EAAM,EAAE;CACzD,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAoB,kBAAkB;EAC1C,aAAa,UAAU;GAAE,GAAG;GAAM,aAAa,CAAC,KAAK;EAAY,EAAE;CACrE,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAiB,aAAa,UAAkB;EACpD,aAAa,UAAU;GAAE,GAAG;GAAM,aAAa;EAAM,EAAE;CACzD,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,aAAa,UAAkB;EAClD,aAAa,UAAU;GAAE,GAAG;GAAM,WAAW;EAAM,EAAE;CACvD,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAiB,aAAa,WAAwB;EAC1D,aAAa,UAAU;GAAE,GAAG;GAAM,aAAa;EAAO,EAAE;CAC1D,GAAG,CAAC,CAAC;CAGL,MAAM,WAAW,aAAa,UAAkB;EAC9C,aAAa,SAAS;GACpB,QAAQ,KAAK,aAAb;IACE,KAAK,UACH,OAAO;KAAE,GAAG;KAAM,aAAa;IAAM;IACvC,KAAK,SACH,OAAO;KAAE,GAAG;KAAM,WAAW;IAAM;IAErC,SACE,OAAO;KAAE,GAAG;KAAM,aAAa;KAAO,WAAW;IAAM;GAC3D;EACF,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,mBAAmB,aAAa,UAAmB;EACvD,aAAa,UAAU;GAAE,GAAG;GAAM,eAAe;EAAM,EAAE;CAC3D,GAAG,CAAC,CAAC;CAEL,MAAM,sBAAsB,kBAAkB;EAC5C,aAAa,UAAU;GAAE,GAAG;GAAM,eAAe,CAAC,KAAK;EAAc,EAAE;CACzE,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,kBAAkB;EACtC,YAAY,gBAAgB;CAC9B,GAAG,CAAC,CAAC;CAGL,MAAM,QAAQ,eACL;EACL,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,uBAAuB,UAAxB;EAAwC;EACrC;CAC8B,CAAA;AAErC;;;;;AAUA,SAAgB,qBAAkD;CAChE,MAAM,UAAU,WAAW,sBAAsB;CAEjD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,kEACF;CAGF,OAAO;AACT;;;;;AAMA,SAAgB,6BAAiE;CAC/E,OAAO,WAAW,sBAAsB;AAC1C;;;;;AAUA,SAAgB,wBACd,WACA,cACS;CACT,IAAI,cAAc,KAAA,GAAW,OAAO;CACpC,IAAI,iBAAiB,KAAA,GAAW,OAAO;CACvC,OAAO;AACT;;;;;AAmBA,SAAgB,mBACd,QACA,oBACqB;CAErB,MAAM,gBADkB,2BACF,CAAA,EAAiB,iBAAiB;CAExD,IAAI,CAAC,oBACH,OACE,OAAO,OAAO,OAAO,aAAa,EAChC,QAAQ,aAAa,OAAO,OAAO,OAAO,QAC5C;CAIJ,IAAI,eACF,OAAO,OAAO,OAAO,OAAO,aAAa,CAAC;CAI5C,OAAO,EAAE,QAAQ,sCAAsC;AACzD"}
+{"version":3,"file":"DisplaySettingsContext.js","names":[],"sources":["../../../src/react/context/DisplaySettingsContext.tsx"],"sourcesContent":["/**\n * @zendir/ui - DisplaySettingsContext\n *\n * Centralized context for app-wide display preferences.\n * Controls compact mode, accent colors, glass tint, and other display settings.\n *\n * Features:\n * - Compact mode toggle (affects all cards globally)\n * - Accent color selection (for card accents)\n * - Glass tint selection (for transparent themes)\n * - Color target control (both, accent-only, glass-only)\n * - LocalStorage persistence\n *\n * @example\n * ```tsx\n * import { DisplaySettingsProvider, useDisplaySettings } from '@zendir/ui';\n *\n * // Wrap your app\n * <DisplaySettingsProvider>\n *   <App />\n * </DisplaySettingsProvider>\n *\n * // Use in components\n * function MyCard() {\n *   const { compactMode, accentColor } = useDisplaySettings();\n *   return <Card compact={compactMode} />;\n * }\n * ```\n */\n\nimport React, {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useMemo,\n  useEffect,\n  type ReactNode,\n} from \"react\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type ColorTarget = \"both\" | \"accent\" | \"glass\";\n\nexport interface DisplaySettings {\n  /** Global compact mode - affects all cards */\n  compactMode: boolean;\n\n  /** Accent color for cards and UI elements */\n  accentColor: string;\n\n  /** Glass tint color for transparent themes */\n  glassTint: string;\n\n  /** Which color setting to apply: both, accent-only, or glass-only */\n  colorTarget: ColorTarget;\n\n  /** Enable accent-colored borders on cards (for transparent themes) */\n  accentBorders: boolean;\n}\n\nexport interface DisplaySettingsContextValue extends DisplaySettings {\n  /** Set compact mode on/off */\n  setCompactMode: (value: boolean) => void;\n\n  /** Toggle compact mode */\n  toggleCompactMode: () => void;\n\n  /** Set accent color */\n  setAccentColor: (color: string) => void;\n\n  /** Set glass tint color */\n  setGlassTint: (color: string) => void;\n\n  /** Set which color setting to apply */\n  setColorTarget: (target: ColorTarget) => void;\n\n  /** Set a color that applies based on current target */\n  setColor: (color: string) => void;\n\n  /** Set accent borders on/off */\n  setAccentBorders: (value: boolean) => void;\n\n  /** Toggle accent borders */\n  toggleAccentBorders: () => void;\n\n  /** Reset all settings to defaults */\n  resetSettings: () => void;\n}\n\n// =============================================================================\n// Preset Colors\n// =============================================================================\n\nexport const PRESET_COLORS = {\n  purple: \"#8b5cf6\",\n  blue: \"#3b82f6\",\n  cyan: \"#06b6d4\",\n  teal: \"#14b8a6\",\n  green: \"#10b981\",\n  lime: \"#84cc16\",\n  amber: \"#f59e0b\",\n  orange: \"#f97316\",\n  pink: \"#ec4899\",\n  red: \"#ef4444\",\n  slate: \"#64748b\",\n} as const;\n\nexport const GLASS_TINTS = {\n  ...PRESET_COLORS,\n  clear: \"rgba(255,255,255,0.05)\",\n  dark: \"rgba(0,0,0,0.3)\",\n} as const;\n\nexport type PresetColorKey = keyof typeof PRESET_COLORS;\nexport type GlassTintKey = keyof typeof GLASS_TINTS;\n\n// =============================================================================\n// Default Values\n// =============================================================================\n\nconst DEFAULT_SETTINGS: DisplaySettings = {\n  compactMode: false,\n  accentColor: PRESET_COLORS.purple,\n  glassTint: PRESET_COLORS.purple,\n  colorTarget: \"both\",\n  accentBorders: true,\n};\n\nconst STORAGE_KEY = \"zendir-display-settings\";\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst DisplaySettingsContext =\n  createContext<DisplaySettingsContextValue | null>(null);\n\n// =============================================================================\n// Provider Props\n// =============================================================================\n\nexport interface DisplaySettingsProviderProps {\n  children: ReactNode;\n\n  /** Initial compact mode state */\n  defaultCompactMode?: boolean;\n\n  /** Initial accent color */\n  defaultAccentColor?: string;\n\n  /** Initial glass tint color */\n  defaultGlassTint?: string;\n\n  /** Initial color target */\n  defaultColorTarget?: ColorTarget;\n\n  /** Initial accent borders state */\n  defaultAccentBorders?: boolean;\n\n  /** Enable localStorage persistence (default: true) */\n  persist?: boolean;\n}\n\n// =============================================================================\n// Provider Component\n// =============================================================================\n\nexport function DisplaySettingsProvider({\n  children,\n  defaultCompactMode,\n  defaultAccentColor,\n  defaultGlassTint,\n  defaultColorTarget,\n  defaultAccentBorders,\n  persist = true,\n}: DisplaySettingsProviderProps): React.ReactElement {\n  // Initialize state from localStorage or defaults\n  const [settings, setSettings] = useState<DisplaySettings>(() => {\n    if (persist && typeof window !== \"undefined\") {\n      try {\n        const stored = localStorage.getItem(STORAGE_KEY);\n        if (stored) {\n          const parsed = JSON.parse(stored);\n          return {\n            compactMode:\n              parsed.compactMode ??\n              defaultCompactMode ??\n              DEFAULT_SETTINGS.compactMode,\n            accentColor:\n              parsed.accentColor ??\n              defaultAccentColor ??\n              DEFAULT_SETTINGS.accentColor,\n            glassTint:\n              parsed.glassTint ??\n              defaultGlassTint ??\n              DEFAULT_SETTINGS.glassTint,\n            colorTarget:\n              parsed.colorTarget ??\n              defaultColorTarget ??\n              DEFAULT_SETTINGS.colorTarget,\n            accentBorders:\n              parsed.accentBorders ??\n              defaultAccentBorders ??\n              DEFAULT_SETTINGS.accentBorders,\n          };\n        }\n      } catch {\n        // Ignore parse errors\n      }\n    }\n\n    return {\n      compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\n      accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\n      glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\n      colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\n      accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\n    };\n  });\n\n  // Persist to localStorage when settings change\n  useEffect(() => {\n    if (persist && typeof window !== \"undefined\") {\n      try {\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\n      } catch {\n        // Ignore storage errors\n      }\n    }\n  }, [settings, persist]);\n\n  // Setters\n  const setCompactMode = useCallback((value: boolean) => {\n    setSettings((prev) => ({ ...prev, compactMode: value }));\n  }, []);\n\n  const toggleCompactMode = useCallback(() => {\n    setSettings((prev) => ({ ...prev, compactMode: !prev.compactMode }));\n  }, []);\n\n  const setAccentColor = useCallback((color: string) => {\n    setSettings((prev) => ({ ...prev, accentColor: color }));\n  }, []);\n\n  const setGlassTint = useCallback((color: string) => {\n    setSettings((prev) => ({ ...prev, glassTint: color }));\n  }, []);\n\n  const setColorTarget = useCallback((target: ColorTarget) => {\n    setSettings((prev) => ({ ...prev, colorTarget: target }));\n  }, []);\n\n  // Set color based on current target\n  const setColor = useCallback((color: string) => {\n    setSettings((prev) => {\n      switch (prev.colorTarget) {\n        case \"accent\":\n          return { ...prev, accentColor: color };\n        case \"glass\":\n          return { ...prev, glassTint: color };\n        case \"both\":\n        default:\n          return { ...prev, accentColor: color, glassTint: color };\n      }\n    });\n  }, []);\n\n  const setAccentBorders = useCallback((value: boolean) => {\n    setSettings((prev) => ({ ...prev, accentBorders: value }));\n  }, []);\n\n  const toggleAccentBorders = useCallback(() => {\n    setSettings((prev) => ({ ...prev, accentBorders: !prev.accentBorders }));\n  }, []);\n\n  const resetSettings = useCallback(() => {\n    setSettings(DEFAULT_SETTINGS);\n  }, []);\n\n  // Memoized context value\n  const value = useMemo<DisplaySettingsContextValue>(\n    () => ({\n      ...settings,\n      setCompactMode,\n      toggleCompactMode,\n      setAccentColor,\n      setGlassTint,\n      setColorTarget,\n      setColor,\n      setAccentBorders,\n      toggleAccentBorders,\n      resetSettings,\n    }),\n    [\n      settings,\n      setCompactMode,\n      toggleCompactMode,\n      setAccentColor,\n      setGlassTint,\n      setColorTarget,\n      setColor,\n      setAccentBorders,\n      toggleAccentBorders,\n      resetSettings,\n    ],\n  );\n\n  return (\n    <DisplaySettingsContext.Provider value={value}>\n      {children}\n    </DisplaySettingsContext.Provider>\n  );\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Access display settings context\n * Must be used within a DisplaySettingsProvider\n */\nexport function useDisplaySettings(): DisplaySettingsContextValue {\n  const context = useContext(DisplaySettingsContext);\n\n  if (!context) {\n    throw new Error(\n      \"useDisplaySettings must be used within a DisplaySettingsProvider\",\n    );\n  }\n\n  return context;\n}\n\n/**\n * Optional hook that returns null if not within provider\n * Useful for components that should work with or without the provider\n */\nexport function useDisplaySettingsOptional(): DisplaySettingsContextValue | null {\n  return useContext(DisplaySettingsContext);\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Get effective compact mode value\n * Priority: explicit prop > context value > default (false)\n */\nexport function getEffectiveCompactMode(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined,\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return false;\n}\n\n/**\n * Get effective accent borders value\n * Priority: explicit prop > context value > default (true)\n */\nexport function getEffectiveAccentBorders(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined,\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return true;\n}\n\n/**\n * Hook to get card border style based on accentBorders setting\n * Returns the appropriate border style for transparent themes\n */\nexport function useCardBorderStyle(\n  tokens: any,\n  isTransparentTheme: boolean,\n): React.CSSProperties {\n  const displaySettings = useDisplaySettingsOptional();\n  const accentBorders = displaySettings?.accentBorders ?? true;\n\n  if (!isTransparentTheme) {\n    return (\n      tokens.colors.border.cardStyle ?? {\n        border: `1px solid ${tokens.colors.border.muted}`,\n      }\n    );\n  }\n\n  if (accentBorders) {\n    return tokens.colors.border.cardStyle ?? {};\n  }\n\n  // Fallback to subtle neutral border when accent borders disabled\n  return { border: \"1px solid rgba(255, 255, 255, 0.08)\" };\n}\n\nexport default DisplaySettingsProvider;\n"],"mappings":"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"}

package/dist/react/context/SpatialSelectionContext.d.ts

@@ -19,7 +19,7 @@ export interface SpatialSelectionProviderProps {
     /** Called whenever the selection changes (uncontrolled or controlled). */
     onSelectionChange?: (id: string | null) => void;
 }
-export declare function SpatialSelectionProvider({ children, defaultSelectedId, selectedId: controlledId, onSelectionChange, }: SpatialSelectionProviderProps): import("react").JSX.Element;
+export declare function SpatialSelectionProvider({ children, defaultSelectedId, selectedId: controlledId, onSelectionChange, }: SpatialSelectionProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Read the spatial-selection context. Returns `null` when used outside
  * a `<SpatialSelectionProvider>` — components MUST handle that case so

package/dist/react/core/display/Logo.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export type LogoSubBrand = "docs" | "studio" | "editor" | "api";
+export interface LogoProps {
+    /** Sub-brand lockup to render alongside the primary mark. Omit for the primary "ZENDIR" lockup. */
+    subBrand?: LogoSubBrand;
+    /** Render only the glyph mark (no wordmark) — for collapsed nav rails, favicons, avatar crops. */
+    markOnly?: boolean;
+    /** Rendered height in pixels; width follows automatically to preserve the lockup's aspect ratio. */
+    height?: number;
+    /** Ink color. Defaults to the current theme's primary text color. */
+    color?: string;
+    /** Accessibility label. Defaults to "Zendir" or "Zendir <Sub-brand>". */
+    "aria-label"?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Logo: React.NamedExoticComponent<LogoProps>;
+export default Logo;

package/dist/react/core/display/Logo.js

@@ -0,0 +1,96 @@
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/display/Logo.tsx
+/**
+* @zendir/ui - Logo Component
+*
+* The Zendir brand mark and wordmark, plus the sub-brand lockups for
+* Zendir's own product surfaces (Docs, Studio, Editor, API).
+*
+* Source: Figma "Zendir Design System — Logos" page. Mark and wordmark
+* paths are shared across every lockup; only the sub-brand suffix path
+* changes. All paths render with `fill="currentColor"` so a single asset
+* covers every surface — light, dark, navy, elevated — instead of
+* maintaining separate light/dark SVG files.
+*
+* @example
+* ```tsx
+* // Primary lockup — mark + "ZENDIR"
+* <Logo />
+*
+* // Sub-brand lockup
+* <Logo subBrand="studio" />
+*
+* // Mark only (e.g. collapsed nav rail, avatar contexts)
+* <Logo markOnly />
+*
+* // Explicit ink color (default follows tokens.colors.text.primary)
+* <Logo subBrand="api" color="#0D1429" />
+* ```
+*/
+var MARK_PATHS = ["M63.8133 56.5335H14.48C17.9066 46.2001 27.6533 38.7468 39.1466 38.7468C50.64 38.7468 60.3733 46.2001 63.8133 56.5335Z", "M70.68 30.2268L45.68 16.4001C45.2933 16.1868 45.0666 15.7868 45.0666 15.3468L45.08 12.5467C45.08 9.94675 45.0666 10.0001 43.0933 10.0001H38.08H35.36C33.36 10.0001 33.3733 9.96008 33.3733 12.5201L33.36 15.3201C33.36 15.7601 33.12 16.1601 32.7333 16.3735L7.66663 30.0668C7.07996 30.3868 6.70663 31.0135 6.69329 31.6935L6.66663 41.0401C6.66663 41.3868 6.85329 41.7068 7.14663 41.8935C7.45329 42.0668 7.81329 42.0801 8.11996 41.9068L33.24 28.1868C33.6933 27.8801 33.92 27.8268 33.9733 27.3068C33.9733 25.0935 34.0133 25.5601 34.0133 23.3468C34.0133 22.0268 33.9333 22.0268 35.36 22.0268H42.2933C44.52 22.0401 44.44 22.0268 44.44 23.3868L44.4266 27.3068C44.4266 27.9868 44.7866 28.0268 45.3866 28.3468L70.2533 42.1068L70.2933 42.1335C70.4 42.1735 70.52 42.2001 70.64 42.2001C70.84 42.2001 71.04 42.1335 71.2 42.0268C71.4666 41.8401 71.6133 41.5468 71.6133 41.2268L71.64 31.8801C71.6266 31.1868 71.2666 30.5601 70.68 30.2268Z"];
+var WORDMARK_PATHS = [
+	"M245.187 14.0401C243.653 14.0401 242.52 14.4268 241.773 15.2135C241.067 16.0001 240.707 17.0268 240.707 18.2935C240.707 19.4935 241.067 20.4935 241.773 21.3201C242.52 22.1068 243.653 22.4935 245.187 22.4935C246.72 22.4935 247.84 22.1068 248.547 21.3201C249.253 20.4935 249.613 19.4935 249.613 18.2935C249.613 17.0268 249.253 16.0001 248.547 15.2135C247.84 14.4401 246.72 14.0401 245.187 14.0401Z",
+	"M249.107 26.1335H241.32V56.5335H249.107V26.1335Z",
+	"M226.093 29.4535C225.08 27.8401 223.787 26.6001 222.227 25.7335C220.44 24.6935 218.347 24.1601 215.96 24.1601C213.8 24.1601 211.813 24.5735 210.027 25.3868C208.267 26.1735 206.76 27.2668 205.493 28.6935C204.267 30.1068 203.293 31.7735 202.587 33.6801C201.92 35.5868 201.573 37.6135 201.573 39.7868V40.9601C201.573 43.1601 201.933 45.2135 202.64 47.1201C203.347 48.9868 204.36 50.6268 205.667 52.0535C206.973 53.4668 208.52 54.5735 210.307 55.3601C212.093 56.1468 214.053 56.5335 216.187 56.5335C218.573 56.5335 220.707 56.0268 222.573 55.0268C224.48 53.9868 226.013 52.4268 227.16 50.3868C227.36 50.0135 227.547 49.6401 227.72 49.2401V56.5601H233.88V15.6668H226.093V29.4535ZM226.307 41.2401C226.307 43.0268 225.92 44.6001 225.133 45.9468C224.387 47.2535 223.373 48.2668 222.107 48.9735C220.84 49.6401 219.44 49.9868 217.907 49.9868C216.267 49.9868 214.787 49.6001 213.48 48.8135C212.213 48.0268 211.2 46.9335 210.453 45.5068C209.707 44.0535 209.333 42.3468 209.333 40.4135C209.333 38.4668 209.693 36.7735 210.4 35.3201C211.147 33.8668 212.16 32.7468 213.427 31.9601C214.733 31.1335 216.227 30.7335 217.907 30.7335C219.4 30.7335 220.787 31.0668 222.053 31.7468C223.32 32.3868 224.347 33.3201 225.133 34.5468C225.92 35.7468 226.307 37.2401 226.307 39.0268V41.2401Z",
+	"M187.067 24.0001H186.733C184.307 24.0001 182.28 24.5201 180.627 25.5735C179.027 26.6135 177.813 28.1868 176.987 30.2801C176.72 30.9468 176.493 31.8001 176.32 32.7468V26.1468H170.16V56.5468H177.947V37.4935C177.947 35.5201 178.52 33.9468 179.68 32.7868C180.867 31.5868 182.427 31.0001 184.32 31.0001C186.187 31.0001 187.64 31.5735 188.693 32.7335C189.773 33.8935 190.32 35.4001 190.32 37.2668V56.5335H198.107V37.9468C198.107 33.3201 197.173 29.8535 195.307 27.5335C193.427 25.1735 190.68 24.0001 187.067 24.0001Z",
+	"M159.8 26.1868C157.6 24.7335 154.853 24.0001 151.573 24.0001C149.067 24.0001 146.867 24.4535 144.96 25.3468C143.053 26.2001 141.453 27.3868 140.147 28.8801C138.88 30.3335 137.907 32.0135 137.24 33.9201C136.6 35.7868 136.293 37.7335 136.293 39.7468V40.8135C136.293 42.7601 136.613 44.6535 137.24 46.5201C137.907 48.3868 138.88 50.0801 140.147 51.6135C141.453 53.1068 143.08 54.3068 145.013 55.2001C146.987 56.0935 149.28 56.5468 151.893 56.5468C154.4 56.5468 156.613 56.1201 158.56 55.2535C160.533 54.4001 162.16 53.1868 163.427 51.6135C164.693 50.0401 165.56 48.2135 166 46.1201H158.827C158.493 47.2401 157.733 48.1868 156.533 48.9735C155.333 49.7201 153.787 50.0935 151.88 50.0935C149.973 50.0935 148.413 49.6801 147.173 48.8668C145.947 48.0135 145.027 46.8535 144.427 45.4001C144.027 44.4135 143.773 43.3201 143.64 42.1468H166.493V39.3468C166.493 36.6535 165.933 34.1601 164.813 31.8401C163.72 29.4935 162.04 27.6135 159.8 26.1868ZM147.213 31.6268C148.4 30.8401 149.867 30.4535 151.587 30.4535C153.307 30.4535 154.72 30.8268 155.84 31.5735C157 32.3201 157.853 33.3868 158.413 34.7601C158.733 35.5468 158.96 36.4268 159.093 37.3868H143.813C143.96 36.5335 144.187 35.7468 144.48 35.0401C145.093 33.5468 146.013 32.4135 147.213 31.6268Z",
+	"M112.507 49.2668L134.707 22.4935V15.6668H104.027V22.2135H125.027L125.52 22.8801L103.36 49.7068V56.5335H134.987V49.9868H113.027L112.507 49.2668Z",
+	"M272.213 24.0401C268.587 24.0401 265.747 25.0401 263.88 27.2801C262.493 28.9468 261.68 30.7068 261.347 33.2935V26.1068H255.2V56.5468H262.987V38.9868C262.987 34.9201 263.547 34.0801 264.973 32.6935C266.427 31.2801 268.613 30.8135 271.227 30.8135H273.36V24.0401H272.213Z"
+];
+var PRIMARY_WIDTH = 273;
+var VIEW_HEIGHT = 76;
+var SUB_BRANDS = {
+	docs: {
+		width: 407,
+		label: "Zendir Docs",
+		path: "M291.84 59.02C289.48 59.02 287.34 58.58 285.42 57.7C283.54 56.78 281.94 55.56 280.62 54.04C279.3 52.48 278.28 50.72 277.56 48.76C276.88 46.8 276.54 44.74 276.54 42.58V41.98C276.54 39.9 276.88 37.9 277.56 35.98C278.24 34.02 279.22 32.26 280.5 30.7C281.82 29.1 283.42 27.84 285.3 26.92C287.18 26 289.34 25.54 291.78 25.54C294.62 25.54 297.08 26.18 299.16 27.46C301.28 28.74 302.92 30.5 304.08 32.74C305.28 34.94 305.92 37.46 306 40.3L304.38 36.76V14.2H307.56V58H305.04V44.02H306.24C306.16 47.02 305.5 49.66 304.26 51.94C303.02 54.18 301.32 55.92 299.16 57.16C297.04 58.4 294.6 59.02 291.84 59.02ZM292.14 56.14C294.58 56.14 296.72 55.6 298.56 54.52C300.44 53.44 301.9 51.98 302.94 50.14C304.02 48.26 304.56 46.12 304.56 43.72V40.6C304.56 38.32 304.02 36.26 302.94 34.42C301.9 32.58 300.44 31.12 298.56 30.04C296.72 28.96 294.58 28.42 292.14 28.42C289.5 28.42 287.26 29.06 285.42 30.34C283.58 31.62 282.16 33.32 281.16 35.44C280.2 37.52 279.72 39.8 279.72 42.28C279.72 44.84 280.22 47.18 281.22 49.3C282.22 51.38 283.64 53.04 285.48 54.28C287.36 55.52 289.58 56.14 292.14 56.14ZM328.783 59.02C326.143 59.02 323.803 58.54 321.763 57.58C319.723 56.62 318.003 55.36 316.603 53.8C315.243 52.24 314.203 50.5 313.483 48.58C312.803 46.62 312.463 44.62 312.463 42.58V41.98C312.463 39.9 312.823 37.88 313.543 35.92C314.263 33.96 315.323 32.2 316.723 30.64C318.123 29.08 319.823 27.84 321.823 26.92C323.863 26 326.183 25.54 328.783 25.54C331.343 25.54 333.623 26 335.623 26.92C337.663 27.84 339.383 29.08 340.783 30.64C342.183 32.2 343.243 33.96 343.963 35.92C344.723 37.88 345.103 39.9 345.103 41.98V42.58C345.103 44.62 344.743 46.62 344.023 48.58C343.303 50.5 342.243 52.24 340.843 53.8C339.483 55.36 337.783 56.62 335.743 57.58C333.743 58.54 331.423 59.02 328.783 59.02ZM328.783 56.08C331.583 56.08 333.943 55.44 335.863 54.16C337.823 52.88 339.303 51.2 340.303 49.12C341.343 47 341.863 44.72 341.863 42.28C341.863 39.76 341.343 37.46 340.303 35.38C339.263 33.26 337.763 31.58 335.803 30.34C333.883 29.06 331.543 28.42 328.783 28.42C326.063 28.42 323.703 29.06 321.703 30.34C319.743 31.58 318.243 33.26 317.203 35.38C316.163 37.46 315.643 39.76 315.643 42.28C315.643 44.72 316.143 47 317.143 49.12C318.183 51.2 319.683 52.88 321.643 54.16C323.603 55.44 325.983 56.08 328.783 56.08ZM362.871 59.02C360.271 59.02 357.991 58.54 356.031 57.58C354.111 56.62 352.491 55.34 351.171 53.74C349.891 52.14 348.931 50.36 348.291 48.4C347.651 46.44 347.331 44.46 347.331 42.46V41.86C347.331 39.82 347.651 37.82 348.291 35.86C348.931 33.9 349.891 32.16 351.171 30.64C352.491 29.08 354.111 27.84 356.031 26.92C357.991 26 360.271 25.54 362.871 25.54C365.391 25.54 367.631 26 369.591 26.92C371.591 27.84 373.211 29.14 374.451 30.82C375.731 32.46 376.531 34.44 376.851 36.76H373.731C373.371 34.36 372.251 32.38 370.371 30.82C368.491 29.22 365.991 28.42 362.871 28.42C360.111 28.42 357.811 29.04 355.971 30.28C354.131 31.52 352.751 33.18 351.831 35.26C350.951 37.34 350.511 39.64 350.511 42.16C350.511 44.6 350.971 46.88 351.891 49C352.811 51.12 354.191 52.84 356.031 54.16C357.871 55.44 360.151 56.08 362.871 56.08C364.991 56.08 366.851 55.7 368.451 54.94C370.091 54.14 371.411 53.1 372.411 51.82C373.411 50.5 374.011 49.06 374.211 47.5H377.331C377.051 49.82 376.251 51.84 374.931 53.56C373.611 55.24 371.911 56.58 369.831 57.58C367.751 58.54 365.431 59.02 362.871 59.02ZM390.684 58.9C386.764 58.9 383.744 58 381.624 56.2C379.544 54.4 378.484 52.1 378.444 49.3H381.564C381.564 51.1 382.264 52.68 383.664 54.04C385.104 55.36 387.444 56.02 390.684 56.02C393.844 56.02 396.164 55.36 397.644 54.04C399.124 52.68 399.864 51.08 399.864 49.24C399.864 47.44 399.184 46.06 397.824 45.1C396.504 44.14 394.704 43.54 392.424 43.3L388.704 42.88C385.944 42.56 383.744 41.7 382.104 40.3C380.504 38.9 379.704 37 379.704 34.6C379.704 32.88 380.144 31.34 381.024 29.98C381.904 28.62 383.164 27.54 384.804 26.74C386.484 25.94 388.444 25.54 390.684 25.54C393.964 25.54 396.604 26.34 398.604 27.94C400.644 29.54 401.684 31.72 401.724 34.48H398.604C398.644 32.76 397.964 31.32 396.564 30.16C395.204 29 393.244 28.42 390.684 28.42C388.004 28.42 386.004 29.04 384.684 30.28C383.404 31.52 382.764 32.98 382.764 34.66C382.764 36.06 383.264 37.26 384.264 38.26C385.304 39.26 386.864 39.88 388.944 40.12L392.664 40.54C395.624 40.82 398.064 41.68 399.984 43.12C401.944 44.56 402.924 46.62 402.924 49.3C402.924 51.1 402.424 52.72 401.424 54.16C400.464 55.6 399.084 56.76 397.284 57.64C395.484 58.48 393.284 58.9 390.684 58.9Z"
+	},
+	studio: {
+		width: 451,
+		label: "Zendir Studio",
+		path: "M294.12 59.02C290.4 59.02 287.3 58.44 284.82 57.28C282.34 56.08 280.48 54.46 279.24 52.42C278 50.34 277.38 48 277.38 45.4H280.62C280.62 47.4 281.08 49.2 282 50.8C282.96 52.4 284.44 53.68 286.44 54.64C288.44 55.56 291 56.02 294.12 56.02C297.04 56.02 299.48 55.6 301.44 54.76C303.4 53.92 304.86 52.78 305.82 51.34C306.82 49.86 307.32 48.16 307.32 46.24C307.32 43.88 306.44 41.88 304.68 40.24C302.92 38.56 300.24 37.54 296.64 37.18L291.42 36.76C287.78 36.44 284.9 35.28 282.78 33.28C280.66 31.28 279.6 28.66 279.6 25.42C279.6 23.1 280.14 21.02 281.22 19.18C282.3 17.3 283.92 15.82 286.08 14.74C288.24 13.62 290.9 13.06 294.06 13.06C297.26 13.06 299.96 13.66 302.16 14.86C304.36 16.02 306.02 17.6 307.14 19.6C308.3 21.56 308.88 23.78 308.88 26.26H305.64C305.64 24.46 305.24 22.8 304.44 21.28C303.64 19.72 302.38 18.46 300.66 17.5C298.98 16.54 296.78 16.06 294.06 16.06C291.42 16.06 289.28 16.5 287.64 17.38C286 18.22 284.78 19.36 283.98 20.8C283.22 22.2 282.84 23.74 282.84 25.42C282.84 27.82 283.6 29.74 285.12 31.18C286.68 32.62 288.9 33.48 291.78 33.76L297 34.18C299.92 34.42 302.38 35.1 304.38 36.22C306.42 37.3 307.96 38.7 309 40.42C310.04 42.14 310.56 44.08 310.56 46.24C310.56 48.68 309.92 50.88 308.64 52.84C307.36 54.76 305.5 56.28 303.06 57.4C300.62 58.48 297.64 59.02 294.12 59.02ZM327.126 58.3C325.166 58.3 323.446 58.02 321.966 57.46C320.486 56.86 319.346 55.86 318.546 54.46C317.746 53.06 317.346 51.18 317.346 48.82V16.24H320.466V49.36C320.466 51.28 320.986 52.78 322.026 53.86C323.106 54.9 324.586 55.42 326.466 55.42H332.346V58.3H327.126ZM311.346 29.08V26.5H332.346V29.08H311.346ZM347.586 58.9C343.786 58.9 340.906 57.68 338.946 55.24C336.986 52.8 336.006 49.5 336.006 45.34V26.5H339.246V46.06C339.246 48.98 340.006 51.36 341.526 53.2C343.086 55 345.326 55.9 348.246 55.9C351.206 55.9 353.546 54.96 355.266 53.08C357.026 51.2 357.906 48.74 357.906 45.7V26.5H361.086V58H358.566V45.28H359.286C359.286 47.96 358.846 50.34 357.966 52.42C357.126 54.46 355.866 56.06 354.186 57.22C352.506 58.34 350.366 58.9 347.766 58.9H347.586ZM381.444 59.02C379.084 59.02 376.944 58.58 375.024 57.7C373.144 56.78 371.544 55.56 370.224 54.04C368.904 52.48 367.884 50.72 367.164 48.76C366.484 46.8 366.144 44.74 366.144 42.58V41.98C366.144 39.9 366.484 37.9 367.164 35.98C367.844 34.02 368.824 32.26 370.104 30.7C371.424 29.1 373.024 27.84 374.904 26.92C376.784 26 378.944 25.54 381.384 25.54C384.224 25.54 386.684 26.18 388.764 27.46C390.884 28.74 392.524 30.5 393.684 32.74C394.884 34.94 395.524 37.46 395.604 40.3L393.984 36.76V14.2H397.164V58H394.644V44.02H395.844C395.764 47.02 395.104 49.66 393.864 51.94C392.624 54.18 390.924 55.92 388.764 57.16C386.644 58.4 384.204 59.02 381.444 59.02ZM381.744 56.14C384.184 56.14 386.324 55.6 388.164 54.52C390.044 53.44 391.504 51.98 392.544 50.14C393.624 48.26 394.164 46.12 394.164 43.72V40.6C394.164 38.32 393.624 36.26 392.544 34.42C391.504 32.58 390.044 31.12 388.164 30.04C386.324 28.96 384.184 28.42 381.744 28.42C379.104 28.42 376.864 29.06 375.024 30.34C373.184 31.62 371.764 33.32 370.764 35.44C369.804 37.52 369.324 39.8 369.324 42.28C369.324 44.84 369.824 47.18 370.824 49.3C371.824 51.38 373.244 53.04 375.084 54.28C376.964 55.52 379.184 56.14 381.744 56.14ZM406.387 58V26.5H409.627V58H406.387ZM401.167 29.26V26.5H409.627V29.26H401.167ZM406.687 19.9C405.847 19.9 405.207 19.68 404.767 19.24C404.327 18.76 404.107 18.16 404.107 17.44C404.107 16.68 404.327 16.06 404.767 15.58C405.207 15.1 405.867 14.86 406.747 14.86C407.587 14.86 408.227 15.1 408.667 15.58C409.107 16.06 409.327 16.68 409.327 17.44C409.327 18.16 409.107 18.76 408.667 19.24C408.267 19.68 407.607 19.9 406.687 19.9ZM430.93 59.02C428.29 59.02 425.95 58.54 423.91 57.58C421.87 56.62 420.15 55.36 418.75 53.8C417.39 52.24 416.35 50.5 415.63 48.58C414.95 46.62 414.61 44.62 414.61 42.58V41.98C414.61 39.9 414.97 37.88 415.69 35.92C416.41 33.96 417.47 32.2 418.87 30.64C420.27 29.08 421.97 27.84 423.97 26.92C426.01 26 428.33 25.54 430.93 25.54C433.49 25.54 435.77 26 437.77 26.92C439.81 27.84 441.53 29.08 442.93 30.64C444.33 32.2 445.39 33.96 446.11 35.92C446.87 37.88 447.25 39.9 447.25 41.98V42.58C447.25 44.62 446.89 46.62 446.17 48.58C445.45 50.5 444.39 52.24 442.99 53.8C441.63 55.36 439.93 56.62 437.89 57.58C435.89 58.54 433.57 59.02 430.93 59.02ZM430.93 56.08C433.73 56.08 436.09 55.44 438.01 54.16C439.97 52.88 441.45 51.2 442.45 49.12C443.49 47 444.01 44.72 444.01 42.28C444.01 39.76 443.49 37.46 442.45 35.38C441.41 33.26 439.91 31.58 437.95 30.34C436.03 29.06 433.69 28.42 430.93 28.42C428.21 28.42 425.85 29.06 423.85 30.34C421.89 31.58 420.39 33.26 419.35 35.38C418.31 37.46 417.79 39.76 417.79 42.28C417.79 44.72 418.29 47 419.29 49.12C420.33 51.2 421.83 52.88 423.79 54.16C425.75 55.44 428.13 56.08 430.93 56.08Z"
+	},
+	editor: {
+		width: 431,
+		label: "Zendir Editor",
+		path: "M280.32 58V14.2H283.56V58H280.32ZM282.54 58V55.06H305.1V58H282.54ZM282.54 37.24V34.24H302.94V37.24H282.54ZM282.54 17.14V14.2H304.38V17.14H282.54ZM322.665 59.02C320.305 59.02 318.165 58.58 316.245 57.7C314.365 56.78 312.765 55.56 311.445 54.04C310.125 52.48 309.105 50.72 308.385 48.76C307.705 46.8 307.365 44.74 307.365 42.58V41.98C307.365 39.9 307.705 37.9 308.385 35.98C309.065 34.02 310.045 32.26 311.325 30.7C312.645 29.1 314.245 27.84 316.125 26.92C318.005 26 320.165 25.54 322.605 25.54C325.445 25.54 327.905 26.18 329.985 27.46C332.105 28.74 333.745 30.5 334.905 32.74C336.105 34.94 336.745 37.46 336.825 40.3L335.205 36.76V14.2H338.385V58H335.865V44.02H337.065C336.985 47.02 336.325 49.66 335.085 51.94C333.845 54.18 332.145 55.92 329.985 57.16C327.865 58.4 325.425 59.02 322.665 59.02ZM322.965 56.14C325.405 56.14 327.545 55.6 329.385 54.52C331.265 53.44 332.725 51.98 333.765 50.14C334.845 48.26 335.385 46.12 335.385 43.72V40.6C335.385 38.32 334.845 36.26 333.765 34.42C332.725 32.58 331.265 31.12 329.385 30.04C327.545 28.96 325.405 28.42 322.965 28.42C320.325 28.42 318.085 29.06 316.245 30.34C314.405 31.62 312.985 33.32 311.985 35.44C311.025 37.52 310.545 39.8 310.545 42.28C310.545 44.84 311.045 47.18 312.045 49.3C313.045 51.38 314.465 53.04 316.305 54.28C318.185 55.52 320.405 56.14 322.965 56.14ZM347.608 58V26.5H350.848V58H347.608ZM342.388 29.26V26.5H350.848V29.26H342.388ZM347.908 19.9C347.068 19.9 346.428 19.68 345.988 19.24C345.548 18.76 345.328 18.16 345.328 17.44C345.328 16.68 345.548 16.06 345.988 15.58C346.428 15.1 347.088 14.86 347.968 14.86C348.808 14.86 349.448 15.1 349.888 15.58C350.328 16.06 350.548 16.68 350.548 17.44C350.548 18.16 350.328 18.76 349.888 19.24C349.488 19.68 348.828 19.9 347.908 19.9ZM368.971 58.3C367.011 58.3 365.291 58.02 363.811 57.46C362.331 56.86 361.191 55.86 360.391 54.46C359.591 53.06 359.191 51.18 359.191 48.82V16.24H362.311V49.36C362.311 51.28 362.831 52.78 363.871 53.86C364.951 54.9 366.431 55.42 368.311 55.42H374.191V58.3H368.971ZM353.191 29.08V26.5H374.191V29.08H353.191ZM392.078 59.02C389.438 59.02 387.098 58.54 385.058 57.58C383.018 56.62 381.298 55.36 379.898 53.8C378.538 52.24 377.498 50.5 376.778 48.58C376.098 46.62 375.758 44.62 375.758 42.58V41.98C375.758 39.9 376.118 37.88 376.838 35.92C377.558 33.96 378.618 32.2 380.018 30.64C381.418 29.08 383.118 27.84 385.118 26.92C387.158 26 389.478 25.54 392.078 25.54C394.638 25.54 396.918 26 398.918 26.92C400.958 27.84 402.678 29.08 404.078 30.64C405.478 32.2 406.538 33.96 407.258 35.92C408.018 37.88 408.398 39.9 408.398 41.98V42.58C408.398 44.62 408.038 46.62 407.318 48.58C406.598 50.5 405.538 52.24 404.138 53.8C402.778 55.36 401.078 56.62 399.038 57.58C397.038 58.54 394.718 59.02 392.078 59.02ZM392.078 56.08C394.878 56.08 397.238 55.44 399.158 54.16C401.118 52.88 402.598 51.2 403.598 49.12C404.638 47 405.158 44.72 405.158 42.28C405.158 39.76 404.638 37.46 403.598 35.38C402.558 33.26 401.058 31.58 399.098 30.34C397.178 29.06 394.838 28.42 392.078 28.42C389.358 28.42 386.998 29.06 384.998 30.34C383.038 31.58 381.538 33.26 380.498 35.38C379.458 37.46 378.938 39.76 378.938 42.28C378.938 44.72 379.438 47 380.438 49.12C381.478 51.2 382.978 52.88 384.938 54.16C386.898 55.44 389.278 56.08 392.078 56.08ZM413.266 58V26.5H415.786V39.82H415.306C415.306 35.26 416.326 31.86 418.366 29.62C420.406 27.38 423.706 26.26 428.266 26.26H429.346V29.14H427.666C423.946 29.14 421.146 30.1 419.266 32.02C417.386 33.9 416.446 36.68 416.446 40.36V58H413.266Z"
+	},
+	api: {
+		width: 364,
+		label: "Zendir API",
+		path: "M275.22 58L291.72 14.2H298.2L315.24 58H311.88L295.62 16.06L297.6 17.14H292.14L294.18 16.06L278.46 58H275.22ZM283.08 43.24L284.22 40.3H305.94L307.08 43.24H283.08ZM322.093 41.26V38.32H332.653C335.293 38.32 337.413 37.84 339.013 36.88C340.613 35.92 341.793 34.64 342.553 33.04C343.313 31.4 343.693 29.6 343.693 27.64C343.693 25.68 343.313 23.9 342.553 22.3C341.793 20.66 340.613 19.36 339.013 18.4C337.413 17.44 335.293 16.96 332.653 16.96H322.093V14.02H332.233C335.633 14.02 338.413 14.62 340.573 15.82C342.733 16.98 344.333 18.56 345.373 20.56C346.413 22.56 346.933 24.8 346.933 27.28V28C346.933 30.44 346.413 32.68 345.373 34.72C344.333 36.72 342.733 38.32 340.573 39.52C338.413 40.68 335.633 41.26 332.233 41.26H322.093ZM319.993 58V14.02H323.233V58H319.993ZM352.52 58V14.2H355.76V58H352.52Z"
+	}
+};
+var Logo = memo(function Logo({ subBrand, markOnly = false, height = 32, color, "aria-label": ariaLabel, className, style }) {
+	const { tokens } = useTheme();
+	const ink = color ?? tokens.colors.text.primary;
+	const variant = !markOnly && subBrand ? SUB_BRANDS[subBrand] : null;
+	const viewWidth = markOnly ? 76 : variant ? variant.width : PRIMARY_WIDTH;
+	const width = height / VIEW_HEIGHT * viewWidth;
+	const label = variant ? variant.label : "Zendir";
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width,
+		height,
+		viewBox: `0 0 ${viewWidth} ${VIEW_HEIGHT}`,
+		fill: ink,
+		role: "img",
+		"aria-label": ariaLabel ?? label,
+		className,
+		style: {
+			flexShrink: 0,
+			...style
+		},
+		children: [
+			MARK_PATHS.map((d, i) => /* @__PURE__ */ jsx("path", { d }, `mark-${i}`)),
+			!markOnly && WORDMARK_PATHS.map((d, i) => /* @__PURE__ */ jsx("path", { d }, `wordmark-${i}`)),
+			variant && /* @__PURE__ */ jsx("path", { d: variant.path })
+		]
+	});
+});
+//#endregion
+export { Logo, Logo as default };
+
+//# sourceMappingURL=Logo.js.map

package/dist/react/core/display/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","names":[],"sources":["../../../../src/react/core/display/Logo.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Logo Component\r\n *\r\n * The Zendir brand mark and wordmark, plus the sub-brand lockups for\r\n * Zendir's own product surfaces (Docs, Studio, Editor, API).\r\n *\r\n * Source: Figma \"Zendir Design System — Logos\" page. Mark and wordmark\r\n * paths are shared across every lockup; only the sub-brand suffix path\r\n * changes. All paths render with `fill=\"currentColor\"` so a single asset\r\n * covers every surface — light, dark, navy, elevated — instead of\r\n * maintaining separate light/dark SVG files.\r\n *\r\n * @example\r\n * ```tsx\r\n * // Primary lockup — mark + \"ZENDIR\"\r\n * <Logo />\r\n *\r\n * // Sub-brand lockup\r\n * <Logo subBrand=\"studio\" />\r\n *\r\n * // Mark only (e.g. collapsed nav rail, avatar contexts)\r\n * <Logo markOnly />\r\n *\r\n * // Explicit ink color (default follows tokens.colors.text.primary)\r\n * <Logo subBrand=\"api\" color=\"#0D1429\" />\r\n * ```\r\n */\r\n\r\nimport React, { memo } from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\n\r\nexport type LogoSubBrand = \"docs\" | \"studio\" | \"editor\" | \"api\";\r\n\r\nexport interface LogoProps {\r\n  /** Sub-brand lockup to render alongside the primary mark. Omit for the primary \"ZENDIR\" lockup. */\r\n  subBrand?: LogoSubBrand;\r\n  /** Render only the glyph mark (no wordmark) — for collapsed nav rails, favicons, avatar crops. */\r\n  markOnly?: boolean;\r\n  /** Rendered height in pixels; width follows automatically to preserve the lockup's aspect ratio. */\r\n  height?: number;\r\n  /** Ink color. Defaults to the current theme's primary text color. */\r\n  color?: string;\r\n  /** Accessibility label. Defaults to \"Zendir\" or \"Zendir <Sub-brand>\". */\r\n  \"aria-label\"?: string;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\n// Mark + \"ZENDIR\" wordmark — identical across every lockup (Figma \"Logo\" group, 0 0 273 67).\r\nconst MARK_PATHS = [\r\n  \"M63.8133 56.5335H14.48C17.9066 46.2001 27.6533 38.7468 39.1466 38.7468C50.64 38.7468 60.3733 46.2001 63.8133 56.5335Z\",\r\n  \"M70.68 30.2268L45.68 16.4001C45.2933 16.1868 45.0666 15.7868 45.0666 15.3468L45.08 12.5467C45.08 9.94675 45.0666 10.0001 43.0933 10.0001H38.08H35.36C33.36 10.0001 33.3733 9.96008 33.3733 12.5201L33.36 15.3201C33.36 15.7601 33.12 16.1601 32.7333 16.3735L7.66663 30.0668C7.07996 30.3868 6.70663 31.0135 6.69329 31.6935L6.66663 41.0401C6.66663 41.3868 6.85329 41.7068 7.14663 41.8935C7.45329 42.0668 7.81329 42.0801 8.11996 41.9068L33.24 28.1868C33.6933 27.8801 33.92 27.8268 33.9733 27.3068C33.9733 25.0935 34.0133 25.5601 34.0133 23.3468C34.0133 22.0268 33.9333 22.0268 35.36 22.0268H42.2933C44.52 22.0401 44.44 22.0268 44.44 23.3868L44.4266 27.3068C44.4266 27.9868 44.7866 28.0268 45.3866 28.3468L70.2533 42.1068L70.2933 42.1335C70.4 42.1735 70.52 42.2001 70.64 42.2001C70.84 42.2001 71.04 42.1335 71.2 42.0268C71.4666 41.8401 71.6133 41.5468 71.6133 41.2268L71.64 31.8801C71.6266 31.1868 71.2666 30.5601 70.68 30.2268Z\",\r\n];\r\n\r\nconst WORDMARK_PATHS = [\r\n  \"M245.187 14.0401C243.653 14.0401 242.52 14.4268 241.773 15.2135C241.067 16.0001 240.707 17.0268 240.707 18.2935C240.707 19.4935 241.067 20.4935 241.773 21.3201C242.52 22.1068 243.653 22.4935 245.187 22.4935C246.72 22.4935 247.84 22.1068 248.547 21.3201C249.253 20.4935 249.613 19.4935 249.613 18.2935C249.613 17.0268 249.253 16.0001 248.547 15.2135C247.84 14.4401 246.72 14.0401 245.187 14.0401Z\",\r\n  \"M249.107 26.1335H241.32V56.5335H249.107V26.1335Z\",\r\n  \"M226.093 29.4535C225.08 27.8401 223.787 26.6001 222.227 25.7335C220.44 24.6935 218.347 24.1601 215.96 24.1601C213.8 24.1601 211.813 24.5735 210.027 25.3868C208.267 26.1735 206.76 27.2668 205.493 28.6935C204.267 30.1068 203.293 31.7735 202.587 33.6801C201.92 35.5868 201.573 37.6135 201.573 39.7868V40.9601C201.573 43.1601 201.933 45.2135 202.64 47.1201C203.347 48.9868 204.36 50.6268 205.667 52.0535C206.973 53.4668 208.52 54.5735 210.307 55.3601C212.093 56.1468 214.053 56.5335 216.187 56.5335C218.573 56.5335 220.707 56.0268 222.573 55.0268C224.48 53.9868 226.013 52.4268 227.16 50.3868C227.36 50.0135 227.547 49.6401 227.72 49.2401V56.5601H233.88V15.6668H226.093V29.4535ZM226.307 41.2401C226.307 43.0268 225.92 44.6001 225.133 45.9468C224.387 47.2535 223.373 48.2668 222.107 48.9735C220.84 49.6401 219.44 49.9868 217.907 49.9868C216.267 49.9868 214.787 49.6001 213.48 48.8135C212.213 48.0268 211.2 46.9335 210.453 45.5068C209.707 44.0535 209.333 42.3468 209.333 40.4135C209.333 38.4668 209.693 36.7735 210.4 35.3201C211.147 33.8668 212.16 32.7468 213.427 31.9601C214.733 31.1335 216.227 30.7335 217.907 30.7335C219.4 30.7335 220.787 31.0668 222.053 31.7468C223.32 32.3868 224.347 33.3201 225.133 34.5468C225.92 35.7468 226.307 37.2401 226.307 39.0268V41.2401Z\",\r\n  \"M187.067 24.0001H186.733C184.307 24.0001 182.28 24.5201 180.627 25.5735C179.027 26.6135 177.813 28.1868 176.987 30.2801C176.72 30.9468 176.493 31.8001 176.32 32.7468V26.1468H170.16V56.5468H177.947V37.4935C177.947 35.5201 178.52 33.9468 179.68 32.7868C180.867 31.5868 182.427 31.0001 184.32 31.0001C186.187 31.0001 187.64 31.5735 188.693 32.7335C189.773 33.8935 190.32 35.4001 190.32 37.2668V56.5335H198.107V37.9468C198.107 33.3201 197.173 29.8535 195.307 27.5335C193.427 25.1735 190.68 24.0001 187.067 24.0001Z\",\r\n  \"M159.8 26.1868C157.6 24.7335 154.853 24.0001 151.573 24.0001C149.067 24.0001 146.867 24.4535 144.96 25.3468C143.053 26.2001 141.453 27.3868 140.147 28.8801C138.88 30.3335 137.907 32.0135 137.24 33.9201C136.6 35.7868 136.293 37.7335 136.293 39.7468V40.8135C136.293 42.7601 136.613 44.6535 137.24 46.5201C137.907 48.3868 138.88 50.0801 140.147 51.6135C141.453 53.1068 143.08 54.3068 145.013 55.2001C146.987 56.0935 149.28 56.5468 151.893 56.5468C154.4 56.5468 156.613 56.1201 158.56 55.2535C160.533 54.4001 162.16 53.1868 163.427 51.6135C164.693 50.0401 165.56 48.2135 166 46.1201H158.827C158.493 47.2401 157.733 48.1868 156.533 48.9735C155.333 49.7201 153.787 50.0935 151.88 50.0935C149.973 50.0935 148.413 49.6801 147.173 48.8668C145.947 48.0135 145.027 46.8535 144.427 45.4001C144.027 44.4135 143.773 43.3201 143.64 42.1468H166.493V39.3468C166.493 36.6535 165.933 34.1601 164.813 31.8401C163.72 29.4935 162.04 27.6135 159.8 26.1868ZM147.213 31.6268C148.4 30.8401 149.867 30.4535 151.587 30.4535C153.307 30.4535 154.72 30.8268 155.84 31.5735C157 32.3201 157.853 33.3868 158.413 34.7601C158.733 35.5468 158.96 36.4268 159.093 37.3868H143.813C143.96 36.5335 144.187 35.7468 144.48 35.0401C145.093 33.5468 146.013 32.4135 147.213 31.6268Z\",\r\n  \"M112.507 49.2668L134.707 22.4935V15.6668H104.027V22.2135H125.027L125.52 22.8801L103.36 49.7068V56.5335H134.987V49.9868H113.027L112.507 49.2668Z\",\r\n  \"M272.213 24.0401C268.587 24.0401 265.747 25.0401 263.88 27.2801C262.493 28.9468 261.68 30.7068 261.347 33.2935V26.1068H255.2V56.5468H262.987V38.9868C262.987 34.9201 263.547 34.0801 264.973 32.6935C266.427 31.2801 268.613 30.8135 271.227 30.8135H273.36V24.0401H272.213Z\",\r\n];\r\n\r\nconst PRIMARY_WIDTH = 273;\r\nconst VIEW_HEIGHT = 76;\r\n\r\ninterface SubBrandSpec {\r\n  width: number;\r\n  path: string;\r\n  label: string;\r\n}\r\n\r\n// Sub-brand suffix paths — each positioned to sit directly after the shared\r\n// wordmark (x >= 273), matching the Figma \"Sub-brand lockup\" spec exactly.\r\nconst SUB_BRANDS: Record<LogoSubBrand, SubBrandSpec> = {\r\n  docs: {\r\n    width: 407,\r\n    label: \"Zendir Docs\",\r\n    path: \"M291.84 59.02C289.48 59.02 287.34 58.58 285.42 57.7C283.54 56.78 281.94 55.56 280.62 54.04C279.3 52.48 278.28 50.72 277.56 48.76C276.88 46.8 276.54 44.74 276.54 42.58V41.98C276.54 39.9 276.88 37.9 277.56 35.98C278.24 34.02 279.22 32.26 280.5 30.7C281.82 29.1 283.42 27.84 285.3 26.92C287.18 26 289.34 25.54 291.78 25.54C294.62 25.54 297.08 26.18 299.16 27.46C301.28 28.74 302.92 30.5 304.08 32.74C305.28 34.94 305.92 37.46 306 40.3L304.38 36.76V14.2H307.56V58H305.04V44.02H306.24C306.16 47.02 305.5 49.66 304.26 51.94C303.02 54.18 301.32 55.92 299.16 57.16C297.04 58.4 294.6 59.02 291.84 59.02ZM292.14 56.14C294.58 56.14 296.72 55.6 298.56 54.52C300.44 53.44 301.9 51.98 302.94 50.14C304.02 48.26 304.56 46.12 304.56 43.72V40.6C304.56 38.32 304.02 36.26 302.94 34.42C301.9 32.58 300.44 31.12 298.56 30.04C296.72 28.96 294.58 28.42 292.14 28.42C289.5 28.42 287.26 29.06 285.42 30.34C283.58 31.62 282.16 33.32 281.16 35.44C280.2 37.52 279.72 39.8 279.72 42.28C279.72 44.84 280.22 47.18 281.22 49.3C282.22 51.38 283.64 53.04 285.48 54.28C287.36 55.52 289.58 56.14 292.14 56.14ZM328.783 59.02C326.143 59.02 323.803 58.54 321.763 57.58C319.723 56.62 318.003 55.36 316.603 53.8C315.243 52.24 314.203 50.5 313.483 48.58C312.803 46.62 312.463 44.62 312.463 42.58V41.98C312.463 39.9 312.823 37.88 313.543 35.92C314.263 33.96 315.323 32.2 316.723 30.64C318.123 29.08 319.823 27.84 321.823 26.92C323.863 26 326.183 25.54 328.783 25.54C331.343 25.54 333.623 26 335.623 26.92C337.663 27.84 339.383 29.08 340.783 30.64C342.183 32.2 343.243 33.96 343.963 35.92C344.723 37.88 345.103 39.9 345.103 41.98V42.58C345.103 44.62 344.743 46.62 344.023 48.58C343.303 50.5 342.243 52.24 340.843 53.8C339.483 55.36 337.783 56.62 335.743 57.58C333.743 58.54 331.423 59.02 328.783 59.02ZM328.783 56.08C331.583 56.08 333.943 55.44 335.863 54.16C337.823 52.88 339.303 51.2 340.303 49.12C341.343 47 341.863 44.72 341.863 42.28C341.863 39.76 341.343 37.46 340.303 35.38C339.263 33.26 337.763 31.58 335.803 30.34C333.883 29.06 331.543 28.42 328.783 28.42C326.063 28.42 323.703 29.06 321.703 30.34C319.743 31.58 318.243 33.26 317.203 35.38C316.163 37.46 315.643 39.76 315.643 42.28C315.643 44.72 316.143 47 317.143 49.12C318.183 51.2 319.683 52.88 321.643 54.16C323.603 55.44 325.983 56.08 328.783 56.08ZM362.871 59.02C360.271 59.02 357.991 58.54 356.031 57.58C354.111 56.62 352.491 55.34 351.171 53.74C349.891 52.14 348.931 50.36 348.291 48.4C347.651 46.44 347.331 44.46 347.331 42.46V41.86C347.331 39.82 347.651 37.82 348.291 35.86C348.931 33.9 349.891 32.16 351.171 30.64C352.491 29.08 354.111 27.84 356.031 26.92C357.991 26 360.271 25.54 362.871 25.54C365.391 25.54 367.631 26 369.591 26.92C371.591 27.84 373.211 29.14 374.451 30.82C375.731 32.46 376.531 34.44 376.851 36.76H373.731C373.371 34.36 372.251 32.38 370.371 30.82C368.491 29.22 365.991 28.42 362.871 28.42C360.111 28.42 357.811 29.04 355.971 30.28C354.131 31.52 352.751 33.18 351.831 35.26C350.951 37.34 350.511 39.64 350.511 42.16C350.511 44.6 350.971 46.88 351.891 49C352.811 51.12 354.191 52.84 356.031 54.16C357.871 55.44 360.151 56.08 362.871 56.08C364.991 56.08 366.851 55.7 368.451 54.94C370.091 54.14 371.411 53.1 372.411 51.82C373.411 50.5 374.011 49.06 374.211 47.5H377.331C377.051 49.82 376.251 51.84 374.931 53.56C373.611 55.24 371.911 56.58 369.831 57.58C367.751 58.54 365.431 59.02 362.871 59.02ZM390.684 58.9C386.764 58.9 383.744 58 381.624 56.2C379.544 54.4 378.484 52.1 378.444 49.3H381.564C381.564 51.1 382.264 52.68 383.664 54.04C385.104 55.36 387.444 56.02 390.684 56.02C393.844 56.02 396.164 55.36 397.644 54.04C399.124 52.68 399.864 51.08 399.864 49.24C399.864 47.44 399.184 46.06 397.824 45.1C396.504 44.14 394.704 43.54 392.424 43.3L388.704 42.88C385.944 42.56 383.744 41.7 382.104 40.3C380.504 38.9 379.704 37 379.704 34.6C379.704 32.88 380.144 31.34 381.024 29.98C381.904 28.62 383.164 27.54 384.804 26.74C386.484 25.94 388.444 25.54 390.684 25.54C393.964 25.54 396.604 26.34 398.604 27.94C400.644 29.54 401.684 31.72 401.724 34.48H398.604C398.644 32.76 397.964 31.32 396.564 30.16C395.204 29 393.244 28.42 390.684 28.42C388.004 28.42 386.004 29.04 384.684 30.28C383.404 31.52 382.764 32.98 382.764 34.66C382.764 36.06 383.264 37.26 384.264 38.26C385.304 39.26 386.864 39.88 388.944 40.12L392.664 40.54C395.624 40.82 398.064 41.68 399.984 43.12C401.944 44.56 402.924 46.62 402.924 49.3C402.924 51.1 402.424 52.72 401.424 54.16C400.464 55.6 399.084 56.76 397.284 57.64C395.484 58.48 393.284 58.9 390.684 58.9Z\",\r\n  },\r\n  studio: {\r\n    width: 451,\r\n    label: \"Zendir Studio\",\r\n    path: \"M294.12 59.02C290.4 59.02 287.3 58.44 284.82 57.28C282.34 56.08 280.48 54.46 279.24 52.42C278 50.34 277.38 48 277.38 45.4H280.62C280.62 47.4 281.08 49.2 282 50.8C282.96 52.4 284.44 53.68 286.44 54.64C288.44 55.56 291 56.02 294.12 56.02C297.04 56.02 299.48 55.6 301.44 54.76C303.4 53.92 304.86 52.78 305.82 51.34C306.82 49.86 307.32 48.16 307.32 46.24C307.32 43.88 306.44 41.88 304.68 40.24C302.92 38.56 300.24 37.54 296.64 37.18L291.42 36.76C287.78 36.44 284.9 35.28 282.78 33.28C280.66 31.28 279.6 28.66 279.6 25.42C279.6 23.1 280.14 21.02 281.22 19.18C282.3 17.3 283.92 15.82 286.08 14.74C288.24 13.62 290.9 13.06 294.06 13.06C297.26 13.06 299.96 13.66 302.16 14.86C304.36 16.02 306.02 17.6 307.14 19.6C308.3 21.56 308.88 23.78 308.88 26.26H305.64C305.64 24.46 305.24 22.8 304.44 21.28C303.64 19.72 302.38 18.46 300.66 17.5C298.98 16.54 296.78 16.06 294.06 16.06C291.42 16.06 289.28 16.5 287.64 17.38C286 18.22 284.78 19.36 283.98 20.8C283.22 22.2 282.84 23.74 282.84 25.42C282.84 27.82 283.6 29.74 285.12 31.18C286.68 32.62 288.9 33.48 291.78 33.76L297 34.18C299.92 34.42 302.38 35.1 304.38 36.22C306.42 37.3 307.96 38.7 309 40.42C310.04 42.14 310.56 44.08 310.56 46.24C310.56 48.68 309.92 50.88 308.64 52.84C307.36 54.76 305.5 56.28 303.06 57.4C300.62 58.48 297.64 59.02 294.12 59.02ZM327.126 58.3C325.166 58.3 323.446 58.02 321.966 57.46C320.486 56.86 319.346 55.86 318.546 54.46C317.746 53.06 317.346 51.18 317.346 48.82V16.24H320.466V49.36C320.466 51.28 320.986 52.78 322.026 53.86C323.106 54.9 324.586 55.42 326.466 55.42H332.346V58.3H327.126ZM311.346 29.08V26.5H332.346V29.08H311.346ZM347.586 58.9C343.786 58.9 340.906 57.68 338.946 55.24C336.986 52.8 336.006 49.5 336.006 45.34V26.5H339.246V46.06C339.246 48.98 340.006 51.36 341.526 53.2C343.086 55 345.326 55.9 348.246 55.9C351.206 55.9 353.546 54.96 355.266 53.08C357.026 51.2 357.906 48.74 357.906 45.7V26.5H361.086V58H358.566V45.28H359.286C359.286 47.96 358.846 50.34 357.966 52.42C357.126 54.46 355.866 56.06 354.186 57.22C352.506 58.34 350.366 58.9 347.766 58.9H347.586ZM381.444 59.02C379.084 59.02 376.944 58.58 375.024 57.7C373.144 56.78 371.544 55.56 370.224 54.04C368.904 52.48 367.884 50.72 367.164 48.76C366.484 46.8 366.144 44.74 366.144 42.58V41.98C366.144 39.9 366.484 37.9 367.164 35.98C367.844 34.02 368.824 32.26 370.104 30.7C371.424 29.1 373.024 27.84 374.904 26.92C376.784 26 378.944 25.54 381.384 25.54C384.224 25.54 386.684 26.18 388.764 27.46C390.884 28.74 392.524 30.5 393.684 32.74C394.884 34.94 395.524 37.46 395.604 40.3L393.984 36.76V14.2H397.164V58H394.644V44.02H395.844C395.764 47.02 395.104 49.66 393.864 51.94C392.624 54.18 390.924 55.92 388.764 57.16C386.644 58.4 384.204 59.02 381.444 59.02ZM381.744 56.14C384.184 56.14 386.324 55.6 388.164 54.52C390.044 53.44 391.504 51.98 392.544 50.14C393.624 48.26 394.164 46.12 394.164 43.72V40.6C394.164 38.32 393.624 36.26 392.544 34.42C391.504 32.58 390.044 31.12 388.164 30.04C386.324 28.96 384.184 28.42 381.744 28.42C379.104 28.42 376.864 29.06 375.024 30.34C373.184 31.62 371.764 33.32 370.764 35.44C369.804 37.52 369.324 39.8 369.324 42.28C369.324 44.84 369.824 47.18 370.824 49.3C371.824 51.38 373.244 53.04 375.084 54.28C376.964 55.52 379.184 56.14 381.744 56.14ZM406.387 58V26.5H409.627V58H406.387ZM401.167 29.26V26.5H409.627V29.26H401.167ZM406.687 19.9C405.847 19.9 405.207 19.68 404.767 19.24C404.327 18.76 404.107 18.16 404.107 17.44C404.107 16.68 404.327 16.06 404.767 15.58C405.207 15.1 405.867 14.86 406.747 14.86C407.587 14.86 408.227 15.1 408.667 15.58C409.107 16.06 409.327 16.68 409.327 17.44C409.327 18.16 409.107 18.76 408.667 19.24C408.267 19.68 407.607 19.9 406.687 19.9ZM430.93 59.02C428.29 59.02 425.95 58.54 423.91 57.58C421.87 56.62 420.15 55.36 418.75 53.8C417.39 52.24 416.35 50.5 415.63 48.58C414.95 46.62 414.61 44.62 414.61 42.58V41.98C414.61 39.9 414.97 37.88 415.69 35.92C416.41 33.96 417.47 32.2 418.87 30.64C420.27 29.08 421.97 27.84 423.97 26.92C426.01 26 428.33 25.54 430.93 25.54C433.49 25.54 435.77 26 437.77 26.92C439.81 27.84 441.53 29.08 442.93 30.64C444.33 32.2 445.39 33.96 446.11 35.92C446.87 37.88 447.25 39.9 447.25 41.98V42.58C447.25 44.62 446.89 46.62 446.17 48.58C445.45 50.5 444.39 52.24 442.99 53.8C441.63 55.36 439.93 56.62 437.89 57.58C435.89 58.54 433.57 59.02 430.93 59.02ZM430.93 56.08C433.73 56.08 436.09 55.44 438.01 54.16C439.97 52.88 441.45 51.2 442.45 49.12C443.49 47 444.01 44.72 444.01 42.28C444.01 39.76 443.49 37.46 442.45 35.38C441.41 33.26 439.91 31.58 437.95 30.34C436.03 29.06 433.69 28.42 430.93 28.42C428.21 28.42 425.85 29.06 423.85 30.34C421.89 31.58 420.39 33.26 419.35 35.38C418.31 37.46 417.79 39.76 417.79 42.28C417.79 44.72 418.29 47 419.29 49.12C420.33 51.2 421.83 52.88 423.79 54.16C425.75 55.44 428.13 56.08 430.93 56.08Z\",\r\n  },\r\n  editor: {\r\n    width: 431,\r\n    label: \"Zendir Editor\",\r\n    path: \"M280.32 58V14.2H283.56V58H280.32ZM282.54 58V55.06H305.1V58H282.54ZM282.54 37.24V34.24H302.94V37.24H282.54ZM282.54 17.14V14.2H304.38V17.14H282.54ZM322.665 59.02C320.305 59.02 318.165 58.58 316.245 57.7C314.365 56.78 312.765 55.56 311.445 54.04C310.125 52.48 309.105 50.72 308.385 48.76C307.705 46.8 307.365 44.74 307.365 42.58V41.98C307.365 39.9 307.705 37.9 308.385 35.98C309.065 34.02 310.045 32.26 311.325 30.7C312.645 29.1 314.245 27.84 316.125 26.92C318.005 26 320.165 25.54 322.605 25.54C325.445 25.54 327.905 26.18 329.985 27.46C332.105 28.74 333.745 30.5 334.905 32.74C336.105 34.94 336.745 37.46 336.825 40.3L335.205 36.76V14.2H338.385V58H335.865V44.02H337.065C336.985 47.02 336.325 49.66 335.085 51.94C333.845 54.18 332.145 55.92 329.985 57.16C327.865 58.4 325.425 59.02 322.665 59.02ZM322.965 56.14C325.405 56.14 327.545 55.6 329.385 54.52C331.265 53.44 332.725 51.98 333.765 50.14C334.845 48.26 335.385 46.12 335.385 43.72V40.6C335.385 38.32 334.845 36.26 333.765 34.42C332.725 32.58 331.265 31.12 329.385 30.04C327.545 28.96 325.405 28.42 322.965 28.42C320.325 28.42 318.085 29.06 316.245 30.34C314.405 31.62 312.985 33.32 311.985 35.44C311.025 37.52 310.545 39.8 310.545 42.28C310.545 44.84 311.045 47.18 312.045 49.3C313.045 51.38 314.465 53.04 316.305 54.28C318.185 55.52 320.405 56.14 322.965 56.14ZM347.608 58V26.5H350.848V58H347.608ZM342.388 29.26V26.5H350.848V29.26H342.388ZM347.908 19.9C347.068 19.9 346.428 19.68 345.988 19.24C345.548 18.76 345.328 18.16 345.328 17.44C345.328 16.68 345.548 16.06 345.988 15.58C346.428 15.1 347.088 14.86 347.968 14.86C348.808 14.86 349.448 15.1 349.888 15.58C350.328 16.06 350.548 16.68 350.548 17.44C350.548 18.16 350.328 18.76 349.888 19.24C349.488 19.68 348.828 19.9 347.908 19.9ZM368.971 58.3C367.011 58.3 365.291 58.02 363.811 57.46C362.331 56.86 361.191 55.86 360.391 54.46C359.591 53.06 359.191 51.18 359.191 48.82V16.24H362.311V49.36C362.311 51.28 362.831 52.78 363.871 53.86C364.951 54.9 366.431 55.42 368.311 55.42H374.191V58.3H368.971ZM353.191 29.08V26.5H374.191V29.08H353.191ZM392.078 59.02C389.438 59.02 387.098 58.54 385.058 57.58C383.018 56.62 381.298 55.36 379.898 53.8C378.538 52.24 377.498 50.5 376.778 48.58C376.098 46.62 375.758 44.62 375.758 42.58V41.98C375.758 39.9 376.118 37.88 376.838 35.92C377.558 33.96 378.618 32.2 380.018 30.64C381.418 29.08 383.118 27.84 385.118 26.92C387.158 26 389.478 25.54 392.078 25.54C394.638 25.54 396.918 26 398.918 26.92C400.958 27.84 402.678 29.08 404.078 30.64C405.478 32.2 406.538 33.96 407.258 35.92C408.018 37.88 408.398 39.9 408.398 41.98V42.58C408.398 44.62 408.038 46.62 407.318 48.58C406.598 50.5 405.538 52.24 404.138 53.8C402.778 55.36 401.078 56.62 399.038 57.58C397.038 58.54 394.718 59.02 392.078 59.02ZM392.078 56.08C394.878 56.08 397.238 55.44 399.158 54.16C401.118 52.88 402.598 51.2 403.598 49.12C404.638 47 405.158 44.72 405.158 42.28C405.158 39.76 404.638 37.46 403.598 35.38C402.558 33.26 401.058 31.58 399.098 30.34C397.178 29.06 394.838 28.42 392.078 28.42C389.358 28.42 386.998 29.06 384.998 30.34C383.038 31.58 381.538 33.26 380.498 35.38C379.458 37.46 378.938 39.76 378.938 42.28C378.938 44.72 379.438 47 380.438 49.12C381.478 51.2 382.978 52.88 384.938 54.16C386.898 55.44 389.278 56.08 392.078 56.08ZM413.266 58V26.5H415.786V39.82H415.306C415.306 35.26 416.326 31.86 418.366 29.62C420.406 27.38 423.706 26.26 428.266 26.26H429.346V29.14H427.666C423.946 29.14 421.146 30.1 419.266 32.02C417.386 33.9 416.446 36.68 416.446 40.36V58H413.266Z\",\r\n  },\r\n  api: {\r\n    width: 364,\r\n    label: \"Zendir API\",\r\n    path: \"M275.22 58L291.72 14.2H298.2L315.24 58H311.88L295.62 16.06L297.6 17.14H292.14L294.18 16.06L278.46 58H275.22ZM283.08 43.24L284.22 40.3H305.94L307.08 43.24H283.08ZM322.093 41.26V38.32H332.653C335.293 38.32 337.413 37.84 339.013 36.88C340.613 35.92 341.793 34.64 342.553 33.04C343.313 31.4 343.693 29.6 343.693 27.64C343.693 25.68 343.313 23.9 342.553 22.3C341.793 20.66 340.613 19.36 339.013 18.4C337.413 17.44 335.293 16.96 332.653 16.96H322.093V14.02H332.233C335.633 14.02 338.413 14.62 340.573 15.82C342.733 16.98 344.333 18.56 345.373 20.56C346.413 22.56 346.933 24.8 346.933 27.28V28C346.933 30.44 346.413 32.68 345.373 34.72C344.333 36.72 342.733 38.32 340.573 39.52C338.413 40.68 335.633 41.26 332.233 41.26H322.093ZM319.993 58V14.02H323.233V58H319.993ZM352.52 58V14.2H355.76V58H352.52Z\",\r\n  },\r\n};\r\n\r\nexport const Logo = memo(function Logo({\r\n  subBrand,\r\n  markOnly = false,\r\n  height = 32,\r\n  color,\r\n  \"aria-label\": ariaLabel,\r\n  className,\r\n  style,\r\n}: LogoProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const ink = color ?? tokens.colors.text.primary;\r\n\r\n  const variant = !markOnly && subBrand ? SUB_BRANDS[subBrand] : null;\r\n  const viewWidth = markOnly ? 76 : variant ? variant.width : PRIMARY_WIDTH;\r\n  const width = (height / VIEW_HEIGHT) * viewWidth;\r\n  const label = variant ? variant.label : \"Zendir\";\r\n\r\n  return (\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width={width}\r\n      height={height}\r\n      viewBox={`0 0 ${viewWidth} ${VIEW_HEIGHT}`}\r\n      fill={ink}\r\n      role=\"img\"\r\n      aria-label={ariaLabel ?? label}\r\n      className={className}\r\n      style={{ flexShrink: 0, ...style }}\r\n    >\r\n      {MARK_PATHS.map((d, i) => (\r\n        <path key={`mark-${i}`} d={d} />\r\n      ))}\r\n      {!markOnly &&\r\n        WORDMARK_PATHS.map((d, i) => <path key={`wordmark-${i}`} d={d} />)}\r\n      {variant && <path d={variant.path} />}\r\n    </svg>\r\n  );\r\n});\r\n\r\nexport default Logo;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAM,aAAa,CACjB,yHACA,y5BACF;AAEA,IAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,gBAAgB;AACtB,IAAM,cAAc;AAUpB,IAAM,aAAiD;CACrD,MAAM;EACJ,OAAO;EACP,OAAO;EACP,MAAM;CACR;CACA,QAAQ;EACN,OAAO;EACP,OAAO;EACP,MAAM;CACR;CACA,QAAQ;EACN,OAAO;EACP,OAAO;EACP,MAAM;CACR;CACA,KAAK;EACH,OAAO;EACP,OAAO;EACP,MAAM;CACR;AACF;AAEA,IAAa,OAAO,KAAK,SAAS,KAAK,EACrC,UACA,WAAW,OACX,SAAS,IACT,OACA,cAAc,WACd,WACA,SACgC;CAChC,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,MAAM,SAAS,OAAO,OAAO,KAAK;CAExC,MAAM,UAAU,CAAC,YAAY,WAAW,WAAW,YAAY;CAC/D,MAAM,YAAY,WAAW,KAAK,UAAU,QAAQ,QAAQ;CAC5D,MAAM,QAAS,SAAS,cAAe;CACvC,MAAM,QAAQ,UAAU,QAAQ,QAAQ;CAExC,OACE,qBAAC,OAAD;EACE,OAAM;EACC;EACC;EACR,SAAS,OAAO,UAAU,GAAG;EAC7B,MAAM;EACN,MAAK;EACL,cAAY,aAAa;EACd;EACX,OAAO;GAAE,YAAY;GAAG,GAAG;EAAM;YATnC;GAWG,WAAW,KAAK,GAAG,MAClB,oBAAC,QAAD,EAA2B,EAAI,GAApB,QAAQ,GAAY,CAChC;GACA,CAAC,YACA,eAAe,KAAK,GAAG,MAAM,oBAAC,QAAD,EAA+B,EAAI,GAAxB,YAAY,GAAY,CAAC;GAClE,WAAW,oBAAC,QAAD,EAAM,GAAG,QAAQ,KAAO,CAAA;EACjC;;AAET,CAAC"}

package/dist/react/core/index.d.ts

@@ -6,6 +6,8 @@
  */
 export { Icon, getIconNames, isValidIconName } from './display/Icon';
 export type { IconProps, IconName } from './display/Icon';
+export { Logo } from './display/Logo';
+export type { LogoProps, LogoSubBrand } from './display/Logo';
 export type { AstroIconProps, AstroIconName, AstroIconSize, } from './display/AstroIcon';
 export { Button } from './inputs/Button';
 export type { ButtonProps, ButtonVariant, ButtonSize } from './inputs/Button';

package/dist/react/core/index.js

@@ -1,4 +1,5 @@
 import { Icon, getIconNames, isValidIconName } from "./display/Icon.js";
+import { Logo } from "./display/Logo.js";
 import { Button } from "./inputs/Button.js";
 import { BREAKPOINTS, useBreakpoint } from "./layout/useBreakpoint.js";
 import { Input } from "./inputs/Input.js";
@@ -51,4 +52,4 @@ import { FileExplorer } from "./widgets/FileExplorer.js";
 import { MissionCalendar } from "./widgets/MissionCalendar.js";
 import { ActivityPlanner } from "./widgets/ActivityPlanner.js";
 import { Capture, loadCapturePlaceholderImage, useCapture } from "./widgets/Capture.js";
-export { ActivityPlanner, AppBar, BREAKPOINTS, Badge, Body1, Body2, Body3, Box, Button, CATEGORY_ICONS, CATEGORY_LABELS, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, Capture, CardHeader, Center, ChatPanel, Checkbox, ColorPickerPanel, CommandBuilder, Compact, ConfirmDialog, ConfirmProvider, ConnectionForm, Container, CopyButton, DataTable, DataTableRowDetail, DataText, DataValue, DataValueGroup, Dialog, Display1, Display2, Divider, FONT_FAMILY_MONO, FONT_FAMILY_PRIMARY, FONT_WEIGHTS, FileExplorer, Flex, GLASS_COLOR_OVERLAYS, GlassCard, Grid, H1, H2, H3, H4, H5, H6, HStack, HeaderIconWithStatus, HexViewer, Icon, ImageFrame, ImageGallery, ImagePanel, Input, Label, LimitsBar, LogViewer, Menu, MessageStream, Micro, MissionCalendar, Mono, NumberInput, PROPERTY_PRESETS, PacketViewer, Pagination, PinInput, Popover, REGION_BORDER_COLORS, REGION_COLORS, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, Select, SideNav, SidePanel, Spacer, Stack, Tabs, ToastProvider, Toggle, Tooltip, Typography, VStack, createChatResponseParser, createPropertyConfig, decodeImage, deriveBatteryStatus, deriveStatus, formatPropertyLabel, formatPropertyValue, getIconNames, getPropertiesByCategory, getPropertyConfig, isValidIconName, loadCapturePlaceholderImage, parseChatResponse, parseMcpToolResult, resolveResponsive, resolveSpacing, useBreakpoint, useCapture, useConfirm, useCopyToClipboard, useToast, useToastManager };
+export { ActivityPlanner, AppBar, BREAKPOINTS, Badge, Body1, Body2, Body3, Box, Button, CATEGORY_ICONS, CATEGORY_LABELS, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, Capture, CardHeader, Center, ChatPanel, Checkbox, ColorPickerPanel, CommandBuilder, Compact, ConfirmDialog, ConfirmProvider, ConnectionForm, Container, CopyButton, DataTable, DataTableRowDetail, DataText, DataValue, DataValueGroup, Dialog, Display1, Display2, Divider, FONT_FAMILY_MONO, FONT_FAMILY_PRIMARY, FONT_WEIGHTS, FileExplorer, Flex, GLASS_COLOR_OVERLAYS, GlassCard, Grid, H1, H2, H3, H4, H5, H6, HStack, HeaderIconWithStatus, HexViewer, Icon, ImageFrame, ImageGallery, ImagePanel, Input, Label, LimitsBar, LogViewer, Logo, Menu, MessageStream, Micro, MissionCalendar, Mono, NumberInput, PROPERTY_PRESETS, PacketViewer, Pagination, PinInput, Popover, REGION_BORDER_COLORS, REGION_COLORS, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, Select, SideNav, SidePanel, Spacer, Stack, Tabs, ToastProvider, Toggle, Tooltip, Typography, VStack, createChatResponseParser, createPropertyConfig, decodeImage, deriveBatteryStatus, deriveStatus, formatPropertyLabel, formatPropertyValue, getIconNames, getPropertiesByCategory, getPropertyConfig, isValidIconName, loadCapturePlaceholderImage, parseChatResponse, parseMcpToolResult, resolveResponsive, resolveSpacing, useBreakpoint, useCapture, useConfirm, useCopyToClipboard, useToast, useToastManager };

package/dist/react/core/inputs/Checkbox.js

@@ -48,7 +48,7 @@ var Checkbox = memo(forwardRef(function Checkbox({ type = "checkbox", checked =
 	const boxStyle = {
 		width: config.boxSize,
 		height: config.boxSize,
-		border: `${tokens.borders.width.thick} solid ${checked ? tokens.colors.accent.primary : hovered && !disabled ? `${tokens.colors.accent.primary}60` : tokens.colors.border.muted}`,
+		border: `${tokens.borders.width.thick} solid ${checked ? tokens.colors.accent.primary : hovered && !disabled ? `${tokens.colors.accent.primary}60` : tokens.colors.border.default}`,
 		borderRadius,
 		backgroundColor: checked ? tokens.colors.accent.primary : isTransparentTheme && transparentDefault ? transparentDefault : "transparent",
 		display: "flex",

package/dist/react/core/inputs/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../src/react/core/inputs/Checkbox.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Checkbox Component\r\n *\r\n * Checkbox and Radio button following Astro UX Design System with Zendir purple accents.\r\n *\r\n * Astro UX Compliance:\r\n * - Clear visual states\r\n * - Accessible keyboard support\r\n * - Indeterminate state for checkbox\r\n *\r\n * Zendir Enhancements:\r\n * - Purple accent when checked\r\n * - Glow effect on focus\r\n * - Smooth spring animation\r\n *\r\n * @example\r\n * ```tsx\r\n * <Checkbox checked={agreed} onChange={setAgreed} label=\"I agree to terms\" />\r\n * <Checkbox type=\"radio\" name=\"priority\" value=\"high\" label=\"High Priority\" />\r\n * ```\r\n */\r\n\r\nimport React, { memo, forwardRef, useId, useState } from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\nimport { classNames } from \"../../utils\";\r\n\r\nexport interface CheckboxProps {\r\n  /** Checkbox or radio */\r\n  type?: \"checkbox\" | \"radio\";\r\n  /** Checked state */\r\n  checked?: boolean;\r\n  /** Change handler */\r\n  onChange?: (checked: boolean) => void;\r\n  /** Label text */\r\n  label?: string;\r\n  /** Value (for radio groups) */\r\n  value?: string;\r\n  /** Name (for radio groups) */\r\n  name?: string;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Indeterminate state (checkbox only) */\r\n  indeterminate?: boolean;\r\n  /** Size variant */\r\n  size?: \"small\" | \"medium\";\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\nexport const Checkbox = memo(\r\n  forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\r\n    {\r\n      type = \"checkbox\",\r\n      checked = false,\r\n      onChange,\r\n      label,\r\n      value,\r\n      name,\r\n      disabled = false,\r\n      indeterminate = false,\r\n      size = \"medium\",\r\n      className = \"\",\r\n    },\r\n    ref,\r\n  ): React.ReactElement {\r\n    const { tokens, theme } = useTheme();\r\n    const isTransparentTheme =\r\n      theme === \"transparent\" ||\r\n      theme === \"transparent-bold\" ||\r\n      theme === \"transparent-minimal\";\r\n    const transparentDefault = tokens.colors.interactive.transparentDefault;\r\n    const [focused, setFocused] = useState(false);\r\n    const [hovered, setHovered] = useState(false);\r\n    const id = useId();\r\n\r\n    // WCAG 2.5.8: minimum 24×24 CSS px target size\r\n    const sizeConfig = {\r\n      small: { boxSize: 18, iconSize: 12, targetSize: 24 },\r\n      medium: { boxSize: 20, iconSize: 14, targetSize: 24 },\r\n    };\r\n    const config = sizeConfig[size];\r\n\r\n    const isRadio = type === \"radio\";\r\n    const borderRadius = isRadio ? \"50%\" : tokens.borderRadius.md;\r\n\r\n    const boxStyle: React.CSSProperties = {\r\n      width: config.boxSize,\r\n      height: config.boxSize,\r\n      border: `${tokens.borders.width.thick} solid ${checked ? tokens.colors.accent.primary : hovered && !disabled ? `${tokens.colors.accent.primary}60` : tokens.colors.border.muted}`,\r\n      borderRadius,\r\n      backgroundColor: checked\r\n        ? tokens.colors.accent.primary\r\n        : isTransparentTheme && transparentDefault\r\n          ? transparentDefault\r\n          : \"transparent\",\r\n      display: \"flex\",\r\n      alignItems: \"center\",\r\n      justifyContent: \"center\",\r\n      transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,\r\n      flexShrink: 0,\r\n      boxShadow: checked\r\n        ? `0 0 12px ${tokens.colors.accent.primary}40`\r\n        : focused\r\n          ? tokens.borders.focusRing.subtle\r\n          : \"none\",\r\n      transform: checked\r\n        ? \"scale(1)\"\r\n        : hovered && !disabled\r\n          ? \"scale(1.05)\"\r\n          : \"scale(1)\",\r\n    };\r\n\r\n    // Check mark for checkbox\r\n    const checkIcon = (\r\n      <svg\r\n        width={config.iconSize}\r\n        height={config.iconSize}\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"#ffffff\"\r\n        strokeWidth=\"3\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      >\r\n        {indeterminate ? (\r\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\r\n        ) : (\r\n          <polyline points=\"20 6 9 17 4 12\" />\r\n        )}\r\n      </svg>\r\n    );\r\n\r\n    // Dot for radio\r\n    const radioIcon = (\r\n      <div\r\n        style={{\r\n          width: config.iconSize - 4,\r\n          height: config.iconSize - 4,\r\n          borderRadius: \"50%\",\r\n          backgroundColor: \"#ffffff\",\r\n        }}\r\n      />\r\n    );\r\n\r\n    return (\r\n      <label\r\n        htmlFor={id}\r\n        className={classNames(\"zendir-checkbox\", className)}\r\n        onMouseEnter={() => setHovered(true)}\r\n        onMouseLeave={() => setHovered(false)}\r\n        style={{\r\n          display: \"inline-flex\",\r\n          alignItems: \"center\",\r\n          gap: tokens.spacing.sm,\r\n          cursor: disabled ? \"not-allowed\" : \"pointer\",\r\n          opacity: disabled ? 0.5 : 1,\r\n        }}\r\n      >\r\n        {/* Touch target wrapper — ensures WCAG 2.5.8 24px minimum */}\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            minWidth: config.targetSize,\r\n            minHeight: config.targetSize,\r\n          }}\r\n        >\r\n          <div style={boxStyle}>\r\n            {checked && (isRadio ? radioIcon : checkIcon)}\r\n          </div>\r\n        </div>\r\n\r\n        <input\r\n          ref={ref}\r\n          type={type}\r\n          id={id}\r\n          name={name}\r\n          value={value}\r\n          checked={checked}\r\n          disabled={disabled}\r\n          onChange={(e) => onChange?.(e.target.checked)}\r\n          onFocus={() => setFocused(true)}\r\n          onBlur={() => setFocused(false)}\r\n          style={{\r\n            position: \"absolute\",\r\n            opacity: 0,\r\n            width: 0,\r\n            height: 0,\r\n          }}\r\n        />\r\n\r\n        {label && (\r\n          <span\r\n            style={{\r\n              fontSize: \"0.875rem\",\r\n              color: tokens.colors.text.primary,\r\n              transition: tokens.animation.fast,\r\n            }}\r\n          >\r\n            {label}\r\n          </span>\r\n        )}\r\n      </label>\r\n    );\r\n  }),\r\n);\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../src/react/core/inputs/Checkbox.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Checkbox Component\r\n *\r\n * Checkbox and Radio button following Astro UX Design System with Zendir purple accents.\r\n *\r\n * Astro UX Compliance:\r\n * - Clear visual states\r\n * - Accessible keyboard support\r\n * - Indeterminate state for checkbox\r\n *\r\n * Zendir Enhancements:\r\n * - Purple accent when checked\r\n * - Glow effect on focus\r\n * - Smooth spring animation\r\n *\r\n * @example\r\n * ```tsx\r\n * <Checkbox checked={agreed} onChange={setAgreed} label=\"I agree to terms\" />\r\n * <Checkbox type=\"radio\" name=\"priority\" value=\"high\" label=\"High Priority\" />\r\n * ```\r\n */\r\n\r\nimport React, { memo, forwardRef, useId, useState } from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\nimport { classNames } from \"../../utils\";\r\n\r\nexport interface CheckboxProps {\r\n  /** Checkbox or radio */\r\n  type?: \"checkbox\" | \"radio\";\r\n  /** Checked state */\r\n  checked?: boolean;\r\n  /** Change handler */\r\n  onChange?: (checked: boolean) => void;\r\n  /** Label text */\r\n  label?: string;\r\n  /** Value (for radio groups) */\r\n  value?: string;\r\n  /** Name (for radio groups) */\r\n  name?: string;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Indeterminate state (checkbox only) */\r\n  indeterminate?: boolean;\r\n  /** Size variant */\r\n  size?: \"small\" | \"medium\";\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\nexport const Checkbox = memo(\r\n  forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\r\n    {\r\n      type = \"checkbox\",\r\n      checked = false,\r\n      onChange,\r\n      label,\r\n      value,\r\n      name,\r\n      disabled = false,\r\n      indeterminate = false,\r\n      size = \"medium\",\r\n      className = \"\",\r\n    },\r\n    ref,\r\n  ): React.ReactElement {\r\n    const { tokens, theme } = useTheme();\r\n    const isTransparentTheme =\r\n      theme === \"transparent\" ||\r\n      theme === \"transparent-bold\" ||\r\n      theme === \"transparent-minimal\";\r\n    const transparentDefault = tokens.colors.interactive.transparentDefault;\r\n    const [focused, setFocused] = useState(false);\r\n    const [hovered, setHovered] = useState(false);\r\n    const id = useId();\r\n\r\n    // WCAG 2.5.8: minimum 24×24 CSS px target size\r\n    const sizeConfig = {\r\n      small: { boxSize: 18, iconSize: 12, targetSize: 24 },\r\n      medium: { boxSize: 20, iconSize: 14, targetSize: 24 },\r\n    };\r\n    const config = sizeConfig[size];\r\n\r\n    const isRadio = type === \"radio\";\r\n    const borderRadius = isRadio ? \"50%\" : tokens.borderRadius.md;\r\n\r\n    const boxStyle: React.CSSProperties = {\r\n      width: config.boxSize,\r\n      height: config.boxSize,\r\n      // Unchecked state uses border.default, not border.muted: the muted\r\n      // token is a hairline that themes may set equal to an elevated surface\r\n      // colour (nebula does), which makes the box invisible inside panels.\r\n      // A control outline is an affordance and needs the stronger token.\r\n      border: `${tokens.borders.width.thick} solid ${checked ? tokens.colors.accent.primary : hovered && !disabled ? `${tokens.colors.accent.primary}60` : tokens.colors.border.default}`,\r\n      borderRadius,\r\n      backgroundColor: checked\r\n        ? tokens.colors.accent.primary\r\n        : isTransparentTheme && transparentDefault\r\n          ? transparentDefault\r\n          : \"transparent\",\r\n      display: \"flex\",\r\n      alignItems: \"center\",\r\n      justifyContent: \"center\",\r\n      transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,\r\n      flexShrink: 0,\r\n      boxShadow: checked\r\n        ? `0 0 12px ${tokens.colors.accent.primary}40`\r\n        : focused\r\n          ? tokens.borders.focusRing.subtle\r\n          : \"none\",\r\n      transform: checked\r\n        ? \"scale(1)\"\r\n        : hovered && !disabled\r\n          ? \"scale(1.05)\"\r\n          : \"scale(1)\",\r\n    };\r\n\r\n    // Check mark for checkbox\r\n    const checkIcon = (\r\n      <svg\r\n        width={config.iconSize}\r\n        height={config.iconSize}\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"#ffffff\"\r\n        strokeWidth=\"3\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      >\r\n        {indeterminate ? (\r\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\r\n        ) : (\r\n          <polyline points=\"20 6 9 17 4 12\" />\r\n        )}\r\n      </svg>\r\n    );\r\n\r\n    // Dot for radio\r\n    const radioIcon = (\r\n      <div\r\n        style={{\r\n          width: config.iconSize - 4,\r\n          height: config.iconSize - 4,\r\n          borderRadius: \"50%\",\r\n          backgroundColor: \"#ffffff\",\r\n        }}\r\n      />\r\n    );\r\n\r\n    return (\r\n      <label\r\n        htmlFor={id}\r\n        className={classNames(\"zendir-checkbox\", className)}\r\n        onMouseEnter={() => setHovered(true)}\r\n        onMouseLeave={() => setHovered(false)}\r\n        style={{\r\n          display: \"inline-flex\",\r\n          alignItems: \"center\",\r\n          gap: tokens.spacing.sm,\r\n          cursor: disabled ? \"not-allowed\" : \"pointer\",\r\n          opacity: disabled ? 0.5 : 1,\r\n        }}\r\n      >\r\n        {/* Touch target wrapper — ensures WCAG 2.5.8 24px minimum */}\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            minWidth: config.targetSize,\r\n            minHeight: config.targetSize,\r\n          }}\r\n        >\r\n          <div style={boxStyle}>\r\n            {checked && (isRadio ? radioIcon : checkIcon)}\r\n          </div>\r\n        </div>\r\n\r\n        <input\r\n          ref={ref}\r\n          type={type}\r\n          id={id}\r\n          name={name}\r\n          value={value}\r\n          checked={checked}\r\n          disabled={disabled}\r\n          onChange={(e) => onChange?.(e.target.checked)}\r\n          onFocus={() => setFocused(true)}\r\n          onBlur={() => setFocused(false)}\r\n          style={{\r\n            position: \"absolute\",\r\n            opacity: 0,\r\n            width: 0,\r\n            height: 0,\r\n          }}\r\n        />\r\n\r\n        {label && (\r\n          <span\r\n            style={{\r\n              fontSize: \"0.875rem\",\r\n              color: tokens.colors.text.primary,\r\n              transition: tokens.animation.fast,\r\n            }}\r\n          >\r\n            {label}\r\n          </span>\r\n        )}\r\n      </label>\r\n    );\r\n  }),\r\n);\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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"}

package/dist/react/core/widgets/ChatPanel.d.ts

@@ -152,6 +152,17 @@ export interface ChatPanelProps {
     onClear?: () => void;
     /** Handler for interactive block events (choice selection, confirm/cancel, command execute) */
     onBlockEvent?: (event: ChatBlockEvent) => void;
+    /**
+     * Render a message's text yourself instead of using the built-in renderer.
+     *
+     * The built-in one covers `**bold**`, `` `code` `` and fenced code blocks.
+     * Anything richer — lists, tables, links — needs a real markdown renderer,
+     * which is a dependency this package does not carry. Supply one here to hand
+     * that decision (and its bundle cost) to the host.
+     *
+     * Blocks are unaffected; they render as normal beneath the returned content.
+     */
+    renderMessageContent?: (content: string, message: ChatMessage) => React.ReactNode;
     /** Custom style */
     style?: React.CSSProperties;
 }

package/dist/react/core/widgets/ChatPanel.js

@@ -1488,7 +1488,7 @@ function renderBlock(block, index, messageId, onEvent) {
 		default: return null;
 	}
 }
-var ChatPanel = memo(function ChatPanel({ messages = [], onSend, loading = false, placeholder = "Type a message...", title, subtitle, disabled = false, showTimestamps = true, height = "100%", onClear, onBlockEvent, style }) {
+var ChatPanel = memo(function ChatPanel({ messages = [], onSend, loading = false, placeholder = "Type a message...", title, subtitle, disabled = false, showTimestamps = true, height = "100%", onClear, onBlockEvent, renderMessageContent, style }) {
 	const { tokens } = useTheme();
 	const [input, setInput] = useState("");
 	const messagesEndRef = useRef(null);
@@ -1718,7 +1718,7 @@ var ChatPanel = memo(function ChatPanel({ messages = [], onSend, loading = false
 											children: severity
 										})]
 									}),
-									renderContent(msg.content),
+									renderMessageContent ? renderMessageContent(msg.content, msg) : renderContent(msg.content),
 									Array.isArray(msg.blocks) && msg.blocks.map((block, i) => block ? renderBlock(block, i, msg.id, onBlockEvent) : null),
 									msg.actions && msg.actions.length > 0 && /* @__PURE__ */ jsx("div", {
 										style: {