lostcoords-ui 0.4.1 → 0.6.0

data/app/assets/tailwind/lostcoords/ui/emoji-picker.css

@@ -1,49 +1,47 @@
 @layer components {
-  .emoji-picker {
+  .lc-emoji-picker {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     align-items: center;
 
-    /* Sit above the mobile app nav (z-100 + 25) so the sheet covers it. */
-    --emoji-sheet-z: calc(100 + 30);
-    --emoji-cell: 2.25rem;
+    --lc-emoji-cell: 2.25rem;
   }
 
   /* ---- Trigger + quick choices -------------------------------------- */
-  .emoji-picker__choice,
-  .emoji-picker__trigger {
+  .lc-emoji-picker__choice,
+  .lc-emoji-picker__trigger {
     display: inline-grid;
     place-items: center;
     inline-size: 44px;
     block-size: 44px;
     border-radius: var(--radius-2xl, 1rem);
-    border: 1px solid var(--hairline);
-    background: var(--paper);
-    color: var(--ink);
+    border: 1px solid var(--border);
+    background: var(--background);
+    color: var(--foreground);
     cursor: pointer;
     font-size: var(--text-xl, 1.25rem);
     line-height: 1;
     transition:
       border-color 0.15s,
       background 0.15s,
-      transform 0.15s var(--ease-out),
+      transform 0.15s var(--lc-ease-out),
       box-shadow 0.15s;
 
-    &:hover { border-color: var(--ink-3); }
+    &:hover { border-color: var(--muted-foreground); }
 
     &[aria-current="true"] {
-      border-color: var(--sky);
-      background: var(--sky-soft);
+      border-color: var(--primary);
+      background: color-mix(in oklab, var(--primary) 12%, var(--background));
     }
   }
 
-  .emoji-picker__trigger {
-    color: var(--ink-3);
+  .lc-emoji-picker__trigger {
+    color: var(--muted-foreground);
     font-weight: var(--font-weight-normal, 400);
   }
 
-  .emoji-picker__more {
+  .lc-emoji-picker__more {
     position: relative;
     display: inline-flex;
   }
@@ -58,11 +56,11 @@
      dims everything beneath it — including the app nav. The allow-discrete
      transitions keep it in the top layer while it eases out, so it fades
      both ways instead of snapping away on close. */
-  .emoji-picker__popover::backdrop {
-    background: var(--scrim);
+  .lc-emoji-picker__popover::backdrop {
+    background: var(--lc-scrim);
     opacity: 0;
     transition:
-      opacity 220ms var(--ease-out),
+      opacity 220ms var(--lc-ease-out),
       display 220ms allow-discrete,
       overlay 220ms allow-discrete;
 
@@ -72,7 +70,7 @@
   /* Only the phone sheet dims the page; the desktop popover rides the top
      layer too (so nothing paints over it) but floats over an undimmed page. */
   @media (width < 40rem) {
-    .emoji-picker__popover:popover-open::backdrop {
+    .lc-emoji-picker__popover:popover-open::backdrop {
       opacity: 1;
 
       @starting-style { opacity: 0; }
@@ -82,22 +80,22 @@
   /* Phones get a solid sheet; on desktop the host paints the popover as a
      floating surface (glass in wariwari), so the gem leaves it unpainted. */
   @media (width < 40rem) {
-    .emoji-picker__popover {
-      border: 1px solid var(--glass-edge, var(--hairline));
+    .lc-emoji-picker__popover {
+      border: 1px solid var(--lc-glass-edge, var(--border));
       border-block-end: 0;
-      background: var(--paper);
-      box-shadow: 0 -12px 40px -12px color-mix(in oklab, var(--ink) 45%, transparent);
+      background: var(--background);
+      box-shadow: 0 -12px 40px -12px color-mix(in oklab, var(--foreground) 45%, transparent);
     }
   }
 
-  .emoji-picker__popover {
+  .lc-emoji-picker__popover {
     position: fixed;
     inset: auto 0 0;
     margin: 0;
-    z-index: var(--emoji-sheet-z);
+    z-index: var(--lc-z-overlay);
     display: none;
     max-inline-size: none;
-    color: var(--ink);
+    color: var(--foreground);
     flex-direction: column;
     inline-size: 100%;
     max-block-size: min(72svh, 34rem);
@@ -107,7 +105,7 @@
     overscroll-behavior: contain;
     transform: translateY(100%);
     transition:
-      transform 260ms var(--ease-out-expo),
+      transform 260ms var(--lc-ease-out-expo),
       display 260ms allow-discrete,
       overlay 260ms allow-discrete;
 
@@ -125,7 +123,7 @@
 
   /* Fallback for browsers without the Popover API: class-driven display. */
   @supports not selector(:popover-open) {
-    .emoji-picker__popover[data-open] {
+    .lc-emoji-picker__popover[data-open] {
       display: flex;
       transform: translateY(0);
     }
@@ -135,7 +133,7 @@
      is large; the host's sheet draws the pill.
      touch-action: none lets a vertical drag pull the sheet down rather than
      scroll. Drag-to-dismiss is wired by the sheet controller. */
-  .emoji-picker__handle {
+  .lc-emoji-picker__handle {
     flex: 0 0 auto;
     display: grid;
     place-items: center;
@@ -145,10 +143,10 @@
     cursor: grab;
   }
 
-  .emoji-picker__handle:active { cursor: grabbing; }
+  .lc-emoji-picker__handle:active { cursor: grabbing; }
 
   /* ---- Search row --------------------------------------------------- */
-  .emoji-picker__search {
+  .lc-emoji-picker__search {
     flex: 0 0 auto;
     display: flex;
     gap: 0.5rem;
@@ -156,35 +154,35 @@
     padding: 0.75rem 0.75rem 0.5rem;
   }
 
-  .emoji-picker__search-field {
+  .lc-emoji-picker__search-field {
     position: relative;
     flex: 1 1 auto;
     display: flex;
     align-items: center;
   }
 
-  .emoji-picker__search-icon {
+  .lc-emoji-picker__search-icon {
     position: absolute;
     inset-inline-start: 14px;
     inline-size: 18px;
     block-size: 18px;
-    color: var(--ink-3);
+    color: var(--muted-foreground);
     pointer-events: none;
   }
 
-  .emoji-picker__search-input {
+  .lc-emoji-picker__search-input {
     inline-size: 100%;
     min-block-size: 44px;
     padding-inline: 40px 1rem;
     border: 1px solid transparent;
     border-radius: 999px;
-    background: var(--paper-2);
-    color: var(--ink);
+    background: var(--muted);
+    color: var(--foreground);
     font: inherit;
     font-size: 1rem;
     transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
 
-    &::placeholder { color: var(--ink-3); }
+    &::placeholder { color: var(--muted-foreground); }
     &::-webkit-search-cancel-button {
       /* stylelint-disable-next-line property-no-vendor-prefix -- WebKit search decoration */
       -webkit-appearance: none;
@@ -193,35 +191,35 @@
 
     &:focus {
       outline: none;
-      box-shadow: var(--focus-halo, 0 0 0 2px color-mix(in oklab, var(--sky) 50%, transparent));
+      box-shadow: var(--focus-halo, 0 0 0 2px color-mix(in oklab, var(--primary) 50%, transparent));
     }
   }
 
   /* ---- Skin-tone control ------------------------------------------- */
-  .emoji-picker__tones {
+  .lc-emoji-picker__tones {
     position: relative;
     flex: 0 0 auto;
   }
 
-  .emoji-picker__tone-toggle {
+  .lc-emoji-picker__tone-toggle {
     display: inline-grid;
     place-items: center;
     inline-size: 44px;
     block-size: 44px;
     border: none;
     border-radius: 999px;
-    background: var(--paper-2);
+    background: var(--muted);
     cursor: pointer;
     font-size: var(--text-lg, 1.125rem);
     line-height: 1;
     transition: background 150ms ease-out;
 
-    &:hover { background: var(--paper-3); }
+    &:hover { background: var(--accent); }
 
-    &[aria-expanded="true"] { background: var(--sky-soft); }
+    &[aria-expanded="true"] { background: color-mix(in oklab, var(--primary) 12%, var(--background)); }
   }
 
-  .emoji-picker__tone-menu {
+  .lc-emoji-picker__tone-menu {
     position: absolute;
     inset-block-end: calc(100% + 6px);
     inset-inline-end: 0;
@@ -234,7 +232,7 @@
     &[hidden] { display: none; }
   }
 
-  .emoji-picker__tone {
+  .lc-emoji-picker__tone {
     display: inline-grid;
     place-items: center;
     inline-size: 36px;
@@ -246,16 +244,16 @@
     font-size: var(--text-lg, 1.125rem);
     line-height: 1;
 
-    &:hover { background: var(--paper-2); }
+    &:hover { background: var(--muted); }
 
-    &[aria-current="true"] { background: var(--sky-soft); }
+    &[aria-current="true"] { background: color-mix(in oklab, var(--primary) 12%, var(--background)); }
   }
 
   /* ---- Category tab navigation ------------------------------------- */
 
   /* Category tabs: a segmented track, like the app's tab strips — a paper-2
      track with the active tab raised on a paper thumb. */
-  .emoji-picker__tabs {
+  .lc-emoji-picker__tabs {
     flex: 0 0 auto;
     display: flex;
     gap: 2px;
@@ -264,12 +262,12 @@
     overflow-x: auto;
     scrollbar-width: none;
     border-radius: var(--radius-2xl, 1rem);
-    background: var(--paper-2);
+    background: var(--muted);
 
     &::-webkit-scrollbar { display: none; }
   }
 
-  .emoji-picker__tab {
+  .lc-emoji-picker__tab {
     flex: 0 0 auto;
     display: inline-grid;
     place-items: center;
@@ -288,13 +286,13 @@
 
     &[aria-current="true"] {
       opacity: 1;
-      background: var(--paper);
-      box-shadow: var(--shadow-sm);
+      background: var(--background);
+      box-shadow: var(--lc-shadow-sm);
     }
   }
 
   /* ---- Scrollable body --------------------------------------------- */
-  .emoji-picker__body {
+  .lc-emoji-picker__body {
     position: relative;
     flex: 1 1 auto;
     overflow-y: auto;
@@ -309,15 +307,15 @@
     @media (prefers-reduced-motion: reduce) { scroll-behavior: auto; }
   }
 
-  .emoji-picker__category + .emoji-picker__category,
-  .emoji-picker__recent + .emoji-picker__catalog,
-  .emoji-picker__results + * {
+  .lc-emoji-picker__category + .lc-emoji-picker__category,
+  .lc-emoji-picker__recent + .lc-emoji-picker__catalog,
+  .lc-emoji-picker__results + * {
     margin-block-start: 0.5rem;
   }
 
   /* Heads scroll with their section: the tab track already marks the current
      category, and a sticky band would sit as a stripe across the panel. */
-  .emoji-picker__category-head {
+  .lc-emoji-picker__category-head {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
@@ -328,19 +326,19 @@
       margin: 0;
       font-size: var(--text-sm, 0.875rem);
       font-weight: var(--font-weight-semibold, 600);
-      color: var(--ink-2);
+      color: var(--muted-foreground);
     }
 
     .count {
-      font-family: var(--font-body, system-ui);
+      font-family: var(--font-sans, system-ui);
       font-size: var(--text-xs, 0.75rem);
-      color: var(--ink-3);
+      color: var(--muted-foreground);
     }
   }
 
-  .emoji-picker__grid {
+  .lc-emoji-picker__grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(var(--emoji-cell), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(var(--lc-emoji-cell), 1fr));
     gap: 2px;
     padding-block-start: 4px;
 
@@ -356,45 +354,45 @@
       font-size: var(--text-xl, 1.25rem);
       line-height: 1;
       padding: 0;
-      transition: background 0.1s, transform 0.1s var(--ease-out);
+      transition: background 0.1s, transform 0.1s var(--lc-ease-out);
 
       &:hover,
       &:focus-visible {
-        background: var(--paper-2);
+        background: var(--muted);
         transform: scale(1.12);
         outline: none;
       }
 
-      &[aria-current="true"] { background: var(--sky-soft); }
+      &[aria-current="true"] { background: color-mix(in oklab, var(--primary) 12%, var(--background)); }
     }
   }
 
   /* Section that owns the sticky header needs the scroll anchor, not the grid */
-  .emoji-picker__category,
-  .emoji-picker__recent,
-  .emoji-picker__results {
+  .lc-emoji-picker__category,
+  .lc-emoji-picker__recent,
+  .lc-emoji-picker__results {
     scroll-margin-block-start: 0;
   }
 
-  .emoji-picker__empty {
+  .lc-emoji-picker__empty {
     margin: 0;
     padding: 1rem 0.5rem;
-    color: var(--ink-3);
+    color: var(--muted-foreground);
     font-size: 1rem;
     text-align: center;
   }
 
   /* ---- Search mode: swap catalog for a single ranked result list ---- */
-  .emoji-picker__popover:not([data-searching]) .emoji-picker__results { display: none; }
+  .lc-emoji-picker__popover:not([data-searching]) .lc-emoji-picker__results { display: none; }
 
-  .emoji-picker__popover[data-searching] {
-    .emoji-picker__tabs,
-    .emoji-picker__recent,
-    .emoji-picker__catalog { display: none; }
+  .lc-emoji-picker__popover[data-searching] {
+    .lc-emoji-picker__tabs,
+    .lc-emoji-picker__recent,
+    .lc-emoji-picker__catalog { display: none; }
   }
 
   /* ---- Preview footer ---------------------------------------------- */
-  .emoji-picker__preview {
+  .lc-emoji-picker__preview {
     flex: 0 0 auto;
     display: flex;
     gap: 0.5rem;
@@ -403,15 +401,15 @@
     padding: 0.25rem 1rem 0.75rem;
   }
 
-  .emoji-picker__preview-emoji {
+  .lc-emoji-picker__preview-emoji {
     font-size: 1.5rem;
     line-height: 1;
   }
 
-  .emoji-picker__preview-name {
+  .lc-emoji-picker__preview-name {
     overflow: hidden;
     font-size: 1rem;
-    color: var(--ink-3);
+    color: var(--muted-foreground);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -422,7 +420,7 @@
 
   /* ==================================================================== */
   @media (width >= 40rem) {
-    .emoji-picker__popover {
+    .lc-emoji-picker__popover {
       position: absolute;
       inset-block: calc(100% + 8px) auto;
       inset-inline: 0 auto;
@@ -433,8 +431,8 @@
       transform: translateY(-4px) scale(0.98);
       opacity: 0;
       transition:
-        opacity 160ms var(--ease-out-expo),
-        transform 160ms var(--ease-out-expo),
+        opacity 160ms var(--lc-ease-out-expo),
+        transform 160ms var(--lc-ease-out-expo),
         display 160ms allow-discrete,
         overlay 160ms allow-discrete;
 
@@ -452,11 +450,11 @@
       @media (prefers-reduced-motion: reduce) { transition: none; }
     }
 
-    .emoji-picker__handle { display: none; }
+    .lc-emoji-picker__handle { display: none; }
 
-    main:has(.emoji-picker__popover[data-open]),
-    .emoji-picker:has(.emoji-picker__popover[data-open]) {
-      z-index: 60;
+    main:has(.lc-emoji-picker__popover[data-open]),
+    .lc-emoji-picker:has(.lc-emoji-picker__popover[data-open]) {
+      z-index: var(--lc-z-overlay);
     }
   }
 }

data/app/assets/tailwind/lostcoords/ui/field.css

@@ -1,6 +1,6 @@
 @layer components {
   /* A legend sits outside the fieldset's internal grid. */
-  :where(fieldset.ui-field > legend) {
-    margin-block-end: var(--ui-space-related, 0.5rem);
+  :where(fieldset.lc-field > legend) {
+    margin-block-end: var(--spacing-related);
   }
 }

data/app/assets/tailwind/lostcoords/ui/glass.css

@@ -1,17 +1,18 @@
 /* Glass — the floating control layer, used the way iOS uses it: only on
    chrome that floats over content (the nav pills, the phone CTA dock, menus
    and popovers), never on cards or sections. Menus lift further, on
-   --shadow-lg. Written once here because Safari
+   --lc-shadow-lg. Written once here because Safari
    drops custom properties inside -webkit-backdrop-filter, so the blur needs
    literal values, and because the solid fallbacks need @supports and
    prefers-reduced-transparency. glass_class is the only writer of the name. */
 @layer components {
   /* The emoji and currency pickers are glass only as desktop popovers; on
      phones they're bottom sheets, whose rules come later in the cascade and repaint them solid. */
-  .glass {
-    background: var(--glass-fill);
-    border: 1px solid var(--glass-edge);
-    box-shadow: var(--glass-shadow);
+  .lc-glass {
+    --_lc-glass-fill: var(--lc-glass-fill);
+    background: var(--_lc-glass-fill);
+    border: 1px solid var(--lc-glass-edge);
+    box-shadow: var(--lc-glass-shadow);
     -webkit-backdrop-filter: blur(24px) saturate(160%);
     backdrop-filter: blur(24px) saturate(160%);
 
@@ -23,13 +24,13 @@
       backdrop-filter: blur(12px) saturate(180%);
     }
 
-    /* --glass-solid lets inverted (HUD) glass fall back to its own colour. */
+    /* --lc-glass-solid lets inverted (HUD) glass fall back to its own colour. */
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-      background: var(--glass-solid, var(--paper));
+      --_lc-glass-fill: var(--lc-glass-solid, var(--background));
     }
 
     @media (prefers-reduced-transparency: reduce) {
-      background: var(--glass-solid, var(--paper));
+      --_lc-glass-fill: var(--lc-glass-solid, var(--background));
       -webkit-backdrop-filter: none;
       backdrop-filter: none;
     }

data/app/assets/tailwind/lostcoords/ui/layout.css

@@ -1,5 +1,5 @@
 @layer components {
-  .ui-container-page {
-    padding-inline: var(--ui-gutter, clamp(1rem, 3vw, 1.5rem));
+  .lc-container-page {
+    padding-inline: var(--spacing-gutter);
   }
 }

data/app/assets/tailwind/lostcoords/ui/popover.css

@@ -1,12 +1,12 @@
 /* Closed is the exit pose, so closing animates too; allow-discrete holds
    display/overlay until it ends. FloatingPanel sets [data-open]. */
-@utility popover-shell {
+@utility lc-popover-shell {
   opacity: 0;
   transform: translateY(--spacing(-1)) scale(0.98);
   pointer-events: none;
   transition:
-    opacity 160ms var(--ease-out-expo),
-    transform 160ms var(--ease-out-expo),
+    opacity 160ms var(--lc-ease-out-expo),
+    transform 160ms var(--lc-ease-out-expo),
     display 160ms allow-discrete,
     overlay 160ms allow-discrete;
 
@@ -23,10 +23,10 @@
 }
 
 @layer components {
-  /* Desktop: the .sheet becomes an anchored popover instead of a bottom sheet. */
+  /* Desktop: the .lc-sheet becomes an anchored popover instead of a bottom sheet. */
   @media (width >= 40rem) {
-    .sheet--anchored {
-      @apply popover-shell;
+    .lc-sheet--anchored {
+      @apply lc-popover-shell;
 
       display: none;
       flex-direction: column;
@@ -48,27 +48,27 @@
   /* Enter/exit for small overlays, whichever way they open: a [hidden] toggle
      (amount calculator, colour picker), the Popover API (phone nav menus) or a
      modal <dialog>. The closed state is the exit pose, so close animates too;
-     allow-discrete holds display/overlay until it ends. --pop-y sets the
+     allow-discrete holds display/overlay until it ends. --lc-pop-y sets the
      direction: popovers drop from their trigger, dialogs rise. */
-  .popover-pop {
-    --pop-from: translateY(var(--pop-y, -0.25rem)) scale(0.96);
+  .lc-popover-pop {
+    --lc-pop-from: translateY(var(--lc-pop-y, -0.25rem)) scale(0.96);
 
-    transform-origin: var(--pop-origin, top);
+    transform-origin: var(--lc-pop-origin, top);
     transition:
-      opacity 160ms var(--ease-out-expo),
-      transform 240ms var(--ease-out-expo),
+      opacity 160ms var(--lc-ease-out-expo),
+      transform 240ms var(--lc-ease-out-expo),
       display 240ms allow-discrete,
       overlay 240ms allow-discrete;
 
     &:is([hidden], [popover]:not(:popover-open), dialog:not([open])) {
       opacity: 0;
-      transform: var(--pop-from);
+      transform: var(--lc-pop-from);
     }
 
     &:is(:not([hidden], [popover], dialog), :popover-open, dialog[open]) {
       @starting-style {
         opacity: 0;
-        transform: var(--pop-from);
+        transform: var(--lc-pop-from);
       }
     }
   }

data/app/assets/tailwind/lostcoords/ui/prose.css

@@ -0,0 +1,66 @@
+@layer utilities {
+  .lc-prose {
+    --tw-prose-body: var(--muted-foreground);
+    --tw-prose-headings: var(--foreground);
+    --tw-prose-lead: var(--muted-foreground);
+    --tw-prose-links: var(--primary);
+    --tw-prose-bold: var(--foreground);
+    --tw-prose-counters: var(--muted-foreground);
+    --tw-prose-bullets: var(--muted-foreground);
+    --tw-prose-hr: var(--border);
+    --tw-prose-quotes: var(--foreground);
+    --tw-prose-quote-borders: var(--border);
+    --tw-prose-captions: var(--muted-foreground);
+    --tw-prose-code: var(--foreground);
+    --tw-prose-pre-code: var(--foreground);
+    --tw-prose-pre-bg: var(--muted);
+    --tw-prose-th-borders: var(--border);
+    --tw-prose-td-borders: var(--border);
+
+    & :where(p, ul, ol, dl, blockquote, pre, table, figure, hr):not(:where(.not-prose, .not-prose *)) {
+      margin-block: var(--lc-reading-flow, 1.25em) 0;
+    }
+
+    & :where(h1, h2, h3, h4):not(:where(.not-prose, .not-prose *)) {
+      margin-block: calc(var(--lc-reading-flow, 1.25em) * 1.6) 0;
+      font-family: var(--font-display, inherit);
+      line-height: var(--lc-reading-heading-leading, 1.25);
+      text-wrap: balance;
+    }
+
+    & :where(h1, h2, h3, h4) + :where(p, ul, ol):not(:where(.not-prose, .not-prose *)) {
+      margin-block-start: calc(var(--lc-reading-flow, 1.25em) * 0.5);
+    }
+
+    & :where(li > p, li > ul, li > ol):not(:where(.not-prose, .not-prose *)) {
+      margin-block-start: calc(var(--lc-reading-flow, 1.25em) * 0.5);
+    }
+
+    & > :where(:first-child):not(:where(.not-prose, .not-prose *)) {
+      margin-block-start: 0;
+    }
+
+    &:lang(ja) {
+      line-break: strict;
+      word-break: normal;
+      overflow-wrap: anywhere;
+    }
+
+    &:lang(ja) :where(h1, h2, h3, h4):not(:where(.not-prose, .not-prose *)) {
+      line-height: var(--lc-reading-heading-leading, 1.4);
+      letter-spacing: normal;
+    }
+  }
+
+  @supports (word-break: auto-phrase) {
+    .lc-prose:lang(ja) :where(h1, h2, h3, h4):not(:where(.not-prose, .not-prose *)) {
+      word-break: auto-phrase;
+    }
+  }
+}
+
+@layer utilities {
+  .lc-prose :where(code):not(:where(pre code)) {
+    @apply lc-inline-code;
+  }
+}