@pyric/ui 0.1.0-alpha.11 → 0.1.0-alpha.13

package/src/primitives/useConfirm.tsx

@@ -0,0 +1,113 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { ConfirmDialog } from './ConfirmDialog.js';
+
+export interface ConfirmOptions {
+  title: string;
+  body?: ReactNode;
+  destructive?: boolean;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+
+const Ctx = createContext<ConfirmFn | null>(null);
+
+/**
+ * Imperative confirmation hook. Returns a function that opens the
+ * provider-managed dialog and resolves to `true` on confirm, `false`
+ * on cancel/dismiss.
+ *
+ *   const confirm = useConfirm();
+ *   const ok = await confirm({ title: 'Delete?', destructive: true });
+ *   if (ok) await deleteDoc(ref);
+ *
+ * Requires a `<ConfirmProvider>` ancestor.
+ */
+export function useConfirm(): ConfirmFn {
+  const fn = useContext(Ctx);
+  if (!fn) {
+    throw new Error('useConfirm: missing <ConfirmProvider> ancestor');
+  }
+  return fn;
+}
+
+interface PendingConfirm {
+  options: ConfirmOptions;
+  resolve: (ok: boolean) => void;
+}
+
+export interface ConfirmProviderProps {
+  children: ReactNode;
+  /** Forwarded to the rendered `<ConfirmDialog>`. */
+  dialogClassName?: string;
+}
+
+/**
+ * Mounts a single managed `<ConfirmDialog>` and exposes the
+ * imperative `confirm()` API through context. Scoped — multiple
+ * providers can coexist in different subtrees, each managing its
+ * own dialog.
+ */
+export function ConfirmProvider({ children, dialogClassName }: ConfirmProviderProps) {
+  const [pending, setPending] = useState<PendingConfirm | null>(null);
+  // Track which resolution path fired so the close handler doesn't
+  // double-resolve when both onConfirm + onOpenChange(false) trigger.
+  const resolvedRef = useRef(false);
+
+  const confirm = useCallback<ConfirmFn>((options) => {
+    return new Promise<boolean>((resolve) => {
+      resolvedRef.current = false;
+      setPending({ options, resolve });
+    });
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    if (!pending) return;
+    if (resolvedRef.current) return;
+    resolvedRef.current = true;
+    pending.resolve(true);
+    setPending(null);
+  }, [pending]);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (open) return;
+      if (!pending) return;
+      if (resolvedRef.current) return;
+      resolvedRef.current = true;
+      pending.resolve(false);
+      setPending(null);
+    },
+    [pending],
+  );
+
+  const ctxValue = useMemo(() => confirm, [confirm]);
+
+  return (
+    <Ctx.Provider value={ctxValue}>
+      {children}
+      {pending ? (
+        <ConfirmDialog
+          open
+          onOpenChange={handleOpenChange}
+          title={pending.options.title}
+          body={pending.options.body}
+          destructive={pending.options.destructive}
+          confirmLabel={pending.options.confirmLabel}
+          cancelLabel={pending.options.cancelLabel}
+          onConfirm={handleConfirm}
+          className={dialogClassName}
+        />
+      ) : null}
+    </Ctx.Provider>
+  );
+}

package/src/rtdb/components/RtdbPathBar.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useRef, useState, type FormEvent, type ReactNode } from 'react';
+import { parseRtdbPathInput, rtdbCrumbs } from '../pathInput.js';
+import { normalizeRtdbPath } from '../values.js';
+
+export interface RtdbPathBarProps {
+  /** Current absolute database path (`'/'` for root). */
+  path: string;
+  /** Fired with the parsed absolute path on crumb click or input submit. */
+  onNavigate: (path: string) => void;
+  /** Root crumb label — the database/instance identity (e.g. the sandbox
+   *  slug). Default `'/'`. */
+  rootLabel?: ReactNode;
+  /** Text shown before the input while editing (the non-editable URL part). */
+  inputPrefix?: string;
+  className?: string;
+}
+
+/**
+ * The editable path bar of the RTDB viewer — the interaction form of the
+ * Firebase console / firebase-tools-ui database URL bar (clean-room
+ * adaptation): in DISPLAY mode the path renders as clickable crumbs
+ * (root → … → current) plus an edit affordance; EDIT mode swaps in a text
+ * input seeded with the current path — Enter navigates, Escape or blur
+ * cancels. Pasted full URLs and missing leading slashes are tolerated
+ * (`parseRtdbPathInput`).
+ *
+ * Headless. Consumers style via:
+ * - `[data-pyric-ui="rtdb-path-bar"]` — the root (`data-rtdb-editing` when editing)
+ * - `[data-rtdb-crumb]` / `[data-rtdb-crumb-root]` / `[data-pyric-current]`
+ * - `[data-rtdb-crumb-separator]`
+ * - `[data-rtdb-path-edit]` — the edit button
+ * - `[data-rtdb-path-form]`, `[data-rtdb-path-prefix]`, `[data-rtdb-path-input]`
+ */
+export function RtdbPathBar({
+  path,
+  onNavigate,
+  rootLabel = '/',
+  inputPrefix,
+  className,
+}: RtdbPathBarProps) {
+  const normalized = normalizeRtdbPath(path);
+  const [editing, setEditing] = useState(false);
+  // UNCONTROLLED input, read at submit: the input mounts fresh per edit
+  // session (display mode unmounts it) seeded with the current path, so a
+  // cancelled draft never leaks into the next session.
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editing) inputRef.current?.select();
+  }, [editing]);
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    onNavigate(parseRtdbPathInput(inputRef.current?.value ?? ''));
+    setEditing(false);
+  };
+
+  const cancel = () => setEditing(false);
+
+  const crumbs = rtdbCrumbs(normalized);
+
+  return (
+    <nav
+      className={className}
+      data-pyric-ui="rtdb-path-bar"
+      data-rtdb-editing={editing ? '' : undefined}
+      aria-label="Database path"
+    >
+      {editing ? (
+        <form data-rtdb-path-form onSubmit={submit}>
+          {inputPrefix ? <span data-rtdb-path-prefix>{inputPrefix}</span> : null}
+          <input
+            ref={inputRef}
+            data-rtdb-path-input
+            aria-label="Database path"
+            autoFocus
+            defaultValue={normalized}
+            onBlur={cancel}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') cancel();
+            }}
+            spellCheck={false}
+          />
+        </form>
+      ) : (
+        <>
+          <ol data-rtdb-crumb-list>
+            <li data-rtdb-crumb-item>
+              <button
+                type="button"
+                data-rtdb-crumb
+                data-rtdb-crumb-root
+                data-pyric-current={crumbs.length === 0 ? '' : undefined}
+                aria-current={crumbs.length === 0 ? 'page' : undefined}
+                onClick={() => onNavigate('/')}
+              >
+                {rootLabel}
+              </button>
+            </li>
+            {crumbs.map((crumb, i) => {
+              const isCurrent = i === crumbs.length - 1;
+              return (
+                <li key={crumb.path} data-rtdb-crumb-item>
+                  <span aria-hidden data-rtdb-crumb-separator>
+                    /
+                  </span>
+                  <button
+                    type="button"
+                    data-rtdb-crumb
+                    data-pyric-current={isCurrent ? '' : undefined}
+                    aria-current={isCurrent ? 'page' : undefined}
+                    onClick={() => onNavigate(crumb.path)}
+                  >
+                    {crumb.label}
+                  </button>
+                </li>
+              );
+            })}
+          </ol>
+          <button
+            type="button"
+            data-rtdb-path-edit
+            aria-label="Edit path"
+            title="Edit path"
+            onClick={() => setEditing(true)}
+          >
+            <svg aria-hidden viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
+              <path d="M11.7 1.3a1 1 0 0 1 1.4 0l1.6 1.6a1 1 0 0 1 0 1.4l-8.5 8.5-3.4 1.1a.5.5 0 0 1-.63-.63l1.1-3.4 8.43-8.57ZM10.9 3.5l1.6 1.6 1.2-1.2-1.6-1.6-1.2 1.2Z" />
+            </svg>
+          </button>
+        </>
+      )}
+    </nav>
+  );
+}

package/src/rtdb/components/RtdbTree.tsx

@@ -0,0 +1,409 @@
+import { useRef, useState, type FormEvent, type ReactNode } from 'react';
+import type { RtdbApi } from '../rtdbApi.js';
+import type { RtdbTreeController } from '../hooks/useRtdbTree.js';
+import {
+  RTDB_EDITOR_TYPES,
+  coerceRtdbEditorValue,
+  formatRtdbEditorValue,
+  inferRtdbEditorType,
+  rtdbKeyInputError,
+  type RtdbEditorType,
+} from '../editor.js';
+import {
+  formatRtdbValueLabel,
+  hasRtdbChildren,
+  joinRtdbPath,
+  rtdbPathSegments,
+  rtdbValueKind,
+} from '../values.js';
+
+export interface RtdbTreeProps {
+  /** The live tree controller from `useRtdbTree`. */
+  tree: RtdbTreeController;
+  /** Mutation backend (admin lens in Studio). */
+  api: RtdbApi;
+  /** Key-click navigation: re-roots the viewer at the clicked node (wire to
+   *  the same path state as the path bar). */
+  onNavigate?: (path: string) => void;
+  /** Label for the view-root row when the root is `'/'` — the database /
+   *  instance identity. Default `'/'`. */
+  rootLabel?: ReactNode;
+  className?: string;
+}
+
+/**
+ * The RTDB data tree — the interaction form of the Firebase console /
+ * firebase-tools-ui database viewer (clean-room adaptation of the
+ * NodeContainer/NodeParent/NodeLeaf split):
+ *
+ * - parents render a caret (expand/collapse), leaves a `key: value` row;
+ * - keys navigate (re-root the view), carets only toggle;
+ * - hover/focus reveals per-node actions: `+` add child, `×` delete —
+ *   delete flips to an INLINE two-step confirm (no modal, C3);
+ * - leaf values are click-to-edit inline (type select: string / number /
+ *   boolean / JSON);
+ * - wide levels page at `tree.pageSize` with a "show more" row (the console's
+ *   form — see `reducers/tree.ts` for why paging over virtualization).
+ *
+ * Headless: consumers style `[data-pyric-ui="rtdb-tree"]` and the
+ * `data-rtdb-*` attributes (`node`, `row`, `caret`, `key`, `sep`, `value`,
+ * `actions`, `action-add`, `action-delete`, `confirm`, `editor`, `children`,
+ * `show-more`, `error`, `loading`). An empty root renders the console's
+ * classic form — `<root>: null` — not an instructional empty state.
+ */
+export function RtdbTree({ tree, api, onNavigate, rootLabel = '/', className }: RtdbTreeProps) {
+  const { state } = tree;
+  const rootSegments = rtdbPathSegments(state.path);
+  const rootKey: ReactNode =
+    rootSegments.length === 0 ? rootLabel : rootSegments[rootSegments.length - 1];
+
+  return (
+    <div className={className} data-pyric-ui="rtdb-tree">
+      {state.status === 'loading' ? (
+        <p data-rtdb-loading>Loading…</p>
+      ) : state.status === 'error' ? (
+        <p role="alert" data-rtdb-error>
+          {state.error}
+        </p>
+      ) : (
+        <Node
+          tree={tree}
+          api={api}
+          onNavigate={onNavigate}
+          path={state.path}
+          label={rootKey}
+          isViewRoot
+        />
+      )}
+    </div>
+  );
+}
+
+interface NodeProps {
+  tree: RtdbTreeController;
+  api: RtdbApi;
+  onNavigate?: (path: string) => void;
+  /** Absolute database path of this node. */
+  path: string;
+  /** The key text (or the root label node for the view root at `'/'`). */
+  label: ReactNode;
+  isViewRoot?: boolean;
+}
+
+function Node({ tree, api, onNavigate, path, label, isViewRoot }: NodeProps) {
+  const value = tree.valueAt(path);
+  const isParent = hasRtdbChildren(value);
+  const expanded = tree.isExpanded(path);
+  const update = tree.updateAt(path);
+
+  const [adding, setAdding] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const run = async (op: () => Promise<void>, done: () => void) => {
+    try {
+      await op();
+      setActionError(null);
+      done();
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const openAdd = () => {
+    setAdding(true);
+    setConfirming(false);
+    if (isParent && !expanded) tree.toggle(path);
+  };
+
+  const children = isParent && expanded ? tree.childrenAt(path) : null;
+
+  return (
+    <div
+      data-rtdb-node
+      data-rtdb-kind={isParent ? 'parent' : 'leaf'}
+      data-rtdb-view-root={isViewRoot ? '' : undefined}
+      data-rtdb-expanded={isParent && expanded ? '' : undefined}
+    >
+      <div
+        data-rtdb-row
+        data-pyric-update={update?.kind}
+        data-pyric-update-cycle={update?.cycle}
+      >
+        {isParent && !isViewRoot ? (
+          <button
+            type="button"
+            data-rtdb-caret
+            aria-expanded={expanded}
+            aria-label={expanded ? 'Collapse' : 'Expand'}
+            onClick={() => tree.toggle(path)}
+          >
+            <svg aria-hidden viewBox="0 0 8 8" width="8" height="8" fill="currentColor">
+              <path d="M1 0l6 4-6 4z" />
+            </svg>
+          </button>
+        ) : (
+          <span aria-hidden data-rtdb-caret-spacer />
+        )}
+
+        <button
+          type="button"
+          data-rtdb-key
+          aria-label="Key name"
+          onClick={() => onNavigate?.(path)}
+        >
+          {label}
+        </button>
+
+        {!isParent ? (
+          <>
+            <span aria-hidden data-rtdb-sep>
+              :
+            </span>
+            <button
+              type="button"
+              data-rtdb-value
+              data-rtdb-type={rtdbValueKind(value)}
+              title="Edit value"
+              onClick={() => {
+                setEditing(true);
+                setConfirming(false);
+              }}
+            >
+              {formatRtdbValueLabel(value)}
+            </button>
+          </>
+        ) : null}
+
+        <span data-rtdb-actions>
+          {confirming ? (
+            <span data-rtdb-confirm>
+              <span data-rtdb-confirm-label>Delete{isParent ? ' subtree' : ''}?</span>
+              <button
+                type="button"
+                data-rtdb-confirm-yes
+                onClick={() =>
+                  void run(
+                    () => api.remove(path),
+                    () => setConfirming(false),
+                  )
+                }
+              >
+                Delete
+              </button>
+              <button type="button" data-rtdb-confirm-no onClick={() => setConfirming(false)}>
+                Cancel
+              </button>
+            </span>
+          ) : (
+            <>
+              <button
+                type="button"
+                data-rtdb-action-add
+                aria-label={`Add child to ${pathLabel(path)}`}
+                title="Add child"
+                onClick={openAdd}
+              >
+                +
+              </button>
+              <button
+                type="button"
+                data-rtdb-action-delete
+                aria-label={`Delete ${pathLabel(path)}`}
+                title="Delete"
+                onClick={() => setConfirming(true)}
+              >
+                ×
+              </button>
+            </>
+          )}
+        </span>
+      </div>
+
+      {actionError ? (
+        <p role="alert" data-rtdb-error>
+          {actionError}
+        </p>
+      ) : null}
+
+      {editing ? (
+        <ValueEditor
+          initialType={inferRtdbEditorType(value)}
+          initialText={formatRtdbEditorValue(value, inferRtdbEditorType(value))}
+          submitLabel="Save"
+          onCancel={() => setEditing(false)}
+          onSubmit={(next) =>
+            run(
+              () => api.set(path, next),
+              () => setEditing(false),
+            )
+          }
+        />
+      ) : null}
+
+      {adding ? (
+        <ValueEditor
+          withKey
+          initialType="string"
+          initialText=""
+          submitLabel="Add"
+          onCancel={() => setAdding(false)}
+          onSubmit={(next, key) =>
+            run(
+              () => api.set(joinRtdbPath(path, key!), next),
+              () => setAdding(false),
+            )
+          }
+        />
+      ) : null}
+
+      {children ? (
+        <ul data-rtdb-children>
+          {children.entries.map(([key]) => (
+            <li key={key}>
+              <Node
+                tree={tree}
+                api={api}
+                onNavigate={onNavigate}
+                path={joinRtdbPath(path, key)}
+                label={key}
+              />
+            </li>
+          ))}
+          {children.hiddenCount > 0 ? (
+            <li data-rtdb-show-more-item>
+              <button type="button" data-rtdb-show-more onClick={() => tree.showMore(path)}>
+                Show more ({children.hiddenCount} hidden)
+              </button>
+            </li>
+          ) : null}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+/** Last segment for aria labels; `'/'` reads as "root". */
+function pathLabel(path: string): string {
+  const segments = rtdbPathSegments(path);
+  return segments.length === 0 ? 'root' : segments[segments.length - 1];
+}
+
+interface ValueEditorProps {
+  /** Add mode: include the child-key input. */
+  withKey?: boolean;
+  initialType: RtdbEditorType;
+  initialText: string;
+  submitLabel: string;
+  onSubmit: (value: unknown, key?: string) => Promise<void> | void;
+  onCancel: () => void;
+}
+
+/**
+ * Inline key/value editor row (add + edit flows). Escape cancels.
+ *
+ * The key + value fields are UNCONTROLLED and read at submit — validation
+ * happens on submit (errors render inline), so per-keystroke state buys
+ * nothing. Only the type select is controlled (it decides whether the value
+ * control is a text input or a true/false select).
+ */
+function ValueEditor({
+  withKey,
+  initialType,
+  initialText,
+  submitLabel,
+  onSubmit,
+  onCancel,
+}: ValueEditorProps) {
+  const keyRef = useRef<HTMLInputElement>(null);
+  const valueRef = useRef<HTMLInputElement | HTMLSelectElement>(null);
+  const [type, setType] = useState<RtdbEditorType>(initialType);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    const key = keyRef.current?.value ?? '';
+    if (withKey) {
+      const keyError = rtdbKeyInputError(key);
+      if (keyError) {
+        setError(keyError);
+        return;
+      }
+    }
+    const coerced = coerceRtdbEditorValue(type, valueRef.current?.value ?? '');
+    if (!coerced.ok) {
+      setError(coerced.error);
+      return;
+    }
+    setError(null);
+    void onSubmit(coerced.value, withKey ? key.trim() : undefined);
+  };
+
+  const onEscape = (e: { key: string }) => {
+    if (e.key === 'Escape') onCancel();
+  };
+
+  return (
+    <form data-rtdb-editor onSubmit={submit}>
+      {withKey ? (
+        <input
+          ref={keyRef}
+          data-rtdb-editor-key
+          aria-label="Child key"
+          placeholder="key"
+          autoFocus
+          onKeyDown={onEscape}
+          spellCheck={false}
+        />
+      ) : null}
+      <select
+        data-rtdb-editor-type
+        aria-label="Value type"
+        value={type}
+        onChange={(e) => setType(e.currentTarget.value as RtdbEditorType)}
+        onKeyDown={onEscape}
+      >
+        {RTDB_EDITOR_TYPES.map((t) => (
+          <option key={t} value={t}>
+            {t}
+          </option>
+        ))}
+      </select>
+      {type === 'boolean' ? (
+        <select
+          ref={valueRef as { current: HTMLSelectElement | null }}
+          data-rtdb-editor-value
+          aria-label="Value"
+          defaultValue={initialText.trim().toLowerCase() === 'true' ? 'true' : 'false'}
+          onKeyDown={onEscape}
+        >
+          <option value="true">true</option>
+          <option value="false">false</option>
+        </select>
+      ) : (
+        <input
+          ref={valueRef as { current: HTMLInputElement | null }}
+          data-rtdb-editor-value
+          aria-label="Value"
+          placeholder={type === 'json' ? '{ "key": "value" }' : 'value'}
+          autoFocus={!withKey}
+          defaultValue={initialText}
+          onKeyDown={onEscape}
+          spellCheck={false}
+        />
+      )}
+      <button type="submit" data-rtdb-editor-save>
+        {submitLabel}
+      </button>
+      <button type="button" data-rtdb-editor-cancel onClick={onCancel}>
+        Cancel
+      </button>
+      {error ? (
+        <span role="alert" data-rtdb-editor-error>
+          {error}
+        </span>
+      ) : null}
+    </form>
+  );
+}