@pictor-sdk/ui 0.1.0

package/src/theme.ts

@@ -0,0 +1,61 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * Theming is one token object on context — no style props on individual
+ * components (ARCHITECTURE.md). Override any subset via <Editor theme={…}>.
+ */
+export interface EditorTheme {
+  colors: {
+    background: string
+    surface: string
+    text: string
+    textMuted: string
+    accent: string
+    danger: string
+    track: string
+    thumb: string
+  }
+  radii: { sm: number; md: number; lg: number }
+  spacing: { xs: number; sm: number; md: number; lg: number }
+  font: { size: number; sizeSm: number; weight: '400' | '500' | '600' | '700' }
+}
+
+/** The bundled dark theme. Every value is overridable; see {@link mergeTheme}. */
+export const defaultTheme: EditorTheme = {
+  colors: {
+    background: '#000000',
+    surface: '#121212',
+    text: '#ffffff',
+    textMuted: '#9a9a9a',
+    accent: '#3897f0',
+    danger: '#ed4956',
+    track: '#3a3a3a',
+    thumb: '#ffffff',
+  },
+  radii: { sm: 6, md: 10, lg: 16 },
+  spacing: { xs: 4, sm: 8, md: 14, lg: 22 },
+  font: { size: 15, sizeSm: 12, weight: '600' },
+}
+
+/** A theme override — any subset of any group, the rest falling back to the default. */
+export type PartialTheme = {
+  [K in keyof EditorTheme]?: Partial<EditorTheme[K]>
+}
+
+/** Apply an override onto the default theme, one group at a time. */
+export function mergeTheme(overrides?: PartialTheme): EditorTheme {
+  if (!overrides) return defaultTheme
+  return {
+    colors: { ...defaultTheme.colors, ...overrides.colors },
+    radii: { ...defaultTheme.radii, ...overrides.radii },
+    spacing: { ...defaultTheme.spacing, ...overrides.spacing },
+    font: { ...defaultTheme.font, ...overrides.font },
+  }
+}
+
+/** Carries the resolved theme. `<Editor>` provides it; components read it with {@link useTheme}. */
+export const ThemeContext = createContext<EditorTheme>(defaultTheme)
+/** The theme in effect. Defaults outside an `<Editor>` rather than throwing. */
+export function useTheme(): EditorTheme {
+  return useContext(ThemeContext)
+}

package/src/uiState.tsx

@@ -0,0 +1,57 @@
+import React, { createContext, useCallback, useContext, useRef, useSyncExternalStore } from 'react'
+
+/**
+ * A tiny shared key/value store for panel ↔ canvas coordination (brush
+ * config, sticker catalogs, eyedropper mode). Ephemeral — never touches the
+ * document or history.
+ */
+export interface UiStateStore {
+  get<T>(key: string, fallback: T): T
+  set(key: string, value: unknown): void
+  subscribe(listener: () => void): () => void
+}
+
+/** A scratch store for UI state that is neither document nor history. */
+export function createUiStateStore(): UiStateStore {
+  const values = new Map<string, unknown>()
+  const listeners = new Set<() => void>()
+  return {
+    get: <T,>(key: string, fallback: T) =>
+      (values.has(key) ? (values.get(key) as T) : fallback),
+    set(key, value) {
+      values.set(key, value)
+      for (const l of [...listeners]) l()
+    },
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+  }
+}
+
+const UiStateContext = createContext<UiStateStore | null>(null)
+
+/**
+ * Holds ephemeral panel state — which tab is open, which swatch is selected.
+ *
+ * Deliberately outside the document: none of it should be serialized, undoable,
+ * or survive the editor closing.
+ */
+export function UiStateProvider({ children }: { children?: React.ReactNode }) {
+  const ref = useRef<UiStateStore | null>(null)
+  if (!ref.current) ref.current = createUiStateStore()
+  return <UiStateContext.Provider value={ref.current}>{children}</UiStateContext.Provider>
+}
+
+/** Read and write one key of the ephemeral UI state. Throws outside an `<Editor>`. */
+export function useUiState<T>(key: string, fallback: T): [T, (value: T) => void] {
+  const store = useContext(UiStateContext)
+  if (!store) throw new Error('useUiState must be used inside <Editor> (UiStateProvider)')
+  const value = useSyncExternalStore(
+    store.subscribe,
+    () => store.get(key, fallback),
+    () => store.get(key, fallback),
+  )
+  const set = useCallback((v: T) => store.set(key, v), [store, key])
+  return [value, set]
+}