@cosxai/ui 0.19.0 → 0.21.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.19.0",
-  "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
+  "version": "0.21.0",
+  "description": "COSX design system \u2014 React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",
   "main": "./src/index.ts",

package/src/command/CommandPalette.tsx

@@ -87,10 +87,17 @@ export function CommandPalette({
   // Flat array for keyboard navigation (sequential across groups).
   const flat = useMemo(() => grouped.flatMap((g) => g.items), [grouped]);
 
-  // Clamp selectedIdx when results shrink.
-  useEffect(() => {
-    if (selectedIdx >= flat.length) setSelectedIdx(Math.max(0, flat.length - 1));
-  }, [flat.length, selectedIdx]);
+  // Effective selection: `selectedIdx` is the raw state the keyboard/mouse
+  // set, but disabled rows and a shrunk list can leave it pointing at a
+  // non-interactive or out-of-range item. Derive the index actually shown
+  // as selected — the first enabled row when the raw one isn't usable — so
+  // a disabled item (e.g. a "coming soon" teaser) is never highlighted and
+  // the default lands on the first real result.
+  const selIdx = useMemo(() => {
+    if (flat.length === 0) return 0;
+    if (selectedIdx < flat.length && !flat[selectedIdx]?.disabled) return selectedIdx;
+    return firstEnabled(flat);
+  }, [flat, selectedIdx]);
 
   const close = () => setOpen(false);
 
@@ -104,34 +111,34 @@ export function CommandPalette({
       }
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setSelectedIdx((i) => (i + 1) % Math.max(1, flat.length));
+        setSelectedIdx(stepEnabled(flat, selIdx, 1));
         return;
       }
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        setSelectedIdx((i) => (i - 1 + Math.max(1, flat.length)) % Math.max(1, flat.length));
+        setSelectedIdx(stepEnabled(flat, selIdx, -1));
         return;
       }
       if (e.key === "Enter") {
         e.preventDefault();
-        const pick = flat[selectedIdx];
-        if (pick) pick.run({ close });
+        const pick = flat[selIdx];
+        if (pick && !pick.disabled) pick.run({ close });
         return;
       }
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-    // close + flat + selectedIdx are stable enough; intentionally omit
-    // close from deps so we don't re-bind every render.
+    // close + flat + selIdx are stable enough; intentionally omit close
+    // from deps so we don't re-bind every render.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, flat, selectedIdx]);
+  }, [open, flat, selIdx]);
 
   // Scroll selected row into view.
   useEffect(() => {
     if (!open) return;
-    const node = listRef.current?.querySelector(`[data-row-idx="${selectedIdx}"]`);
+    const node = listRef.current?.querySelector(`[data-row-idx="${selIdx}"]`);
     (node as HTMLElement | null)?.scrollIntoView({ block: "nearest" });
-  }, [open, selectedIdx]);
+  }, [open, selIdx]);
 
   if (!open) return null;
 
@@ -218,13 +225,15 @@ export function CommandPalette({
                 </div>
                 {g.items.map((it) => {
                   const idx = flat.indexOf(it);
-                  const selected = idx === selectedIdx;
+                  const disabled = !!it.disabled;
+                  const selected = idx === selIdx && !disabled;
                   return (
                     <div
                       key={it.key}
                       data-row-idx={idx}
-                      onMouseEnter={() => setSelectedIdx(idx)}
-                      onClick={() => it.run({ close })}
+                      aria-disabled={disabled || undefined}
+                      onMouseEnter={disabled ? undefined : () => setSelectedIdx(idx)}
+                      onClick={disabled ? undefined : () => it.run({ close })}
                       style={{
                         display: "flex",
                         alignItems: "center",
@@ -232,8 +241,13 @@ export function CommandPalette({
                         padding: "8px 12px",
                         borderRadius: "var(--ck-radius-sm)",
                         background: selected ? "var(--ck-accent-muted)" : "transparent",
-                        color: selected ? "var(--ck-accent)" : "var(--ck-text-primary)",
-                        cursor: "pointer",
+                        color: disabled
+                          ? "var(--ck-text-tertiary)"
+                          : selected
+                            ? "var(--ck-accent)"
+                            : "var(--ck-text-primary)",
+                        opacity: disabled ? 0.6 : 1,
+                        cursor: disabled ? "default" : "pointer",
                         font: "400 13px/1.3 var(--ck-font-sans)",
                       }}
                     >
@@ -293,3 +307,23 @@ export function CommandPalette({
     document.body,
   );
 }
+
+// First index whose item isn't disabled, or 0 if every item is (or the
+// list is empty) — the palette has to point somewhere.
+function firstEnabled(list: CommandItem[]): number {
+  const i = list.findIndex((it) => !it.disabled);
+  return i === -1 ? 0 : i;
+}
+
+// Step from `from` in `dir` (+1 down / -1 up), wrapping, skipping disabled
+// rows. Returns `from` when there's no other enabled row to land on.
+function stepEnabled(list: CommandItem[], from: number, dir: 1 | -1): number {
+  const n = list.length;
+  if (n === 0) return 0;
+  let i = from;
+  for (let step = 0; step < n; step++) {
+    i = (i + dir + n) % n;
+    if (!list[i]?.disabled) return i;
+  }
+  return from;
+}

package/src/command/types.ts

@@ -29,4 +29,9 @@ export interface CommandItem {
   // matches. Use for hidden debug/test menus; pair with a "Debug"
   // group so the reveal is self-describing.
   secret?: string;
+  // Non-interactive placeholder: the row still renders (dimmed) but is
+  // skipped by keyboard nav, never auto-selected, and `run` never fires
+  // on it. Use for "coming soon" teasers. Distinct from `secret`, which
+  // HIDES the row; `disabled` SHOWS it as unavailable.
+  disabled?: boolean | undefined;
 }

package/src/dialogs/Modal.tsx

@@ -1,6 +1,8 @@
 import { useEffect, type ReactNode, type CSSProperties } from "react";
 import { createPortal } from "react-dom";
 
+import { useViewport } from "../hooks/useViewport";
+
 // Modal base. Portals to document.body so it escapes ancestor
 // stacking contexts. Closes on Esc + backdrop click (both opt-out).
 // Caller owns open state and slots in the header/body/footer.
@@ -25,6 +27,16 @@ export interface ModalProps {
   // Optional aria-labelled-by for screen readers (point at the
   // ModalHeader title's id).
   labelledBy?: string;
+  // How the modal presents on PHONE viewports (no effect elsewhere):
+  //   "center" (default) — the desktop card, scaled to fit
+  //   "page"             — full-screen, slides in from the right like
+  //                        a pushed native page. For content dialogs
+  //                        the user enters to work in.
+  //   "sheet"            — bottom sheet rising from the lower edge.
+  //                        For light pickers / short forms.
+  // Confirm-style dialogs should stay "center" — native alerts are
+  // centered cards too.
+  phonePresentation?: "center" | "page" | "sheet";
 }
 
 const WIDTHS = { sm: 340, md: 440, lg: 560, xl: 720, "2xl": 880, "3xl": 1024, "4xl": 1200, "5xl": 1440 };
@@ -37,7 +49,10 @@ export function Modal({
   cardStyle,
   children,
   labelledBy,
+  phonePresentation = "center",
 }: ModalProps) {
+  const vp = useViewport();
+  const mode = vp.isPhone ? phonePresentation : "center";
   useEffect(() => {
     if (!open || !dismissable) return;
     const onKey = (e: KeyboardEvent) => {
@@ -79,9 +94,9 @@ export function Modal({
         backdropFilter: "blur(8px)",
         WebkitBackdropFilter: "blur(8px)",
         display: "flex",
-        alignItems: "center",
+        alignItems: mode === "sheet" ? "flex-end" : "center",
         justifyContent: "center",
-        padding: 16,
+        padding: mode === "center" ? 16 : 0,
         zIndex: 100,
       }}
       onMouseDown={(e) => {
@@ -93,15 +108,23 @@ export function Modal({
       <div
         style={{
           width: "100%",
-          maxWidth: width,
-          maxHeight: "calc(100vh - 32px)",
+          maxWidth: mode === "center" ? width : "100%",
+          maxHeight:
+            mode === "page" ? "100dvh" : mode === "sheet" ? "92dvh" : "calc(100vh - 32px)",
+          ...(mode === "page" ? { height: "100dvh" } : {}),
           background: "var(--ck-bg-surface)",
           border: "1px solid var(--ck-border-subtle)",
           // Modal cards lift on the `-lg` radius rather than the
           // page's default `-md` so the corners read as softer than
           // the cards underneath them — supports the "this took
           // over" cue alongside the deeper overlay shadow.
-          borderRadius: "var(--ck-radius-lg)",
+          borderRadius:
+            mode === "page"
+              ? 0
+              : mode === "sheet"
+                ? "var(--ck-radius-lg) var(--ck-radius-lg) 0 0"
+                : "var(--ck-radius-lg)",
+          ...(mode === "page" ? { border: "none" } : {}),
           // Overlay shadow > shadow-3. shadow-3 was tuned for cards
           // sitting on a page; a modal needs to read as physically
           // lifted off the page, not as another tier of card.
@@ -113,7 +136,13 @@ export function Modal({
           color: "var(--ck-text-primary)",
           ...cardStyle,
         }}
-        className="ck-anim-popover"
+        className={
+          mode === "page"
+            ? "ck-anim-page-push"
+            : mode === "sheet"
+              ? "ck-anim-sheet-up"
+              : "ck-anim-popover"
+        }
       >
         {children}
       </div>

package/src/styles/base.css

@@ -88,12 +88,19 @@ a:visited { color: var(--ck-accent); }
 @keyframes ck-fade-in        { from { opacity: 0; } to { opacity: 1; } }
 @keyframes ck-popover-enter  { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
 @keyframes ck-page-enter     { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+/* Full-distance entrances for phone modal presentations: a pushed
+   page slides in from the right edge, a sheet rises from the bottom.
+   Unlike the 14px nudges above these travel the whole viewport. */
+@keyframes ck-page-push      { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes ck-sheet-up       { from { transform: translateY(100%); } to { transform: translateY(0); } }
 
 .ck-anim-slide-right { animation: ck-slide-in-right 180ms var(--ck-ease) both; }
 .ck-anim-slide-left  { animation: ck-slide-in-left  180ms var(--ck-ease) both; }
 .ck-anim-fade        { animation: ck-fade-in        180ms var(--ck-ease) both; }
 .ck-anim-popover     { animation: ck-popover-enter  160ms var(--ck-ease) both; transform-origin: top center; }
 .ck-anim-page        { animation: ck-page-enter     var(--ck-dur-page) cubic-bezier(0.16, 1, 0.3, 1) both; }
+.ck-anim-page-push   { animation: ck-page-push      260ms cubic-bezier(0.32, 0.72, 0, 1) both; }
+.ck-anim-sheet-up    { animation: ck-sheet-up       260ms cubic-bezier(0.32, 0.72, 0, 1) both; }
 
 /* Respect the user's OS-level motion preference. Cross-fade
    transitions on bg/colour stay (below the meaningful-motion
@@ -103,7 +110,9 @@ a:visited { color: var(--ck-accent); }
   .ck-anim-slide-left,
   .ck-anim-fade,
   .ck-anim-popover,
-  .ck-anim-page {
+  .ck-anim-page,
+  .ck-anim-page-push,
+  .ck-anim-sheet-up {
     animation: none;
   }
 }