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

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 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:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "1.0.0-alpha.7",
+  "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/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">