@cosxai/ui 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/primitives/Input.tsx

@@ -98,6 +98,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         flexDirection: "column",
         gap: 6,
         width: fit === "full" ? "100%" : undefined,
+        // minWidth: 0 lets a parent flex container shrink this
+        // wrapper past the inner addon-wrap's nowrap suffix content.
+        // Without it, a long suffix (e.g. ".meta.test.cosx.dev")
+        // sets a min-content floor that pushes the form wider than
+        // its mobile viewport. Per-page CSS workarounds in consumer
+        // apps only cover their own scope; fixing it at the primitive
+        // catches every page.
+        minWidth: 0,
       }}
     >
       {label && (

package/src/styles/fonts.css

@@ -2,7 +2,11 @@
    Loaded from Google Fonts CDN — Geist + Geist Mono cover the
    default sans/mono slots; Playfair Display drives the editorial
    chrome's display heading; Caveat covers the sketch chrome's
-   handwritten display. All four are SIL OFL — free to redistribute.
+   handwritten display; Noto Serif SC is the matching CJK serif for
+   the editorial heading so a name like "本杰明 Zoë" renders Latin in
+   Playfair Display and Chinese in Noto Serif SC without leaking to
+   PingFang SC / SimSun (sans-serif system fallbacks that mis-pair
+   with the editorial high-contrast serif). All five are SIL OFL.
 
    Why Google Fonts CDN over self-hosting:
      1. Self-hosted /fonts/*.otf had to be shipped per-consumer
@@ -16,9 +20,17 @@
      3. font-display=swap means the system fallback paints first,
         the web font upgrades on arrival — no FOIT.
 
+   Bandwidth shape — Noto Serif SC is the only large family in the
+   set (CJK fonts dwarf Latin by character count). Google Fonts ships
+   it as ~100 unicode-range subsets; the browser only fetches a
+   subset when a character in its range is rendered. Pure-Latin
+   pages pay the CSS file (~5-10KB gzip) but no .woff2 — pages with
+   Chinese names pay an additional ~200-400KB of subset binaries
+   spread across the few CJK ranges they actually use.
+
    For offline / enterprise deploys that block Google Fonts, a
    consumer can override --ck-font-sans/serif/mono in tokens.css
    to fall back entirely to the system-font slot at the tail of
    each stack. */
 
-@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..700&family=Playfair+Display:wght@400..900&family=Caveat:wght@400..700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..700&family=Playfair+Display:wght@400..900&family=Caveat:wght@400..700&family=Noto+Serif+SC:wght@400..900&display=swap");

package/src/styles/index.css

@@ -117,6 +117,30 @@ html[data-ck-chrome="seamless"] .ck-card__foot {
   color: var(--ck-text-tertiary);
 }
 
+/* ---------- Input + Textarea disabled state ----------
+   Native :disabled styling is barely perceptible on a cream / dark
+   surface, which made disabled fields read as editable in
+   product-meta's settings (the email field in particular). Match
+   the .ck-btn:disabled treatment so consumers don't have to
+   reapply the same opacity / cursor pattern at every call site.
+
+   The addon-wrap variant uses :has(:disabled) so a wrapping
+   .ck-input-addon-wrap also dims when its inner <input> is disabled
+   — otherwise the slug input dims but its ".meta.test.cosx.dev"
+   suffix stays at full opacity, which looks broken. :has() is
+   supported across all evergreen browsers since 2023; pre-1.0 we
+   don't need a polyfill. */
+.ck-input:disabled,
+.ck-textarea:disabled,
+.ck-input-addon-wrap:has(:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.ck-input:disabled,
+.ck-textarea:disabled {
+  background: var(--ck-bg-muted, var(--ck-bg-surface));
+}
+
 /* ---------- Select (custom listbox — never native <select>) ----------
    The trigger LOOKS like .ck-input so chrome restyles cascade
    uniformly. Chromes that want a different vibe (terminal squared,

package/src/styles/tokens.css

@@ -19,19 +19,31 @@
      generic family so 中文 / 日本語 / 한국어 don't drop to the
      browser's last-resort glyph (renders as tofu on locked-down
      hosts). Browsers do per-character fallback — Latin hits
-     Geist/Playfair, CJK hits the matching system serif/sans. We
-     deliberately don't load a Noto SC web font here: every modern
-     OS ships PingFang SC (macOS / iOS), Microsoft YaHei
-     (Windows), or Source Han Sans (Android / ChromeOS), and the
-     extra ~150KB Google Fonts request to serve users a font they
-     already have is bad citizenship. */
+     Geist/Playfair, CJK hits the next matching family in the stack.
+
+     Serif slot ALSO carries Noto Serif SC as a web-font fallback
+     (loaded via fonts.css). Reason: the editorial chrome's display
+     heading uses Playfair Display, a high-contrast modern serif —
+     pairing it with PingFang SC / SimSun (the system *sans-serif*
+     CJK fallbacks) reads as a style break. Adobe/Google's Noto Serif
+     SC matches Playfair's serif vocabulary cross-platform without
+     depending on the user having Songti SC / STSong / Source Han
+     Serif SC installed locally. Cost is lazy: subset .woff2 only
+     downloads when a CJK character is actually rendered (per
+     fonts.css's unicode-range mechanism); pure-Latin pages pay only
+     the small CSS file.
+
+     Sans + mono slots stay system-only — system sans CJK
+     (PingFang SC / Microsoft YaHei) is what users expect for UI
+     copy, and the visual mismatch concern doesn't apply when the
+     Latin half is also a clean grotesk. */
   --ck-font-sans: "Geist", "Inter", system-ui, -apple-system,
                   "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                   "Source Han Sans SC", sans-serif;
   --ck-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
                   "Sarasa Mono SC", monospace;
-  --ck-font-serif: "Playfair Display", "GT Sectra", "Canela", Georgia,
-                   "Songti SC", "STSong", "Source Han Serif SC", serif;
+  --ck-font-serif: "Playfair Display", "Noto Serif SC", "GT Sectra", "Canela",
+                   Georgia, "Songti SC", "STSong", "Source Han Serif SC", serif;
   --ck-font-display: var(--ck-font-sans);
 
   /* ---------- Radii / motion ---------- */