@cosxai/ui 1.0.0-alpha.6 → 1.0.0-alpha.8

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 1.0.0-alpha.8 (2026-09-30)
+
+- ThemeSwitch: `defaultOpen` starts it opened (documentation specimens).
+- WorkspaceMark: a logo that failed before React hydrated (a server-rendered
+  page) now falls back to the initial too — onError had already fired.
+- design.cosx.co: Patterns · Sign-in, every specimen the real component.
+
+## 1.0.0-alpha.7 (2026-09-30)
+
+Sign-in patterns checked against design.cosx.co Patterns · Sign-in:
+
+- AuthPanel: the highlight band runs 40–94% with a hair of overhang each
+  side; Chinese sets at 1.35, untracked, band from 50% (typography-cjk's
+  :lang(zh) line-height is unlayered, so this one is important).
+- WorkspaceRow: 14px name at 1.35, the outline an inset rule on the page
+  colour (no border box).
+
 ## 1.0.0-alpha.6 (2026-09-29)
 
 Sign-in patterns (Metaroom sign-in, design.cosx.co), moved here from the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.8",
   "description": "COSX Design System 3.0 \u2014 tokens, Tailwind v4 theme and React components",
   "license": "UNLICENSED",
   "type": "module",

package/src/components/AuthLayout.tsx

@@ -69,9 +69,13 @@ export function AuthPanel({ eyebrow, lead, mark, sub, logo }: AuthPanelProps) {
       {logo ?? <Logo height={22} tone="ink" />}
       <div className="flex flex-col gap-4">
         <span className="text-[13px] font-medium text-[rgba(17,17,17,.7)]">{eyebrow}</span>
-        <p className="m-0 text-[34px] leading-[1.22] font-medium tracking-[-.02em] text-pretty">
+        {/* Chinese sets at 1.35, untracked, its band starting lower (design: Patterns · Sign-in).
+            Important: typography-cjk.css sets every :lang(zh) line-height outside the layers. */}
+        <p className="m-0 text-[34px] leading-[1.22] font-medium tracking-[-.02em] text-pretty [&:lang(zh)]:leading-[1.35]! [&:lang(zh)]:tracking-normal!">
           {lead}
-          <span className="box-decoration-clone bg-[linear-gradient(transparent_45%,var(--brand-mark)_45%,var(--brand-mark)_95%,transparent_95%)]">{mark}</span>
+          <span className="mx-[-.08em] box-decoration-clone px-[.08em] bg-[linear-gradient(transparent_40%,var(--brand-mark)_40%,var(--brand-mark)_94%,transparent_94%)] [&:lang(zh)]:bg-[linear-gradient(transparent_50%,var(--brand-mark)_50%,var(--brand-mark)_94%,transparent_94%)]">
+            {mark}
+          </span>
         </p>
         {sub && <p className="m-0 text-[15px] leading-[1.6] text-[rgba(17,17,17,.7)]">{sub}</p>}
       </div>

package/src/components/ThemeSwitch.tsx

@@ -21,6 +21,8 @@ export type ThemeSwitchProps = Omit<ComponentProps<'div'>, 'onChange' | 'childre
   /** Unset: the ThemeProvider's setter. */
   onChange?: ((mode: ThemeMode) => void) | undefined;
   labels?: ThemeSwitchLabels | undefined;
+  /** Start opened (documentation specimens); it folds once the pointer leaves. */
+  defaultOpen?: boolean | undefined;
 };
 
 /** A click on an option only picks it once the switch has been open this long. */
@@ -33,11 +35,11 @@ const PICK_AFTER_MS = 800;
  * so the first tap on touch (which opens it) steps instead of landing on
  * whatever slid under the finger.
  */
-export function ThemeSwitch({ value, onChange, labels, className, ...rest }: ThemeSwitchProps) {
+export function ThemeSwitch({ value, onChange, labels, defaultOpen = false, className, ...rest }: ThemeSwitchProps) {
   const theme = useTheme();
   const mode = value ?? theme.mode;
   const setMode = onChange ?? theme.setMode;
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(defaultOpen);
   const openedAt = useRef(0);
   const show = () => {
     if (open) return;

package/src/components/WorkspaceRow.tsx

@@ -1,5 +1,5 @@
 import { ChevronRight } from 'lucide-react';
-import { forwardRef, useState, type ComponentProps, type ReactNode } from 'react';
+import { forwardRef, useEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
 
 import { cn } from '../lib/cn';
 import { Spinner } from './Spinner';
@@ -15,8 +15,15 @@ export type WorkspaceMarkProps = {
 /** WorkspaceMark — a workspace's logo, or its initial on the brand yellow. */
 export function WorkspaceMark({ name, logoUrl, size = 36 }: WorkspaceMarkProps) {
   const [failed, setFailed] = useState(false);
+  const img = useRef<HTMLImageElement>(null);
+  // A server-rendered page can fail the image before React is listening:
+  // onError never fires, so look once it is.
+  useEffect(() => {
+    const el = img.current;
+    if (el?.complete && el.naturalWidth === 0) setFailed(true);
+  }, [logoUrl]);
   if (logoUrl && !failed) {
-    return <img src={logoUrl} alt="" aria-hidden style={{ width: size, height: size }} className="shrink-0 rounded-[8px] object-cover" onError={() => setFailed(true)} />;
+    return <img ref={img} src={logoUrl} alt="" aria-hidden style={{ width: size, height: size }} className="shrink-0 rounded-[8px] object-cover" onError={() => setFailed(true)} />;
   }
   return (
     <span aria-hidden style={{ width: size, height: size }} className="grid shrink-0 place-items-center rounded-[8px] bg-brand-field text-[13px] font-semibold text-ink">
@@ -48,14 +55,14 @@ export const WorkspaceRow = forwardRef<HTMLButtonElement, WorkspaceRowProps>(fun
       type="button"
       aria-busy={busy || undefined}
       className={cn(
-        'flex w-full cursor-pointer items-center gap-3 rounded-[12px] border border-rule bg-transparent px-3.5 py-3 text-left text-fg outline-none transition-colors duration-[120ms] hover:bg-hover focus-visible:shadow-(--focus-ring) disabled:cursor-default',
+        'flex w-full cursor-pointer items-center gap-3 rounded-[12px] border-0 bg-page px-3.5 py-3 text-left text-fg shadow-[inset_0_0_0_1px_var(--rule)] outline-none transition-colors duration-[120ms] hover:bg-hover focus-visible:shadow-(--focus-ring) disabled:cursor-default',
         className,
       )}
       {...rest}
     >
       <WorkspaceMark name={name} logoUrl={logoUrl} />
-      <span className="flex min-w-0 flex-1 flex-col">
-        <span className="truncate text-[15px] font-medium">{name}</span>
+      <span className="flex min-w-0 flex-1 flex-col leading-[1.35]">
+        <span className="truncate text-[14px] font-medium">{name}</span>
         {detail && <span className="truncate text-[12px] text-fg-secondary">{detail}</span>}
       </span>
       {busy ? <Spinner size={16} /> : <ChevronRight size={16} aria-hidden className="text-fg-secondary" />}