@motion-proto/live-tokens 0.7.1 → 0.9.0

package/src/editor/ui/ProjectFontsSection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FontSource } from '../core/themes/themeTypes';
+  import type { FontFamily, FontSource } from '../core/themes/themeTypes';
   import { editorState, setFontSources, transaction } from '../core/store/editorStore';
   import { applyFontSources, applyFontStacks } from '../core/fonts/fontLoader';
   import {
@@ -10,34 +10,42 @@
     type ParsedFamily,
   } from '../core/fonts/fontParse';
   import UIPillButton from './UIPillButton.svelte';
-
-  type AddMode = 'closed' | 'url' | 'fontface';
-  interface Props { addMode?: AddMode }
-  let { addMode = $bindable('closed') }: Props = $props();
-
-  // URL paste — accepts a bare URL, a `<link>` tag, or an `@import url(...)` block.
-  let urlInput = $state('');
-  let urlError = $state('');
-  let urlDiscovering = $state(false);
+  import UISegmentedControl from './UISegmentedControl.svelte';
+  import UIInfoPopover from './UIInfoPopover.svelte';
+
+  type AddMode = 'closed' | 'name' | 'paste';
+  let addMode: AddMode = $state('closed');
+
+  // By-name (Google Fonts) — type a family name; we build the CSS2 URL.
+  let nameInput = $state('');
+  let nameError = $state('');
+  let nameDiscovering = $state(false);
+  let nameParsed: ParsedFamily[] | null = $state(null);
+
+  // Unified paste — accepts a bare URL, `<link>` tag, `@import url(...)`,
+  // or one or more `@font-face { ... }` rules. We sniff which on Detect.
+  let pasteInput = $state('');
+  let pasteError = $state('');
+  let pasteDiscovering = $state(false);
   let urlParsed: ParsedFamily[] | null = $state(null);
   let urlPickedNames = $state(new Set<string>());
   let urlNeedsManualFamilies = $state(false);
   let urlManualFamilies = $state('');
-
-  // @font-face paste
-  let fontFaceText = $state('');
   let fontFaceParsed: ParsedFamily[] = $state([]);
 
   function reset() {
     addMode = 'closed';
-    urlInput = '';
-    urlError = '';
-    urlDiscovering = false;
+    nameInput = '';
+    nameError = '';
+    nameDiscovering = false;
+    nameParsed = null;
+    pasteInput = '';
+    pasteError = '';
+    pasteDiscovering = false;
     urlParsed = null;
     urlPickedNames = new Set();
     urlNeedsManualFamilies = false;
     urlManualFamilies = '';
-    fontFaceText = '';
     fontFaceParsed = [];
   }
 
@@ -65,16 +73,31 @@
     applyFontStacks(fontStacksList, next);
   }
 
-  async function discoverUrl() {
-    urlError = '';
+  /** One paste field → sniff whether it's @font-face or a URL/embed and
+   *  populate the matching detected-families state. */
+  async function detectPaste() {
+    pasteError = '';
     urlParsed = null;
     urlNeedsManualFamilies = false;
-    const url = extractFontsUrl(urlInput);
+    fontFaceParsed = [];
+    const text = pasteInput.trim();
+    if (!text) {
+      pasteError = 'Paste a URL, embed, or @font-face rule';
+      return;
+    }
+    if (/@font-face/i.test(text)) {
+      fontFaceParsed = parseFontFaceText(text);
+      if (fontFaceParsed.length === 0) {
+        pasteError = "Couldn't parse @font-face rules";
+      }
+      return;
+    }
+    const url = extractFontsUrl(text);
     if (!url) {
-      urlError = "Couldn't find a fonts URL in that paste";
+      pasteError = "Couldn't find a fonts URL or @font-face rule in that paste";
       return;
     }
-    urlDiscovering = true;
+    pasteDiscovering = true;
     try {
       const found = await discoverFamiliesFromUrl(url);
       if (found && found.length > 0) {
@@ -84,21 +107,83 @@
         urlNeedsManualFamilies = true;
       }
     } catch (e) {
-      urlError = 'Discovery failed';
+      pasteError = 'Discovery failed';
       urlNeedsManualFamilies = true;
     }
-    urlDiscovering = false;
+    pasteDiscovering = false;
+  }
+
+  /** Build a Google Fonts CSS2 URL for a family name, requesting a wide
+   *  weight range with italics. Works for variable fonts and most static
+   *  multi-weight families. Single-weight static fonts (e.g. GFS Didot) will
+   *  reject the range axis with 400 Bad Request — Chrome then CORBs the
+   *  response. Such fonts must be persisted as `?family=Name&display=swap`. */
+  function googleUrlForName(name: string): string {
+    const family = name.trim().replace(/\s+/g, '+');
+    return `https://fonts.googleapis.com/css2?family=${family}:ital,wght@0,100..900;1,100..900&display=swap`;
   }
 
+  async function discoverByName() {
+    nameError = '';
+    nameParsed = null;
+    if (!nameInput.trim()) {
+      nameError = 'Enter a family name';
+      return;
+    }
+    nameDiscovering = true;
+    try {
+      const found = await discoverFamiliesFromUrl(googleUrlForName(nameInput));
+      if (found && found.length > 0) {
+        nameParsed = found;
+      } else {
+        nameError = `Couldn't find "${nameInput.trim()}" on Google Fonts`;
+      }
+    } catch {
+      nameError = `Couldn't reach Google Fonts for "${nameInput.trim()}"`;
+    }
+    nameDiscovering = false;
+  }
+
+  function addNameSource() {
+    if (!nameParsed || nameParsed.length === 0) return;
+    if (nameDuplicate) return;
+    // $state.snapshot() unwraps the reactive proxy. Without it the FontSource
+    // we hand to the store carries proxy arrays (weights, etc.) and the next
+    // `mutate()` call fails with DataCloneError inside structuredClone.
+    const families = $state.snapshot(nameParsed) as ParsedFamily[];
+    const source = buildSourceFromUrl(googleUrlForName(nameInput), families);
+    commitSources([...fontSourcesList, source]);
+    reset();
+  }
+
+  /** Case-insensitive family-name match against existing sources. Used to
+   *  block duplicate adds and surface a notice under the Add button. */
+  function findExistingFamilyByName(name: string): string | null {
+    const lower = name.trim().toLowerCase();
+    if (!lower) return null;
+    for (const src of fontSourcesList) {
+      for (const fam of src.families) {
+        if (fam.name.toLowerCase() === lower) return fam.name;
+      }
+    }
+    return null;
+  }
+
+  let nameDuplicate = $derived.by(() => {
+    if (!nameParsed || nameParsed.length === 0) return null;
+    return findExistingFamilyByName(nameParsed[0].name);
+  });
+
   function addUrlSource() {
-    const url = extractFontsUrl(urlInput);
+    const url = extractFontsUrl(pasteInput);
     if (!url) {
-      urlError = "Couldn't find a fonts URL in that paste";
+      pasteError = "Couldn't find a fonts URL in that paste";
       return;
     }
     let families: ParsedFamily[] = [];
     if (urlParsed) {
-      families = urlParsed.filter((f) => urlPickedNames.has(f.name));
+      // Snapshot to drop the $state proxy — see comment in addNameSource.
+      families = ($state.snapshot(urlParsed) as ParsedFamily[]).filter((f) => urlPickedNames.has(f.name));
     } else if (urlNeedsManualFamilies) {
       families = urlManualFamilies
         .split(',')
@@ -107,7 +192,7 @@
         .map((name) => ({ name }));
     }
     if (families.length === 0) {
-      urlError = 'Pick at least one family';
+      pasteError = 'Pick at least one family';
       return;
     }
     const source = buildSourceFromUrl(url, families);
@@ -115,18 +200,10 @@
     reset();
   }
 
-  function parseFontFaceTextInput() {
-    fontFaceParsed = parseFontFaceText(fontFaceText);
-  }
-
   function addFontFaceSource() {
-    if (!fontFaceText.trim()) return;
-    const families = fontFaceParsed.length > 0 ? fontFaceParsed : [];
-    if (families.length === 0) {
-      fontFaceParsed = parseFontFaceText(fontFaceText);
-      if (fontFaceParsed.length === 0) return;
-    }
-    const source = buildSourceFromFontFaceText(fontFaceText, families.length > 0 ? families : fontFaceParsed);
+    if (fontFaceParsed.length === 0) return;
+    const families = $state.snapshot(fontFaceParsed) as ParsedFamily[];
+    const source = buildSourceFromFontFaceText(pasteInput, families);
     commitSources([...fontSourcesList, source]);
     reset();
   }
@@ -147,127 +224,168 @@
     applyFontStacks(updatedStacks, next);
   }
 
+  /** Resolve a clickable target for the row. We prefer the human-readable
+   *  specimen/family page (Google Fonts, Adobe Fonts) over the raw CSS/font
+   *  file — those are rarely what a user wants to look at. */
+  function familyHref(source: FontSource, family: FontFamily): string | null {
+    if (source.kind === 'google') {
+      return `https://fonts.google.com/specimen/${family.name.trim().replace(/\s+/g, '+')}`;
+    }
+    if (source.kind === 'typekit') {
+      const slug = family.name.trim().toLowerCase().replace(/\s+/g, '-');
+      return `https://fonts.adobe.com/fonts/${slug}`;
+    }
+    if (source.kind === 'css-url') return source.url ?? null;
+    return null; // font-face: no public page exists
+  }
+
   function sourceKindLabel(source: FontSource): string {
     if (source.kind === 'google') return 'Google';
     if (source.kind === 'typekit') return 'Typekit';
     if (source.kind === 'font-face') return 'Local';
     return 'CSS URL';
   }
-
-  function stacksReferencing(familyId: string): string[] {
-    return fontStacksList
-      .filter((s) => s.slots.some((slot) => slot.kind === 'project' && slot.familyId === familyId))
-      .map((s) => s.variable);
-  }
-
-  let expanded = $state(new Set<string>());
-  function toggleExpanded(familyId: string) {
-    const next = new Set(expanded);
-    if (next.has(familyId)) next.delete(familyId); else next.add(familyId);
-    expanded = next;
-  }
 </script>
 
 <section class="project-fonts">
   <header class="pf-header">
-    <h3 class="group-title">Project Fonts</h3>
+    <div class="pf-title-row">
+      <h3 class="group-title">Project Fonts</h3>
+      <UIInfoPopover title="Installing fonts" ariaLabel="How to install fonts">
+        <p>Three ways to install a font, depending on where it lives:</p>
+        <p>
+          <strong>Google Fonts</strong> — use <em>By name</em> and type the family
+          (e.g. <code>Inter</code>). We fetch the CSS2 URL for you.
+        </p>
+        <p>
+          <strong>Hosted CDN (Adobe, Fontshare, custom)</strong> — use <em>Paste</em>
+          with a fonts URL, a <code>&lt;link&gt;</code> tag, or an <code>@import url(...)</code> line.
+        </p>
+        <p>
+          <strong>Local files</strong> — drop your <code>.woff2</code> files into
+          <code>src/system/styles/fonts/&lt;Family&gt;/</code>, then paste the matching
+          <code>@font-face &#123; ... &#125;</code> rules into <em>Paste</em>. The folder ships
+          with the production build, so <code>src/...</code> paths resolve at runtime.
+        </p>
+      </UIInfoPopover>
+    </div>
+    <UIPillButton
+      variant="primary"
+      icon="fa-plus"
+      onclick={() => { addMode = addMode === 'closed' ? 'name' : 'closed'; }}
+    >Add Font</UIPillButton>
   </header>
 
   {#if fontSourcesList.length === 0}
     <p class="pf-empty">No fonts loaded yet. Use the add button below.</p>
   {/if}
 
-  <div class="pf-sources">
+  <ul class="pf-family-list">
     {#each fontSourcesList as source (source.id)}
-      <div class="pf-source">
-        <div class="pf-source-head">
-          <span class="pf-kind-badge">{sourceKindLabel(source)}</span>
-          <span class="pf-source-label">{source.label ?? source.kind}</span>
-          {#if source.url}
-            <span class="pf-source-url" title={source.url}>{source.url}</span>
-          {/if}
-        </div>
-        <ul class="pf-family-list">
-          {#each source.families as fam (fam.id)}
-            {@const refs = stacksReferencing(fam.id)}
-            {@const isOpen = expanded.has(fam.id)}
-            {@const hasMultipleWeights = !!fam.weights && fam.weights.length > 1}
-            <li class="pf-family">
-              <div class="pf-family-row">
-                {#if hasMultipleWeights}
-                  <button
-                    type="button"
-                    class="pf-family-disclosure"
-                    class:open={isOpen}
-                    onclick={() => toggleExpanded(fam.id)}
-                    aria-label={isOpen ? 'Collapse weights' : 'Expand weights'}
-                    aria-expanded={isOpen}
-                  ><i class="fas fa-chevron-right" aria-hidden="true"></i></button>
-                {:else}
-                  <span class="pf-family-disclosure-placeholder" aria-hidden="true"></span>
-                {/if}
-                <span class="pf-family-preview" style="font-family: {fam.cssName}, sans-serif;">Ag</span>
-                <span class="pf-family-name">{fam.name}</span>
-                <button
-                  type="button"
-                  class="pf-family-remove"
-                  onclick={() => removeFamily(source.id, fam.id)}
-                  aria-label={`Remove ${fam.name}`}
-                  title="Remove family"
-                ><i class="fas fa-xmark" aria-hidden="true"></i></button>
-              </div>
-              {#if refs.length > 0}
-                <div class="pf-family-meta">
-                  <span class="pf-meta-label">Used by</span>
-                  <span class="pf-meta-value">
-                    {#each refs as r (r)}<span class="pf-meta-pill">{r}</span>{/each}
-                  </span>
-                </div>
-              {/if}
-              {#if isOpen && hasMultipleWeights && fam.weights}
-                <div class="pf-family-meta">
-                  <span class="pf-meta-label">Weights</span>
-                  <span class="pf-meta-value pf-meta-weights">{fam.weights.join(', ')}</span>
-                </div>
-              {/if}
-            </li>
-          {/each}
-        </ul>
-      </div>
+      {#each source.families as fam (fam.id)}
+        {@const href = familyHref(source, fam)}
+        <li class="pf-family">
+          <span class="pf-family-preview" style="font-family: {fam.cssName}, sans-serif;">Ag</span>
+          <span class="pf-family-name">{fam.name}</span>
+          <UIPillButton
+            variant="outline"
+            size="compact"
+            href={href ?? undefined}
+            target={href ? '_blank' : undefined}
+            disabled={!href}
+            title={href ? `Open ${fam.name} on ${sourceKindLabel(source)}` : 'No public page for local fonts'}
+          >{sourceKindLabel(source)}</UIPillButton>
+          <button
+            type="button"
+            class="pf-family-remove"
+            onclick={() => removeFamily(source.id, fam.id)}
+            aria-label={`Remove ${fam.name}`}
+            title="Remove family"
+          ><i class="fas fa-xmark" aria-hidden="true"></i></button>
+        </li>
+      {/each}
     {/each}
-  </div>
+  </ul>
 
-  {#if addMode === 'closed'}
-    <div class="pf-add-toggle-row">
-      <UIPillButton icon="fa-plus" onclick={() => (addMode = 'url')}>Add Font</UIPillButton>
-    </div>
-  {:else}
+  {#if addMode !== 'closed'}
     <div class="pf-add-panel">
-      <div class="pf-add-tabs">
-        <button type="button" class:active={addMode === 'url'} onclick={() => (addMode = 'url')}>Paste URL or embed</button>
-        <button type="button" class:active={addMode === 'fontface'} onclick={() => (addMode = 'fontface')}>@font-face</button>
+      <div class="pf-add-head">
+        <span class="pf-add-eyebrow">Browse</span>
+        <div class="pf-browse-row">
+          <UIPillButton variant="outline" href="https://fonts.google.com/" target="_blank" icon="fa-arrow-up-right-from-square">
+            Google Fonts
+          </UIPillButton>
+          <UIPillButton variant="outline" href="https://fonts.adobe.com/" target="_blank" icon="fa-arrow-up-right-from-square">
+            Adobe Fonts
+          </UIPillButton>
+          <UIPillButton variant="outline" href="https://www.fontshare.com/" target="_blank" icon="fa-arrow-up-right-from-square">
+            Fontshare
+          </UIPillButton>
+        </div>
         <button type="button" class="pf-add-close" onclick={reset} aria-label="Cancel">×</button>
       </div>
 
-      {#if addMode === 'url'}
-        <p class="pf-hint">
-          Pick fonts on
-          <a href="https://fonts.google.com/selection/embed" target="_blank" rel="noopener noreferrer">Google Fonts <i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i></a>,
-          copy either the <code>&lt;link&gt;</code> tag or the <code>@import</code> block, and paste it below. Any CSS URL (Typekit, custom host) also works.
-        </p>
+      <div class="pf-add-divider"><span>or add directly</span></div>
+
+      <UISegmentedControl
+        value={addMode}
+        options={[
+          { value: 'name', label: 'By name (Google)' },
+          { value: 'paste', label: 'Paste URL or @font-face' },
+        ] as const}
+        ariaLabel="Add font by"
+        onchange={(v) => (addMode = v)}
+      />
+
+      {#if addMode === 'name'}
+        <div class="pf-row">
+          <input
+            type="text"
+            class="ui-form-input pf-name-input"
+            placeholder="e.g. Inter, Fraunces, Space Mono"
+            bind:value={nameInput}
+            onkeydown={(e) => { if (e.key === 'Enter' && !nameParsed) discoverByName(); }}
+          />
+          {#if nameParsed}
+            <UIPillButton variant="primary" onclick={addNameSource} disabled={!!nameDuplicate}>Add</UIPillButton>
+          {:else}
+            <UIPillButton variant="secondary" onclick={discoverByName} disabled={!nameInput.trim() || nameDiscovering}>
+              {nameDiscovering ? 'Checking…' : 'Find'}
+            </UIPillButton>
+          {/if}
+        </div>
+        {#if nameError}<div class="pf-error">{nameError}</div>{/if}
+        {#if nameParsed}
+          {#if nameDuplicate}
+            <div class="pf-notice">
+              <strong>{nameDuplicate}</strong> is already in your project fonts.
+            </div>
+          {:else}
+            <div class="pf-detected">
+              Found <strong>{nameParsed[0].name}</strong>
+              {#if nameParsed[0].weights && nameParsed[0].weights.length > 0}
+                <span class="pf-check-meta">({nameParsed[0].weights.length} weights)</span>
+              {/if}
+            </div>
+          {/if}
+        {/if}
+      {:else if addMode === 'paste'}
         <textarea
           class="ui-form-input pf-textarea pf-url-input"
-          placeholder={'<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">\n\nor\n\n@import url(\'https://fonts.googleapis.com/css2?...\');\n\nor just the URL'}
-          rows="4"
-          bind:value={urlInput}
+          placeholder={'A fonts URL, <link> tag, or @import url(...)\n\nor\n\none or more @font-face { ... } rules'}
+          rows="5"
+          bind:value={pasteInput}
         ></textarea>
         <div class="pf-row">
-          <UIPillButton variant="secondary" onclick={discoverUrl} disabled={!urlInput.trim() || urlDiscovering}>
-            {urlDiscovering ? 'Checking…' : 'Detect families'}
+          <UIPillButton variant="secondary" onclick={detectPaste} disabled={!pasteInput.trim() || pasteDiscovering}>
+            {pasteDiscovering ? 'Checking…' : 'Detect'}
           </UIPillButton>
         </div>
-        {#if urlError}<div class="pf-error">{urlError}</div>{/if}
-        {#if urlParsed}
+        {#if pasteError}<div class="pf-error">{pasteError}</div>{/if}
+        {#if fontFaceParsed.length > 0}
+          <div class="pf-detected">Detected @font-face: {fontFaceParsed.map((f) => f.name).join(', ')}</div>
+          <UIPillButton variant="primary" onclick={addFontFaceSource}>Add</UIPillButton>
+        {:else if urlParsed}
           <div class="pf-detected">Detected families — pick which to add:</div>
           <ul class="pf-checklist">
             {#each urlParsed as f (f.name)}
@@ -302,18 +420,6 @@
           />
           <UIPillButton variant="primary" onclick={addUrlSource} disabled={!urlManualFamilies.trim()}>Add</UIPillButton>
         {/if}
-      {:else if addMode === 'fontface'}
-        <textarea
-          class="ui-form-input pf-textarea"
-          placeholder={'Paste one or more @font-face { ... } rules'}
-          rows="6"
-          bind:value={fontFaceText}
-          oninput={parseFontFaceTextInput}
-        ></textarea>
-        {#if fontFaceParsed.length > 0}
-          <div class="pf-detected">Detected: {fontFaceParsed.map((f) => f.name).join(', ')}</div>
-        {/if}
-        <UIPillButton variant="primary" onclick={addFontFaceSource} disabled={fontFaceParsed.length === 0}>Add</UIPillButton>
       {/if}
     </div>
   {/if}
@@ -323,8 +429,7 @@
   .project-fonts {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-8);
-    max-width: 56rem;
+    gap: var(--ui-space-12);
   }
 
   .pf-header {
@@ -334,11 +439,17 @@
     justify-content: space-between;
   }
 
+  .pf-title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-4);
+  }
+
   .group-title {
     margin: 0;
-    font-size: var(--ui-font-size-lg);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-xl);
+    font-weight: var(--ui-font-weight-bold);
+    color: var(--ui-text-primary);
   }
 
   .pf-empty {
@@ -348,84 +459,32 @@
     font-size: var(--ui-font-size-sm);
   }
 
-  .pf-sources {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-8);
-  }
-
-  .pf-source {
-    border: 1px solid var(--ui-border-low);
-    border-radius: var(--ui-radius-md);
-    display: flex;
-    flex-direction: column;
-  }
-
-  .pf-source-head {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-8);
-    padding: var(--ui-space-8) var(--ui-space-12);
-    border-bottom: 1px solid var(--ui-border-low);
-    background: var(--ui-surface-subtle, rgba(255,255,255,0.02));
-    border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
-  }
-
-  .pf-kind-badge {
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-tertiary);
-    border: 1px solid var(--ui-border-low);
-    padding: 0 var(--ui-space-4);
-    border-radius: var(--ui-radius-sm);
-    font-family: var(--ui-font-mono);
-  }
-
-  .pf-source-label {
-    font-size: var(--ui-font-size-lg);
-    color: var(--ui-text-primary);
-    font-weight: var(--ui-font-weight-medium);
-  }
-
-  .pf-source-url {
-    font-family: var(--ui-font-mono);
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
-  }
-
   .pf-family-list {
     list-style: none;
     margin: 0;
-    padding: var(--ui-space-8);
+    padding: 0;
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: var(--ui-space-2) var(--ui-space-8);
+    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
+    gap: var(--ui-space-6);
+    align-items: start;
   }
 
   .pf-family {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .pf-family-row {
     display: grid;
-    grid-template-columns: 24px 1.75rem 1fr 24px;
+    grid-template-columns: 1.75rem 1fr auto 24px;
     align-items: center;
-    gap: var(--ui-space-6);
-    padding: 0 var(--ui-space-4);
-    border-radius: var(--ui-radius-sm);
-    min-height: 28px;
-  }
-  .pf-family-row:hover {
+    gap: var(--ui-space-8);
+    min-width: 0;
+    padding: var(--ui-space-4) var(--ui-space-8);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-md);
     background: var(--ui-surface-subtle, rgba(255,255,255,0.02));
+    min-height: 36px;
+  }
+  .pf-family:hover {
+    background: var(--ui-surface-hover, rgba(255,255,255,0.04));
   }
 
-  .pf-family-disclosure,
   .pf-family-remove {
     display: inline-flex;
     align-items: center;
@@ -441,20 +500,10 @@
     font-size: var(--ui-font-size-sm);
     line-height: 1;
   }
-  .pf-family-disclosure:hover,
   .pf-family-remove:hover {
     color: var(--ui-text-primary);
     background: var(--ui-surface-hover, rgba(255,255,255,0.06));
   }
-  .pf-family-disclosure i {
-    transition: transform var(--ui-transition-fast);
-  }
-  .pf-family-disclosure.open i { transform: rotate(90deg); }
-  .pf-family-disclosure-placeholder {
-    width: 24px;
-    height: 24px;
-    display: inline-block;
-  }
 
   .pf-family-preview {
     font-size: var(--ui-font-size-md);
@@ -473,68 +522,70 @@
     white-space: nowrap;
   }
 
-  .pf-family-meta {
+  .pf-add-panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-10);
+    padding: var(--ui-space-12);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: var(--ui-radius-md);
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .pf-add-head {
     display: grid;
-    grid-template-columns: 4rem 1fr;
+    grid-template-columns: auto 1fr auto;
     align-items: center;
-    gap: var(--ui-space-6);
-    padding: var(--ui-space-2) var(--ui-space-4) var(--ui-space-2) calc(24px + var(--ui-space-6) + 1.75rem + var(--ui-space-6));
-    font-size: var(--ui-font-size-xs);
-    font-family: var(--ui-font-mono);
+    gap: var(--ui-space-12);
   }
-  .pf-meta-label { color: var(--ui-text-muted); }
-  .pf-meta-value {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ui-space-2);
+  .pf-add-eyebrow {
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
-    min-width: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
   }
-  .pf-meta-pill {
-    padding: 0 var(--ui-space-4);
-    border-radius: var(--ui-radius-sm);
-    background: var(--ui-surface-hover, rgba(255,255,255,0.06));
-    color: var(--ui-text-secondary, var(--ui-text-primary));
-  }
-  .pf-meta-weights { word-break: break-word; }
-
-  .pf-add-toggle-row {
+  .pf-browse-row {
     display: flex;
-  }
-
-  .pf-add-panel {
-    display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: var(--ui-space-8);
-    padding: var(--ui-space-8);
-    border: 1px solid var(--ui-border-low);
-    border-radius: var(--ui-radius-sm);
-  }
-
-  .pf-add-tabs {
-    display: flex;
-    gap: var(--ui-space-4);
   }
-  .pf-add-tabs button {
+  .pf-add-close {
     background: none;
-    border: 1px solid var(--ui-border-low);
-    color: var(--ui-text-secondary);
-    font-size: var(--ui-font-size-sm);
-    padding: var(--ui-space-4) var(--ui-space-8);
+    border: none;
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-lg);
+    line-height: 1;
+    padding: var(--ui-space-2) var(--ui-space-6);
     border-radius: var(--ui-radius-sm);
     cursor: pointer;
+    justify-self: end;
   }
-  .pf-add-tabs button:hover {
+  .pf-add-close:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-high);
+    background: var(--ui-surface-hover, rgba(255,255,255,0.06));
   }
-  .pf-add-tabs button.active {
-    color: var(--ui-text-primary);
-    background: var(--ui-surface-high);
-    border-color: var(--ui-border-higher);
+
+  .pf-add-divider {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    color: var(--ui-text-tertiary);
+    font-size: var(--ui-font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
   }
-  .pf-add-tabs .pf-add-close {
-    margin-left: auto;
+  .pf-add-divider::before,
+  .pf-add-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--ui-border-low);
+  }
+
+  .pf-name-input {
+    flex: 1;
+    min-width: 0;
   }
 
   .pf-row {
@@ -547,6 +598,12 @@
 
   .pf-detected { color: var(--ui-text-secondary); font-size: var(--ui-font-size-sm); }
 
+  .pf-notice {
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+  }
+  .pf-notice strong { color: var(--ui-text-primary); }
+
   .pf-checklist {
     list-style: none;
     margin: 0;
@@ -578,26 +635,4 @@
     overflow-x: auto;
   }
 
-  .pf-hint {
-    margin: 0;
-    color: var(--ui-text-tertiary);
-    font-size: var(--ui-font-size-sm);
-    line-height: 1.4;
-  }
-  .pf-hint a {
-    color: var(--ui-text-primary);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-    text-decoration-thickness: 1px;
-    white-space: nowrap;
-  }
-  .pf-hint a:hover { text-decoration-thickness: 2px; }
-  .pf-hint a i { font-size: 0.75em; margin-left: var(--ui-space-2); }
-  .pf-hint code {
-    font-family: var(--ui-font-mono);
-    font-size: 0.92em;
-    padding: 0 var(--ui-space-2);
-    background: var(--ui-surface-hover, rgba(255,255,255,0.06));
-    border-radius: var(--ui-radius-sm);
-  }
 </style>