@bycrux/editor 0.11.2 → 1.0.1

package/src/ui/index.ts

@@ -7,6 +7,10 @@ export type { ButtonProps } from './button'
 export { Input, inspectorInputClass } from './input'
 export type { InputProps } from './input'
 export { Label } from './label'
+export { NumberField, stepValue } from './NumberField'
+export type { NumberFieldProps } from './NumberField'
+export { Slider } from './Slider'
+export type { SliderProps } from './Slider'
 export { Select } from './select'
 export type { SelectProps } from './select'
 export { SwatchInput } from './SwatchInput'
@@ -16,3 +20,5 @@ export { Textarea } from './textarea'
 export type { TextareaProps } from './textarea'
 export { Badge, StatusBadge } from './badge'
 export type { BadgeProps } from './badge'
+export { Tooltip } from './Tooltip'
+export type { TooltipProps } from './Tooltip'

package/src/ui/input.tsx

@@ -12,7 +12,7 @@ export function Input({ className, ...props }: InputProps) {
   return (
     <input
       className={cn(
-        'flex h-9 w-full rounded-md border border-gray-300 bg-white px-3 py-1 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50 dark:border-[var(--editor-border)] dark:bg-[var(--editor-surface)] dark:text-[var(--editor-text)] dark:placeholder:text-[var(--editor-text)]/60',
+        'flex h-9 w-full rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-3 py-1 text-sm text-[var(--editor-text)] placeholder:text-[var(--editor-text)]/60 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50',
         className,
       )}
       {...props}

package/src/ui/select.tsx

@@ -8,7 +8,7 @@ export function Select({ className, options, ...props }: SelectProps) {
   return (
     <select
       className={cn(
-        'flex h-9 w-full rounded-md border border-gray-300 bg-white px-3 py-1 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50 dark:border-[var(--editor-border)] dark:bg-[var(--editor-surface)] dark:text-[var(--editor-text)]',
+        'flex h-9 w-full rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-3 py-1 text-sm text-[var(--editor-text)] focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50',
         className,
       )}
       {...props}

package/src/ui/switch.tsx

@@ -5,18 +5,28 @@ interface SwitchProps {
   onCheckedChange: (v: boolean) => void
   className?: string
   disabled?: boolean
+  /** Passed straight through to the underlying button — this component has no
+   *  visible text of its own, so a caller placing the switch beside a text
+   *  label (rather than wrapping it in one) needs this for an accessible name. */
+  'aria-label'?: string
+  /** Editor theme mode — light/dark. Only affects the unchecked track's hue:
+   *  `--editor-border` (#e5e7eb) on a light `--editor-surface` (#ffffff) is
+   *  ~1.2:1, so an off switch with a white knob effectively disappears.
+   *  Absent -> dark, matching every existing caller. */
+  mode?: 'light' | 'dark'
 }
 
-export function Switch({ checked, onCheckedChange, className, disabled }: SwitchProps) {
+export function Switch({ checked, onCheckedChange, className, disabled, 'aria-label': ariaLabel, mode = 'dark' }: SwitchProps) {
   return (
     <button
       role="switch"
       aria-checked={checked}
+      aria-label={ariaLabel}
       disabled={disabled}
       onClick={() => onCheckedChange(!checked)}
       className={cn(
         'relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--editor-accent)] disabled:opacity-50',
-        checked ? 'bg-[var(--editor-accent)]' : 'bg-gray-300 dark:bg-[var(--editor-border)]',
+        checked ? 'bg-[var(--editor-accent)]' : (mode === 'light' ? 'bg-gray-400' : 'bg-[var(--editor-border)]'),
         className,
       )}
     >

package/src/ui/textarea.tsx

@@ -6,7 +6,7 @@ export function Textarea({ className, ...props }: TextareaProps) {
   return (
     <textarea
       className={cn(
-        'flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50 resize-none dark:border-[var(--editor-border)] dark:bg-[var(--editor-surface)] dark:text-[var(--editor-text)] dark:placeholder:text-[var(--editor-text)]/60',
+        'flex w-full rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-3 py-2 text-sm text-[var(--editor-text)] placeholder:text-[var(--editor-text)]/60 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50 resize-none',
         className,
       )}
       {...props}

package/src/ui/usePersistentState.ts

@@ -0,0 +1,63 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * `useState` that survives a reload, backed by `localStorage`.
+ *
+ * Every access is wrapped: `localStorage` throws rather than returning null in
+ * Safari private mode and under some embedded/iframe policies, and a layout
+ * preference is never worth taking the editor down for. A read that fails, or
+ * that finds a value the current build can no longer parse (an older key
+ * format, a hand-edited entry), falls back to `initial` — so a bad stored value
+ * degrades to the default rather than a crash loop the user can't escape
+ * without clearing site data.
+ *
+ * The stored value is read ONCE, in the lazy `useState` initializer. This hook
+ * deliberately does not subscribe to `storage` events: two editor tabs open on
+ * the same project should each keep their own panel sizes, not fight over them.
+ */
+export function usePersistentState<T>(
+  key: string,
+  initial: T,
+  /** Guards what comes back out of storage. Return `null` to reject a stored
+   *  value and fall back to `initial` — the parse boundary is where a stale or
+   *  hand-edited entry gets caught. */
+  revive: (raw: unknown) => T | null,
+): [T, (next: T, opts?: { persist?: boolean }) => void] {
+  const [value, setValue] = useState<T>(() => {
+    try {
+      const raw = window.localStorage.getItem(key)
+      if (raw === null) return initial
+      const parsed = revive(JSON.parse(raw))
+      return parsed === null ? initial : parsed
+    } catch {
+      return initial
+    }
+  })
+
+  /** `persist: false` updates the value without touching storage — for the
+   *  intermediate frames of a drag, which would otherwise write to
+   *  `localStorage` on every mousemove. Commit once when the gesture ends. */
+  const set = useCallback((next: T, opts?: { persist?: boolean }) => {
+    setValue(next)
+    if (opts?.persist === false) return
+    try {
+      window.localStorage.setItem(key, JSON.stringify(next))
+    } catch {
+      // Quota, private mode, or a blocked storage partition — the preference
+      // just doesn't persist. Not worth surfacing.
+    }
+  }, [key])
+
+  return [value, set]
+}
+
+/** `revive` for a finite number inside `[min, max]`. Rejects anything else,
+ *  including a stored height from a window size that no longer exists. */
+export function reviveNumberInRange(min: number, max: number) {
+  return (raw: unknown): number | null =>
+    typeof raw === 'number' && Number.isFinite(raw) && raw >= min && raw <= max ? raw : null
+}
+
+/** `revive` for a plain boolean. */
+export const reviveBoolean = (raw: unknown): boolean | null =>
+  typeof raw === 'boolean' ? raw : null