@bendyline/squisq-editor-react 1.3.0 → 1.5.0

package/src/jsonEditor/json-editor.css

@@ -0,0 +1,463 @@
+/**
+ * <JsonEditor> — editable form styles.
+ *
+ * Theme tokens are injected as scoped `--squisq-jsonform-*` CSS custom
+ * properties on the root, mirroring the JsonView pattern. Editor-only
+ * tokens use a separate prefix from the read-only viewer so the two
+ * components can compose on the same page without bleeding styles.
+ */
+
+.squisq-jsonform {
+  font-family: var(--squisq-jsonform-body-font, var(--squisq-ux-font, system-ui, sans-serif));
+  color: var(--squisq-jsonform-text);
+  background: var(--squisq-jsonform-bg);
+  border-radius: var(--squisq-jsonform-radius, 8px);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  container-type: inline-size;
+}
+
+.squisq-jsonform--compact {
+  padding: 8px;
+  gap: 8px;
+}
+
+.squisq-jf-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: color-mix(in srgb, var(--squisq-jsonform-bg) 92%, var(--squisq-jsonform-text) 8%);
+  border: 1px solid var(--squisq-jsonform-border);
+  border-radius: var(--squisq-jsonform-radius, 8px);
+  padding: 14px 16px;
+}
+
+.squisq-jf-group__title {
+  font-family: var(--squisq-jsonform-title-font, inherit);
+  font-size: 1.05em;
+  font-weight: 600;
+  color: var(--squisq-jsonform-text);
+  margin: 0;
+}
+
+.squisq-jf-group__help {
+  font-size: 0.85em;
+  color: var(--squisq-jsonform-muted);
+  margin: -6px 0 0 0;
+}
+
+.squisq-jf-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.squisq-jf-field__label {
+  font-size: 0.85em;
+  font-weight: 500;
+  color: var(--squisq-jsonform-muted);
+}
+
+.squisq-jf-field__help {
+  font-size: 0.8em;
+  color: var(--squisq-jsonform-muted);
+}
+
+.squisq-jf-field__error {
+  font-size: 0.8em;
+  color: var(--squisq-jsonform-warning, #d4351c);
+}
+
+.squisq-jf-field--disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+/* Inputs share a base look so the form feels cohesive. */
+.squisq-jf-input,
+.squisq-jf-textarea,
+.squisq-jf-select {
+  font: inherit;
+  color: var(--squisq-jsonform-text);
+  background: var(--squisq-jsonform-input-bg, var(--squisq-jsonform-bg));
+  border: 1px solid var(--squisq-jsonform-border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  outline: none;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.squisq-jf-input:focus,
+.squisq-jf-textarea:focus,
+.squisq-jf-select:focus {
+  border-color: var(--squisq-jsonform-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--squisq-jsonform-primary) 25%, transparent);
+}
+
+.squisq-jf-textarea {
+  min-height: 70px;
+  resize: vertical;
+  line-height: 1.45;
+}
+
+/* Number stepper: tight inline group. */
+.squisq-jf-stepper {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--squisq-jsonform-border);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--squisq-jsonform-input-bg, var(--squisq-jsonform-bg));
+}
+
+.squisq-jf-stepper__input {
+  width: 80px;
+  padding: 6px 8px;
+  border: none;
+  background: transparent;
+  color: var(--squisq-jsonform-text);
+  font: inherit;
+  text-align: center;
+  outline: none;
+}
+
+.squisq-jf-stepper__btn {
+  background: transparent;
+  border: none;
+  color: var(--squisq-jsonform-muted);
+  padding: 0 10px;
+  cursor: pointer;
+  font: inherit;
+}
+
+.squisq-jf-stepper__btn:hover {
+  color: var(--squisq-jsonform-primary);
+}
+
+/* Slider */
+.squisq-jf-slider-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.squisq-jf-slider {
+  flex: 1;
+  accent-color: var(--squisq-jsonform-primary);
+}
+
+.squisq-jf-slider-readout {
+  font-family: var(--squisq-jsonform-mono-font, ui-monospace, Consolas, monospace);
+  min-width: 4ch;
+  text-align: right;
+  color: var(--squisq-jsonform-muted);
+}
+
+/* Toggle switch. Selector matches both `<button>` (ToggleEditor) and
+   `<label>` (CheckboxEditor) — buttons need explicit chrome resets or
+   the user agent paints them as opaque pills (the bright white shape
+   that doesn't match the surrounding theme). */
+.squisq-jf-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.squisq-jf-toggle:disabled {
+  cursor: not-allowed;
+}
+
+.squisq-jf-toggle:focus-visible {
+  outline: 2px solid var(--squisq-jsonform-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.squisq-jf-toggle__track {
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--squisq-jsonform-muted) 35%, transparent);
+  position: relative;
+  transition: background 150ms ease;
+}
+
+.squisq-jf-toggle__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 150ms ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.squisq-jf-toggle--on .squisq-jf-toggle__track {
+  background: var(--squisq-jsonform-primary);
+}
+
+.squisq-jf-toggle--on .squisq-jf-toggle__thumb {
+  transform: translateX(16px);
+}
+
+.squisq-jf-toggle__label {
+  font-size: 0.9em;
+}
+
+/* Segmented */
+.squisq-jf-segmented {
+  display: inline-flex;
+  border: 1px solid var(--squisq-jsonform-border);
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--squisq-jsonform-input-bg, var(--squisq-jsonform-bg));
+}
+
+.squisq-jf-segmented__btn {
+  border: none;
+  background: transparent;
+  color: var(--squisq-jsonform-text);
+  font: inherit;
+  padding: 6px 14px;
+  cursor: pointer;
+  transition:
+    background 100ms ease,
+    color 100ms ease;
+}
+
+.squisq-jf-segmented__btn--active {
+  background: var(--squisq-jsonform-primary);
+  color: #fff;
+}
+
+.squisq-jf-radio {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.squisq-jf-radio__option {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  cursor: pointer;
+}
+
+/* Color picker */
+.squisq-jf-color {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.squisq-jf-color__input {
+  width: 36px;
+  height: 28px;
+  border: 1px solid var(--squisq-jsonform-border);
+  border-radius: 6px;
+  padding: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.squisq-jf-color__hex {
+  font-family: var(--squisq-jsonform-mono-font, ui-monospace, Consolas, monospace);
+  font-size: 0.9em;
+  width: 8ch;
+}
+
+/* Chip bin */
+.squisq-jf-chip-bin {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.squisq-jf-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 4px 3px 10px;
+  font-size: 0.85em;
+  background: color-mix(in srgb, var(--squisq-jsonform-primary) 16%, transparent);
+  color: var(--squisq-jsonform-text);
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--squisq-jsonform-primary) 30%, transparent);
+}
+
+.squisq-jf-chip__remove {
+  border: none;
+  background: transparent;
+  color: var(--squisq-jsonform-muted);
+  font-size: 1em;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: 50%;
+}
+
+.squisq-jf-chip__remove:hover {
+  color: var(--squisq-jsonform-warning, #d4351c);
+}
+
+.squisq-jf-chip-bin__add-input {
+  flex: 1;
+  min-width: 100px;
+  border: none;
+  background: transparent;
+  color: var(--squisq-jsonform-text);
+  font: inherit;
+  outline: none;
+  padding: 4px;
+}
+
+/* Card stack */
+.squisq-jf-card-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.squisq-jf-card {
+  background: color-mix(in srgb, var(--squisq-jsonform-bg) 95%, var(--squisq-jsonform-text) 5%);
+  border: 1px solid var(--squisq-jsonform-border);
+  border-radius: var(--squisq-jsonform-radius, 6px);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.squisq-jf-card__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.squisq-jf-card__title {
+  font-family: var(--squisq-jsonform-title-font, inherit);
+  font-weight: 600;
+  font-size: 0.95em;
+  color: var(--squisq-jsonform-text);
+  margin: 0;
+  flex: 1;
+}
+
+.squisq-jf-card__actions {
+  display: flex;
+  gap: 4px;
+}
+
+.squisq-jf-icon-btn {
+  border: none;
+  background: transparent;
+  color: var(--squisq-jsonform-muted);
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.squisq-jf-icon-btn:hover {
+  background: color-mix(in srgb, var(--squisq-jsonform-text) 8%, transparent);
+}
+
+.squisq-jf-icon-btn--danger:hover {
+  color: var(--squisq-jsonform-warning, #d4351c);
+}
+
+.squisq-jf-add-btn {
+  align-self: flex-start;
+  padding: 6px 12px;
+  border: 1px dashed var(--squisq-jsonform-border);
+  background: transparent;
+  color: var(--squisq-jsonform-muted);
+  border-radius: 6px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.9em;
+}
+
+.squisq-jf-add-btn:hover {
+  color: var(--squisq-jsonform-primary);
+  border-color: var(--squisq-jsonform-primary);
+}
+
+.squisq-jf-tabs__strip {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--squisq-jsonform-border);
+  margin-bottom: 8px;
+}
+
+.squisq-jf-tabs__tab {
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  color: var(--squisq-jsonform-muted);
+  font: inherit;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+
+.squisq-jf-tabs__tab--active {
+  color: var(--squisq-jsonform-text);
+  border-bottom-color: var(--squisq-jsonform-primary);
+}
+
+/* Embedded rich text editor */
+.squisq-jf-richtext {
+  border: 1px solid var(--squisq-jsonform-border);
+  border-radius: 6px;
+  padding: 8px 12px;
+  background: var(--squisq-jsonform-input-bg, var(--squisq-jsonform-bg));
+  min-height: 110px;
+}
+
+.squisq-jf-richtext .ProseMirror {
+  outline: none;
+  min-height: 90px;
+  font-family: var(--squisq-jsonform-body-font, inherit);
+  color: var(--squisq-jsonform-text);
+  line-height: 1.5;
+}
+
+.squisq-jf-richtext .ProseMirror p {
+  margin: 0.4em 0;
+}
+
+.squisq-jf-richtext .ProseMirror h1,
+.squisq-jf-richtext .ProseMirror h2,
+.squisq-jf-richtext .ProseMirror h3 {
+  font-family: var(--squisq-jsonform-title-font, inherit);
+  margin: 0.5em 0 0.3em;
+  font-weight: 600;
+}
+
+.squisq-jf-richtext .ProseMirror code {
+  font-family: var(--squisq-jsonform-mono-font, ui-monospace, Consolas, monospace);
+  background: color-mix(in srgb, var(--squisq-jsonform-text) 10%, transparent);
+  padding: 1px 4px;
+  border-radius: 3px;
+}

package/src/jsonEditor/useJsonEditorTokens.ts

@@ -0,0 +1,63 @@
+/**
+ * Derive the CSS custom-property bag for `<JsonEditor>` from a Theme +
+ * Surface. Mirrors the JsonView token hook in the react package, but
+ * uses an editor-specific prefix so the two can coexist on a page.
+ */
+
+import { useMemo } from 'react';
+import type { CSSProperties } from 'react';
+import {
+  applySurface,
+  resolveFontFamily,
+  type SurfaceScheme,
+  type Theme,
+  DEFAULT_THEME,
+  DARK_SURFACE,
+  LIGHT_SURFACE,
+} from '@bendyline/squisq/schemas';
+
+export interface JsonEditorTokens {
+  style: CSSProperties;
+  theme: Theme;
+}
+
+export function useJsonEditorTokens(
+  theme: Theme | undefined,
+  surface: SurfaceScheme | 'auto' | undefined,
+): JsonEditorTokens {
+  return useMemo(() => {
+    const baseTheme = theme ?? DEFAULT_THEME;
+    const resolvedSurface =
+      surface === 'auto'
+        ? typeof window !== 'undefined' &&
+          window.matchMedia?.('(prefers-color-scheme: dark)').matches
+          ? DARK_SURFACE
+          : LIGHT_SURFACE
+        : (surface ?? undefined);
+    const finalTheme = resolvedSurface ? applySurface(baseTheme, resolvedSurface) : baseTheme;
+
+    const titleFont = resolveFontFamily(finalTheme.typography.titleFont, 'system-ui, sans-serif');
+    const bodyFont = resolveFontFamily(finalTheme.typography.bodyFont, 'system-ui, sans-serif');
+    const monoFont = resolveFontFamily(
+      finalTheme.typography.monoFont,
+      'ui-monospace, Consolas, monospace',
+    );
+
+    const style: CSSProperties = {
+      ['--squisq-jsonform-bg' as string]: finalTheme.colors.background,
+      ['--squisq-jsonform-text' as string]: finalTheme.colors.text,
+      ['--squisq-jsonform-muted' as string]: finalTheme.colors.textMuted,
+      ['--squisq-jsonform-primary' as string]: finalTheme.colors.primary,
+      ['--squisq-jsonform-accent' as string]: finalTheme.colors.secondary,
+      ['--squisq-jsonform-warning' as string]: finalTheme.colors.warning,
+      ['--squisq-jsonform-border' as string]: `color-mix(in srgb, ${finalTheme.colors.textMuted} 35%, transparent)`,
+      ['--squisq-jsonform-input-bg' as string]: finalTheme.colors.backgroundLight,
+      ['--squisq-jsonform-title-font' as string]: titleFont,
+      ['--squisq-jsonform-body-font' as string]: bodyFont,
+      ['--squisq-jsonform-mono-font' as string]: monoFont,
+      ['--squisq-jsonform-radius' as string]: `${finalTheme.style.borderRadius ?? 8}px`,
+    };
+
+    return { style, theme: finalTheme };
+  }, [theme, surface]);
+}

package/src/recorder/RecorderButton.tsx

@@ -0,0 +1,72 @@
+/**
+ * RecorderButton — drop-in button that opens the {@link RecorderModal}
+ * in a portal anchored to `document.body`. Convenience wrapper for
+ * hosts that don't need to manage modal open/close state themselves.
+ *
+ * Mirrors the consumption pattern of `VideoExportButton` in
+ * `@bendyline/squisq-video-react`.
+ */
+
+import { useCallback, useState, type CSSProperties } from 'react';
+import { createPortal } from 'react-dom';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import type { ContentContainer } from '@bendyline/squisq/storage';
+import { RecorderModal, type RecorderSaveResult } from './RecorderModal.js';
+import type { RecorderSource } from './hooks/useMediaRecorder.js';
+
+export interface RecorderButtonProps {
+  /** Where to write the resulting recording. Required. */
+  mediaProvider: MediaProvider;
+  /** Optional container for narration `.timing.json` sidecar writes. */
+  container?: ContentContainer | null;
+  /** Initial capture source. Defaults to `'mic'`. */
+  initialMode?: RecorderSource;
+  /** Fired after a successful save. */
+  onSave?: (result: RecorderSaveResult) => void;
+  /** Button label. Defaults to `'Record'`. */
+  label?: string;
+  /** Optional inline button styles. */
+  style?: CSSProperties;
+  /** Whether the button is disabled. */
+  disabled?: boolean;
+}
+
+export function RecorderButton({
+  mediaProvider,
+  container = null,
+  initialMode = 'mic',
+  onSave,
+  label = 'Record',
+  style,
+  disabled,
+}: RecorderButtonProps) {
+  const [open, setOpen] = useState(false);
+  const handleOpen = useCallback(() => setOpen(true), []);
+  const handleClose = useCallback(() => setOpen(false), []);
+  const handleSave = useCallback(
+    (result: RecorderSaveResult) => {
+      onSave?.(result);
+    },
+    [onSave],
+  );
+
+  return (
+    <>
+      <button type="button" onClick={handleOpen} style={style} disabled={disabled}>
+        {label}
+      </button>
+      {open &&
+        typeof document !== 'undefined' &&
+        createPortal(
+          <RecorderModal
+            mediaProvider={mediaProvider}
+            container={container}
+            initialMode={initialMode}
+            onClose={handleClose}
+            onSave={handleSave}
+          />,
+          document.body,
+        )}
+    </>
+  );
+}