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

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 1.0.0-alpha.9 (2026-09-30)
+
+- WorkspaceRow: `badge` — what the workspace still needs, as an attention
+  badge beside the chevron ("Needs setup"; Metaroom Sign In, Set up your
+  workspace).
+
+## 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.9",
   "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,7 +1,8 @@
 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 { Badge } from './Badge';
 import { Spinner } from './Spinner';
 
 export type WorkspaceMarkProps = {
@@ -15,8 +16,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">
@@ -32,14 +40,17 @@ export type WorkspaceRowProps = Omit<ComponentProps<'button'>, 'children'> & {
   logoUrl?: string | undefined;
   /** Being opened: a spinner in place of the chevron. */
   busy?: boolean | undefined;
+  /** A state beside the chevron, as an attention badge: "Needs setup". */
+  badge?: ReactNode;
 };
 
 /**
- * WorkspaceRow — one workspace in a chooser: mark, name, detail, chevron.
+ * WorkspaceRow — one workspace in a chooser: mark, name, detail, chevron;
+ * `badge` says what it still needs ("Needs setup").
  * The whole row is the button; `busy` shows it opening (disable the others).
  */
 export const WorkspaceRow = forwardRef<HTMLButtonElement, WorkspaceRowProps>(function WorkspaceRow(
-  { name, detail, logoUrl, busy = false, className, ...rest },
+  { name, detail, logoUrl, busy = false, badge, className, ...rest },
   ref,
 ) {
   return (
@@ -58,6 +69,11 @@ export const WorkspaceRow = forwardRef<HTMLButtonElement, WorkspaceRowProps>(fun
         <span className="truncate text-[14px] font-medium">{name}</span>
         {detail && <span className="truncate text-[12px] text-fg-secondary">{detail}</span>}
       </span>
+      {badge && (
+        <span className="flex shrink-0">
+          <Badge status="attention">{badge}</Badge>
+        </span>
+      )}
       {busy ? <Spinner size={16} /> : <ChevronRight size={16} aria-hidden className="text-fg-secondary" />}
     </button>
   );