@tinytars/frame 0.1.0

package/LeafCard.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import LeafActionMenu from "./LeafActionMenu.svelte";
+  import type { LeafMenuItem } from "./menu-items";
+
+  // The one shared leaf-card shell: a soft gray rounded card with an optional
+  // full-width header row (title left, LeafActionMenu right). Generalizes the `.report-group` +
+  // `.ct-topic-row`/`.row-actions` pattern Treatment/Study/FutureTreatment each hand-rolled
+  // identically.
+  // The two-column body grid (`.rg-grid`/`.rg-col`) moved in here too, as `:global()`, once
+  // a 5th/6th caller (Markers, Chat) was about to copy it a 5th/6th time. Callers still pass their
+  // own body as `children` and layer their own additive modifier classes on top (e.g. `.rg-dx`,
+  // `.ft-row`).
+  interface Props {
+    id?: string;
+    title?: Snippet;
+    items?: LeafMenuItem[];
+    pinned?: boolean;
+    onTogglePin?: () => void;
+    dashed?: boolean;
+    borderColor?: string;
+    children: Snippet;
+  }
+  let { id, title, items = [], pinned = false, onTogglePin, dashed = false, borderColor, children }: Props = $props();
+</script>
+
+<div class="leaf-card" class:dashed {id} style:border-color={borderColor}>
+  {#if title || items.length || onTogglePin}
+    <div class="leaf-card-head">
+      <span class="persona-head-left">{#if title}{@render title()}{/if}</span>
+      {#if items.length || onTogglePin}
+        <div class="row-actions">
+          <LeafActionMenu {items} {pinned} {onTogglePin} />
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {@render children()}
+</div>
+
+<style>
+  .leaf-card { border: 1px solid var(--border); border-radius: 16px; background: var(--bg); padding: 0.5rem; margin-bottom: 0.6rem; }
+  .leaf-card.dashed { border-style: dashed; }
+  .leaf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.3rem 0.45rem; }
+  .row-actions { display: flex; align-items: center; gap: 0.35rem; flex: none; }
+  :global(:root) {
+    --rg-side-w: 80%;
+    --rg-side-w-narrow: 92%;
+  }
+  :global(.rg-grid) { display: flex; flex-direction: column; row-gap: 0.5rem; }
+  :global(.rg-grid) > :global(*:first-child) {
+    align-self: flex-end;
+    max-width: var(--rg-side-w);
+    text-align: right;
+  }
+  /* :not(:first-child) makes this and the rule above mutually exclusive for a lone child
+     (the old .single case) — no separate override needed. */
+  :global(.rg-grid) > :global(*:last-child:not(:first-child)) {
+    align-self: flex-start;
+    max-width: var(--rg-side-w);
+    text-align: left;
+  }
+  @media (max-width: 480px) {
+    :global(:root) { --rg-side-w: var(--rg-side-w-narrow); }
+  }
+  :global(.rg-col) { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
+  :global(.leaf-side) {
+    align-self: flex-start;
+    max-width: var(--rg-side-w);
+    text-align: left;
+  }
+</style>

package/LoginScreen.svelte

@@ -0,0 +1,124 @@
+<script module lang="ts">
+  /**
+   * The lock screen's own slice of a recovery controller: which ladder rung `codeInput` looks like,
+   * and the one action (`recover`) the screen triggers. The full controller (issuing codes, the org
+   * envelope, the Account modal's blocks) is caller-owned — this only needs enough to render the form.
+   */
+  export interface LoginRecovery {
+    recoverMode: boolean;
+    codeInput: string;
+    newPassword: string;
+    readonly kind: "code" | "grant";
+    recover(): Promise<void>;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    productName,
+    resuming = false,
+    resumingLabel = "Restoring your session…",
+    email = $bindable(""),
+    password = $bindable(""),
+    signupMode = $bindable(false),
+    error = $bindable(null),
+    unlocking = false,
+    googleError = null,
+    recovery,
+    onLogin,
+    onSignup,
+    onGoogle,
+    signInSubheading = "Sign in to your encrypted record.",
+    signUpSubheading = "Create your account.",
+    recoveryCodeSubheading = "Enter your recovery code — your own, or the one-time code your provider read you — and choose a new password.",
+    recoveryNoteCode = "Your passkey and Google sign-in, if you use them, keep working — this replaces the password only.",
+    recoveryNoteGrant = "Ask your provider to read you a code — it works once and expires in an hour. Your old password, passkey and Google sign-in will all stop working.",
+  }: {
+    productName: string;
+    resuming?: boolean;
+    resumingLabel?: string;
+    email?: string;
+    password?: string;
+    signupMode?: boolean;
+    error?: string | null;
+    unlocking?: boolean;
+    googleError?: string | null;
+    recovery: LoginRecovery;
+    onLogin: (method: "password" | "passkey") => void;
+    onSignup: (method: "password" | "passkey") => void;
+    onGoogle: () => void;
+    signInSubheading?: string;
+    signUpSubheading?: string;
+    recoveryCodeSubheading?: string;
+    recoveryNoteCode?: string;
+    recoveryNoteGrant?: string;
+  } = $props();
+</script>
+
+{#if resuming}
+  <main class="lock">
+    <h1>{productName}</h1>
+    <p class="sub">{resumingLabel}</p>
+  </main>
+{:else}
+  <main class="lock">
+    <h1>{productName}</h1>
+    {#if recovery.recoverMode}
+      <p class="sub">{recoveryCodeSubheading}</p>
+      <form onsubmit={(e) => { e.preventDefault(); recovery.recover(); }}>
+        <input type="email" autocomplete="username" placeholder="email" aria-label="Email" bind:value={email} />
+        <input type="text" placeholder="recovery code" aria-label="Recovery code" bind:value={recovery.codeInput} />
+        <input type="password" autocomplete="new-password" placeholder="new password" aria-label="New password" bind:value={recovery.newPassword} />
+        <button type="submit" disabled={unlocking || !email || !recovery.codeInput.trim() || !recovery.newPassword}>{unlocking ? "…" : "Recover"}</button>
+      </form>
+      {#if recovery.kind === "code"}
+        <p class="lock-note">{recoveryNoteCode}</p>
+      {:else}
+        <p class="lock-note">{recoveryNoteGrant}</p>
+      {/if}
+      <div class="lock-alt">
+        <button class="linkish" onclick={() => { recovery.recoverMode = false; error = null; }}>← Back to sign in</button>
+      </div>
+    {:else}
+      <p class="sub">{signupMode ? signUpSubheading : signInSubheading}</p>
+      <form onsubmit={(e) => { e.preventDefault(); signupMode ? onSignup("password") : onLogin("password"); }}>
+        <!-- svelte-ignore a11y_autofocus -->
+        <input type="email" autocomplete="username" placeholder="email" aria-label="Email" bind:value={email} autofocus />
+        <input type="password" autocomplete={signupMode ? "new-password" : "current-password"} placeholder="password" aria-label="Password" bind:value={password} />
+        <button type="submit" disabled={unlocking || !email || !password}>
+          {unlocking ? "…" : signupMode ? "Create account" : "Sign in"}
+        </button>
+      </form>
+      <button class="google-btn" onclick={onGoogle} disabled={unlocking}>Continue with Google</button>
+      <div class="lock-alt">
+        <button class="linkish" onclick={() => (signupMode ? onSignup("passkey") : onLogin("passkey"))} disabled={unlocking || !email}>
+          {signupMode ? "Create with a passkey" : "Use a passkey"}
+        </button>
+        <button class="linkish" onclick={() => { signupMode = !signupMode; error = null; }}>
+          {signupMode ? "Have an account? Sign in" : "New here? Create an account"}
+        </button>
+        {#if !signupMode}<button class="linkish" onclick={() => { recovery.recoverMode = true; error = null; }}>Forgot password?</button>{/if}
+      </div>
+    {/if}
+    {#if error}<p class="err">{error}</p>{/if}
+    {#if googleError}<p class="err">{googleError}</p>{/if}
+  </main>
+{/if}
+
+<style>
+  .lock { max-width: 360px; margin: 12rem auto; text-align: center; }
+  .lock h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
+  .lock .sub { color: var(--muted); margin: 0 0 2rem; }
+  .lock form { display: flex; flex-direction: column; gap: 0.5rem; }
+  .lock input { flex: 1; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
+  .lock form button { padding: 0.6rem 1rem; border: 1px solid var(--accent); background: var(--accent); color: white; border-radius: 6px; cursor: pointer; }
+  .lock button:disabled { opacity: 0.5; cursor: default; }
+  .google-btn { margin-top: 0.75rem; width: 100%; padding: 0.6rem 1rem; border: 1px solid var(--border, #d0d5dd); background: white; color: #3c4043; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 500; }
+  .google-btn:hover:not(:disabled) { background: #f8f9fa; }
+  .google-btn:disabled { opacity: 0.5; cursor: default; }
+  .lock-alt { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
+  .lock-note { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--muted, #667); max-width: 22rem; text-align: center; }
+  .linkish { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 0.85rem; padding: 0.2rem; }
+  .linkish:disabled { color: var(--muted); cursor: default; }
+  .err { color: var(--alert); margin-top: 1rem; }
+</style>

package/Onboarding.svelte

@@ -0,0 +1,122 @@
+<script module lang="ts">
+  export interface OnboardingNumberField {
+    key: string;
+    kind: "number";
+    label: string;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    invalidMessage?: string;
+  }
+  export interface OnboardingSelectField {
+    key: string;
+    kind: "select";
+    label: string;
+    options: { value: string; label: string }[];
+  }
+  export type OnboardingField = OnboardingNumberField | OnboardingSelectField;
+</script>
+
+<script lang="ts">
+  // First-run screen for a signed-in account with zero records. The field catalog
+  // (what to ask, and each field's own validity rule) is entirely caller-supplied — a number field
+  // is optional and omitted from the create payload when left blank or when the user skips; a
+  // select field always has a value and is always included. Everything the caller collects is
+  // stored wherever it wants (LexiTar puts it in the encrypted vault, never the server).
+  let {
+    productName,
+    subheading = "Welcome. A couple of details help tailor your results — or skip and add them later.",
+    fields, defaults, onCreate, onSignOut,
+    continueLabel = "Continue", busyLabel = "Setting up…", skipLabel = "Skip for now", signOutLabel = "Sign out",
+  }: {
+    productName: string;
+    subheading?: string;
+    fields: OnboardingField[];
+    defaults: Record<string, unknown>;
+    onCreate: (info: Record<string, unknown>) => Promise<void>;
+    onSignOut: () => void;
+    continueLabel?: string;
+    busyLabel?: string;
+    skipLabel?: string;
+    signOutLabel?: string;
+  } = $props();
+
+  let values = $state<Record<string, any>>({ ...defaults });
+  let busy = $state(false);
+  let error = $state<string | null>(null);
+
+  async function create(withProfile: boolean) {
+    const payload: Record<string, unknown> = {};
+    for (const f of fields) {
+      if (f.kind === "number") {
+        if (!withProfile) continue; // optional fields are omitted entirely on Skip
+        const raw = values[f.key] as number | null | undefined;
+        if (raw == null) continue; // left blank — omit rather than send an invalid value
+        if (!Number.isInteger(raw) || (f.min != null && raw < f.min) || (f.max != null && raw > f.max)) {
+          error = f.invalidMessage ?? `Enter a valid ${f.label.toLowerCase()}.`;
+          return;
+        }
+        payload[f.key] = raw;
+      } else {
+        payload[f.key] = values[f.key];
+      }
+    }
+    busy = true; error = null;
+    try {
+      await onCreate(payload);
+      // On success the caller re-renders away from this screen.
+    } catch (err) {
+      error = (err as Error).message ?? "Could not create the record.";
+      busy = false;
+    }
+  }
+</script>
+
+<main class="onboard">
+  <h1>{productName}</h1>
+  <p class="sub">{subheading}</p>
+  <form onsubmit={(e) => { e.preventDefault(); create(true); }}>
+    <div class="row">
+      {#each fields as f (f.key)}
+        <label>{f.label}
+          {#if f.kind === "number"}
+            <input type="number" inputmode="numeric" min={f.min} max={f.max} placeholder={f.placeholder} bind:value={values[f.key]} />
+          {:else}
+            <select bind:value={values[f.key]}>
+              {#each f.options as opt (opt.value)}
+                <option value={opt.value}>{opt.label}</option>
+              {/each}
+            </select>
+          {/if}
+        </label>
+      {/each}
+    </div>
+    <button type="submit" class="primary" disabled={busy}>{busy ? busyLabel : continueLabel}</button>
+    {#if error}<p class="err">{error}</p>{/if}
+  </form>
+  <button class="link" onclick={() => create(false)} disabled={busy}>{skipLabel}</button>
+  <button class="link" onclick={onSignOut}>{signOutLabel}</button>
+</main>
+
+<style>
+  .onboard { max-width: 380px; margin: 12vh auto 0; text-align: center; padding: 0 1rem; }
+  .sub { color: var(--muted, #667); margin: 0.25rem 0 1.5rem; }
+  form { display: flex; flex-direction: column; gap: 0.75rem; text-align: left; }
+  label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted, #667); }
+  input, select {
+    padding: 0.5rem; font-size: 1rem; border: 1px solid var(--border, #ccc);
+    border-radius: 6px; background: var(--bg, #fff); color: var(--fg, #111);
+  }
+  .row { display: flex; gap: 0.75rem; }
+  .row label { flex: 1; }
+  .primary {
+    margin-top: 0.5rem; padding: 0.6rem; font-size: 1rem; font-weight: 600;
+    border: none; border-radius: 6px; background: var(--accent, #2b6aa8); color: var(--surface, #fff); cursor: pointer;
+  }
+  .primary:disabled { opacity: 0.6; cursor: default; }
+  .err { color: var(--alert); font-size: 0.85rem; margin: 0.25rem 0 0; }
+  .link {
+    margin-top: 1.5rem; background: none; border: none; color: var(--muted, #667);
+    text-decoration: underline; cursor: pointer; font-size: 0.85rem;
+  }
+</style>

package/VisibilitySettings.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+  export interface VisibilityFeature {
+    key: string;
+    label: string;
+  }
+</script>
+
+<script lang="ts">
+  // Generic panel to configure what a subject's own session sees. Each feature toggles
+  // between subject-visible and viewer-only; the catalog, current-visibility check, and save are
+  // all injected, so this component knows nothing about clients, patients, or providers.
+  let {
+    subjectLabel, features, isVisible, onSave, viewerLabel = "You",
+  }: {
+    subjectLabel: string;
+    features: VisibilityFeature[];
+    isVisible: (key: string) => boolean;
+    onSave: (key: string, visible: boolean) => Promise<void>;
+    viewerLabel?: string;
+  } = $props();
+
+  let busyKey = $state<string | null>(null);
+  let error = $state<string | null>(null);
+
+  async function set(key: string, visible: boolean) {
+    error = null;
+    busyKey = key;
+    try {
+      await onSave(key, visible);
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      busyKey = null;
+    }
+  }
+</script>
+
+<div class="vis">
+  <p class="lead">Choose what <strong>{subjectLabel}</strong> sees when signed in as themselves. {viewerLabel} always see everything.</p>
+  {#if error}<p class="vis-error">{error}</p>{/if}
+
+  <ul class="vis-list">
+    {#each features as f (f.key)}
+      <li>
+        <label>
+          <input type="checkbox" checked={isVisible(f.key)} disabled={busyKey === f.key} onchange={(e) => set(f.key, e.currentTarget.checked)} />
+          <span>{f.label}</span>
+        </label>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  .vis { max-width: 34rem; }
+  .lead { color: var(--muted); line-height: 1.5; margin: 0 0 1rem; }
+  .vis-list { list-style: none; margin: 0; padding: 0; }
+  .vis-list li { padding: 0.15rem 0; }
+  .vis-list label { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; }
+  .vis-list input { width: 1.05rem; height: 1.05rem; }
+  .vis-error { color: var(--alert); font-size: 0.85rem; }
+</style>