@cosxai/ui 0.24.0 → 1.0.0-alpha.0

package/src/actionbar/ActionBarButton.tsx

@@ -1,111 +0,0 @@
-import type { ReactNode, CSSProperties } from "react";
-import { cn } from "../lib/cn";
-
-// Single button inside the action bar — used both for top-level
-// items and for entries inside expanded group menus.
-//
-// Three visual variants:
-//   - ghost   → default. Transparent bg, neutral text. Active
-//               state promotes to accent muted bg.
-//   - primary → solid accent fill, white text. For items whose
-//               "this mode is on" signal should beat the "this
-//               group is open" signal (e.g. an editing-mode toggle
-//               nested in a Manage group, while Manage is open).
-//   - soft    → transparent bg, accent-coloured text. Used for
-//               open group HEADS where the wrapper supplies a
-//               muted-accent bg; the head just needs the
-//               foreground to read as accent.
-
-// Optional props use `| undefined` (rather than bare `T?`) so that callers
-// can forward potentially-undefined values from upstream optional sources
-// (e.g. `ActionBarItem.active`, which is itself optional). Compatible with
-// `exactOptionalPropertyTypes: true` consumers.
-export interface ActionBarButtonProps {
-  icon?: ReactNode | undefined;
-  label: string;
-  onClick: () => void;
-  active?: boolean | undefined;
-  title?: string | undefined;
-  variant?: "ghost" | "primary" | "soft" | undefined;
-  disabled?: boolean | undefined;
-  hint?: string | undefined;
-  // Optional chevron — used by group heads to signal disclosure.
-  chevron?: "right" | undefined;
-  // 180° rotation when true (▸ becomes ◂ — reads as "close").
-  chevronRotated?: boolean | undefined;
-  // Hide label below md viewport (768 px). Default true.
-  responsiveLabel?: boolean | undefined;
-  style?: CSSProperties | undefined;
-}
-
-export function ActionBarButton({
-  icon,
-  label,
-  onClick,
-  active,
-  title,
-  variant = "ghost",
-  disabled,
-  hint,
-  chevron,
-  chevronRotated,
-  responsiveLabel = true,
-  style,
-}: ActionBarButtonProps) {
-  const isPrimary = active || variant === "primary";
-  const isSoft = !isPrimary && variant === "soft";
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      title={title ?? label}
-      className={cn(
-        "ck-actionbar-btn",
-        isPrimary && "ck-actionbar-btn--primary",
-        !isPrimary && "ck-actionbar-btn--ghost",
-      )}
-      style={{
-        ...(isSoft ? { color: "var(--ck-accent)" } : undefined),
-        ...style,
-      }}
-    >
-      {icon != null && <span className="ck-actionbar-icon">{icon}</span>}
-      <span className={responsiveLabel ? "ck-actionbar-label" : undefined}>
-        {label}
-      </span>
-      {hint && (
-        <span
-          className="ck-actionbar-hint"
-          style={{
-            color: isPrimary ? "rgba(255,255,255,0.7)" : "var(--ck-text-tertiary)",
-            font: "500 11px/1 var(--ck-font-mono)",
-            marginLeft: 4,
-          }}
-        >
-          {hint}
-        </span>
-      )}
-      {chevron && (
-        <svg
-          width="10"
-          height="10"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2.2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          style={{
-            flexShrink: 0,
-            opacity: 0.7,
-            transform: chevronRotated ? "rotate(180deg)" : "rotate(0deg)",
-            transition: "transform 220ms cubic-bezier(0.4, 0, 0.2, 1)",
-          }}
-        >
-          <polyline points="9 6 15 12 9 18" />
-        </svg>
-      )}
-    </button>
-  );
-}

package/src/actionbar/ActionBarMenuGroup.tsx

@@ -1,116 +0,0 @@
-import { useEffect, useRef, type ReactNode } from "react";
-import { ActionBarButton } from "./ActionBarButton";
-import type { ActionBarItem } from "./types";
-
-// Inline-expandable group inside the action bar. Head button +
-// disclosure region of child items. When open:
-//   - head gets a "soft" foreground (or "primary" if a child is
-//     active), wrapped in a muted-accent pill that extends across
-//     the children too
-//   - children animate in via max-width + opacity transition
-//     (no mount/unmount so the open/close has motion)
-//   - ESC + outside-click both close
-
-export interface ActionBarMenuGroupProps {
-  label: string;
-  icon?: ReactNode;
-  hasActiveChild: boolean;
-  isOpen: boolean;
-  onToggle: () => void;
-  items: ActionBarItem[];
-  onItemClicked: (item: ActionBarItem) => void;
-}
-
-export function ActionBarMenuGroup({
-  label,
-  icon,
-  hasActiveChild,
-  isOpen,
-  onToggle,
-  items,
-  onItemClicked,
-}: ActionBarMenuGroupProps) {
-  const headVariant: "ghost" | "primary" | "soft" = hasActiveChild
-    ? "primary"
-    : isOpen
-      ? "soft"
-      : "ghost";
-
-  // Outside-click closes the group via a capture-phase listener so
-  // the menu dismisses before the click reaches any other handler.
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!isOpen) return;
-    const onMouseDown = (e: MouseEvent) => {
-      if (!wrapperRef.current) return;
-      if (wrapperRef.current.contains(e.target as Node)) return;
-      onToggle();
-    };
-    document.addEventListener("mousedown", onMouseDown, true);
-    return () => document.removeEventListener("mousedown", onMouseDown, true);
-  }, [isOpen, onToggle]);
-
-  return (
-    <div
-      ref={wrapperRef}
-      // ck-actionbar-group--open scopes a deeper hover tint to the
-      // children while the disclosure is open. The default
-      // .ck-actionbar-btn:hover uses --ck-bg-muted (gray) — fine when
-      // a button sits on app background, but reads muddy when stacked
-      // on top of this wrapper's --ck-accent-muted pill. The chrome
-      // sheet replaces the gray with an accent-blended overlay only
-      // for that scope so the hover signal stays in the accent hue.
-      className={
-        isOpen ? "ck-actionbar-group ck-actionbar-group--open" : "ck-actionbar-group"
-      }
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 6,
-        background: isOpen ? "var(--ck-accent-muted)" : "transparent",
-        borderRadius: 999,
-        transition: "background 200ms ease",
-      }}
-    >
-      <ActionBarButton
-        icon={icon}
-        label={label}
-        title={isOpen ? `Close ${label}` : label}
-        variant={headVariant}
-        chevron="right"
-        chevronRotated={isOpen}
-        onClick={onToggle}
-      />
-      <div
-        aria-hidden={!isOpen}
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          overflow: "hidden",
-          maxWidth: isOpen ? 1000 : 0,
-          opacity: isOpen ? 1 : 0,
-          marginLeft: isOpen ? 0 : -6,
-          paddingRight: isOpen ? 4 : 0,
-          pointerEvents: isOpen ? "auto" : "none",
-          transition:
-            "max-width 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, margin-left 240ms cubic-bezier(0.4, 0, 0.2, 1), padding-right 240ms cubic-bezier(0.4, 0, 0.2, 1)",
-        }}
-      >
-        {items.map((it) => (
-          <ActionBarButton
-            key={it.key}
-            icon={it.icon}
-            label={it.label}
-            title={it.title}
-            active={it.active}
-            disabled={it.disabled || !isOpen}
-            variant={it.variant}
-            hint={it.hint}
-            onClick={() => onItemClicked(it)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/actionbar/ActionBarModeHandle.tsx

@@ -1,171 +0,0 @@
-import { forwardRef, type CSSProperties } from "react";
-
-// ActionBarModeHandle — the top-edge peek button that lets a user
-// switch the ActionBar between two content sets ("modes"). Sits
-// above the ActionBar's centred bottom position, showing only a
-// slim 6px sliver at rest; grows on hover / focus to a full 28px
-// tappable disc with a tooltip beneath the pointer.
-//
-// Compose with: `useActionBarMode` hook (or your own state) to swap
-// the items registered via useActionBarItems when the handle fires
-// onClick. Gate visibility on a permission bit (e.g.
-// `document.capabilities.manage`) — passing `visible={false}` hides
-// the handle entirely so non-privileged users never see the
-// affordance.
-//
-// Visual: fixed positioning centred at the bottom of the viewport,
-// stacked ABOVE the ActionBar (which lives at `bottom: 24px +
-// tabbar-height`). The handle sits ~6px above the ActionBar's top
-// edge at rest and animates upward on hover.
-//
-// Positioning contract: consumers may pass `bottom` to override the
-// default 66px (24 gutter + 48 bar height - 6 overlap). Otherwise
-// this matches the default ActionBar's centred bottom placement.
-//
-// Forwards ref to the underlying <button>.
-export interface ActionBarModeHandleProps {
-  /**
-   * Called when the handle is clicked / activated. Consumer should
-   * flip the active mode state here (which drives
-   * useActionBarItems(sourceKey, items) with a different sourceKey).
-   */
-  onClick: () => void;
-  /**
-   * Human-readable label describing what the click will do
-   * ("Switch to manage mode"). Used as both aria-label and the
-   * hover tooltip.
-   */
-  label: string;
-  /**
-   * When false, the handle renders nothing. Consumers wire this to
-   * their capability check (e.g. `capabilities.manage === true`)
-   * so principals without the permission never see the affordance.
-   * Default: true.
-   */
-  visible?: boolean | undefined;
-  /**
-   * Optional bottom offset in px (default: matches the ActionBar's
-   * default centred position — 66px = 24 gutter + 48 bar height - 6
-   * overlap, plus the same tabbar + safe-area terms). Override when
-   * the ActionBar is docked non-default.
-   */
-  bottom?: number | string | undefined;
-  /**
-   * Extra className appended to the handle's root class. Handy for
-   * tests + one-off styling. Default className: `ck-actionbar-handle`.
-   */
-  className?: string | undefined;
-  /**
-   * Extra inline styles merged onto the root. Only use for one-off
-   * z-index / offset overrides; the visual language should stay
-   * consistent across surfaces.
-   */
-  style?: CSSProperties | undefined;
-}
-
-const HANDLE_REST_WIDTH = 44;
-const HANDLE_REST_HEIGHT = 6;
-const HANDLE_HOVER_WIDTH = 68;
-const HANDLE_HOVER_HEIGHT = 24;
-// Overlap the ActionBar's top edge by 4px so the handle looks
-// tethered to the bar rather than floating above it.
-const HANDLE_BOTTOM_DEFAULT = "calc(24px + 48px - 4px + var(--ck-tabbar-height, 0px) + env(safe-area-inset-bottom, 0px))";
-
-export const ActionBarModeHandle = forwardRef<HTMLButtonElement, ActionBarModeHandleProps>(
-  function ActionBarModeHandle(
-    {
-      onClick,
-      label,
-      visible = true,
-      bottom,
-      className,
-      style,
-    },
-    ref,
-  ) {
-    if (!visible) return null;
-    const resolvedBottom =
-      typeof bottom === "number"
-        ? `${bottom}px`
-        : typeof bottom === "string"
-          ? bottom
-          : HANDLE_BOTTOM_DEFAULT;
-    return (
-      <button
-        ref={ref}
-        type="button"
-        onClick={onClick}
-        aria-label={label}
-        title={label}
-        className={`ck-actionbar-handle${className ? ` ${className}` : ""}`}
-        style={{
-          position: "fixed",
-          left: "50%",
-          bottom: resolvedBottom,
-          transform: "translateX(-50%)",
-          // Rest state: narrow slim strip at the top edge of the bar.
-          width: `var(--ck-actionbar-handle-w, ${HANDLE_REST_WIDTH}px)`,
-          height: `var(--ck-actionbar-handle-h, ${HANDLE_REST_HEIGHT}px)`,
-          padding: 0,
-          margin: 0,
-          border: 0,
-          borderRadius: 999,
-          background: "var(--ck-accent, #4f46e5)",
-          color: "var(--ck-accent-fg, #fff)",
-          fontSize: 11,
-          fontWeight: 500,
-          letterSpacing: 0.2,
-          lineHeight: 1,
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          cursor: "pointer",
-          // Sit above the ActionBar (z-index 80 in ActionBar.tsx).
-          zIndex: 85,
-          boxShadow: "0 2px 8px rgba(0,0,0,0.14)",
-          transition:
-            "width 220ms cubic-bezier(0.34, 1.56, 0.64, 1)," +
-            "height 220ms cubic-bezier(0.34, 1.56, 0.64, 1)," +
-            "box-shadow 220ms ease-out",
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          ...style,
-        }}
-        // Inline hover/focus expansion — pure CSS on the same element
-        // via CSSProperties gives us the animation without a global
-        // stylesheet dependency in the kit.
-        onMouseEnter={(e) => {
-          const el = e.currentTarget;
-          el.style.setProperty("--ck-actionbar-handle-w", `${HANDLE_HOVER_WIDTH}px`);
-          el.style.setProperty("--ck-actionbar-handle-h", `${HANDLE_HOVER_HEIGHT}px`);
-          el.style.boxShadow = "0 4px 14px rgba(0,0,0,0.22)";
-        }}
-        onMouseLeave={(e) => {
-          const el = e.currentTarget;
-          el.style.setProperty("--ck-actionbar-handle-w", `${HANDLE_REST_WIDTH}px`);
-          el.style.setProperty("--ck-actionbar-handle-h", `${HANDLE_REST_HEIGHT}px`);
-          el.style.boxShadow = "0 2px 8px rgba(0,0,0,0.14)";
-        }}
-        onFocus={(e) => {
-          const el = e.currentTarget;
-          el.style.setProperty("--ck-actionbar-handle-w", `${HANDLE_HOVER_WIDTH}px`);
-          el.style.setProperty("--ck-actionbar-handle-h", `${HANDLE_HOVER_HEIGHT}px`);
-          el.style.boxShadow = "0 4px 14px rgba(0,0,0,0.22)";
-        }}
-        onBlur={(e) => {
-          const el = e.currentTarget;
-          el.style.setProperty("--ck-actionbar-handle-w", `${HANDLE_REST_WIDTH}px`);
-          el.style.setProperty("--ck-actionbar-handle-h", `${HANDLE_REST_HEIGHT}px`);
-          el.style.boxShadow = "0 2px 8px rgba(0,0,0,0.14)";
-        }}
-      >
-        {/* Only visible when expanded — CSS `overflow: hidden` on the
-            button clips it at rest. Kept as visible text (not aria-
-            hidden) so screen readers can still hear it via title. */}
-        <span aria-hidden style={{ opacity: 0.95 }}>
-          {label}
-        </span>
-      </button>
-    );
-  },
-);

package/src/actionbar/ActionBarProvider.tsx

@@ -1,91 +0,0 @@
-import { useCallback, useMemo, useState, type ReactNode } from "react";
-import { ActionBarContext } from "./actionbar-context";
-import type { ActionBarItem, ActionBarCategories, ActionBarStatusDot, ActionBarPanelMeta } from "./types";
-
-// Provider for the action-bar registry + expansion state +
-// category catalog. Mount once near the app root, inside the
-// router so consumer hooks (useNavigate etc.) work but outside
-// any per-route boundary.
-
-export interface ActionBarProviderProps {
-  children: ReactNode;
-  // Declare the categories your app uses, keyed by category id.
-  // Items with `category: "create"` look up { label, icon } here
-  // for the group head. If you don't declare a category that an
-  // item references, that item still renders — it just falls
-  // back to its own label as the group head.
-  categories?: ActionBarCategories;
-}
-
-export function ActionBarProvider({
-  children,
-  categories = {},
-}: ActionBarProviderProps) {
-  const [sources, setSources] = useState<Record<string, ActionBarItem[]>>({});
-  const [expandedKey, setExpandedKey] = useState<string | null>(null);
-  const [statusDot, setStatusDot] = useState<ActionBarStatusDot | null>(null);
-  const [panel, setPanel] = useState<ActionBarPanelMeta | null>(null);
-  const [panelHost, setPanelHost] = useState<HTMLDivElement | null>(null);
-  const [toastActive, setToastActive] = useState(false);
-  const [toastHost, setToastHost] = useState<HTMLDivElement | null>(null);
-
-  const register = useCallback((sourceKey: string, items: ActionBarItem[]) => {
-    setSources((prev) => {
-      const cur = prev[sourceKey];
-      if (cur && cur.length === items.length && cur.every((it, i) => it === items[i])) {
-        return prev;
-      }
-      return { ...prev, [sourceKey]: items };
-    });
-  }, []);
-
-  const unregister = useCallback((sourceKey: string) => {
-    setSources((prev) => {
-      if (!(sourceKey in prev)) return prev;
-      const next = { ...prev };
-      delete next[sourceKey];
-      return next;
-    });
-  }, []);
-
-  // `__builtins__` pinned to front. Convention used by consumers
-  // that want a stable "Create" group regardless of which page
-  // registered first.
-  const items = useMemo(() => {
-    const all: ActionBarItem[] = [];
-    if (sources["__builtins__"]) all.push(...sources["__builtins__"]);
-    for (const [key, list] of Object.entries(sources)) {
-      if (key === "__builtins__") continue;
-      all.push(...list);
-    }
-    return all;
-  }, [sources]);
-
-  const value = useMemo(
-    () => ({
-      register,
-      unregister,
-      items,
-      categories,
-      expandedKey,
-      setExpandedKey,
-      statusDot,
-      setStatusDot,
-      panel,
-      setPanel,
-      panelHost,
-      setPanelHost,
-      toastActive,
-      setToastActive,
-      toastHost,
-      setToastHost,
-    }),
-    [register, unregister, items, categories, expandedKey, statusDot, panel, panelHost, toastActive, toastHost],
-  );
-
-  return (
-    <ActionBarContext.Provider value={value}>
-      {children}
-    </ActionBarContext.Provider>
-  );
-}

package/src/actionbar/actionbar-context.ts

@@ -1,45 +0,0 @@
-import { createContext } from "react";
-import type { ActionBarItem, ActionBarCategories, ActionBarStatusDot, ActionBarPanelMeta } from "./types";
-
-// Registry + expansion + category catalog + status-dot slot. Items are
-// pushed by pages through useActionBarItems(); the status dot is
-// pushed by a separate hook (useActionBarStatusDot) because it's
-// bar-intrinsic chrome, not page-level content. expandedKey tracks
-// which group is currently open (one at a time).
-
-export interface ActionBarContextValue {
-  register: (sourceKey: string, items: ActionBarItem[]) => void;
-  unregister: (sourceKey: string) => void;
-  // Flat list assembled from all sources, with `__builtins__`
-  // pinned to the front (so consumer-declared "Create" items
-  // always land before page contributions).
-  items: ActionBarItem[];
-  // Static category catalog from the provider — `{ create: {label, icon}, ... }`.
-  categories: ActionBarCategories;
-  // Which group head is currently expanded. null = none.
-  expandedKey: string | null;
-  setExpandedKey: (key: string | null) => void;
-  // Bar-intrinsic right-edge status indicator. null when no consumer
-  // has registered one. Last call to setStatusDot wins.
-  statusDot: ActionBarStatusDot | null;
-  setStatusDot: (dot: ActionBarStatusDot | null) => void;
-  // Bar-intrinsic popover slot (design#13). useActionBarPanel
-  // registers META only (open/onOpenChange/width/ariaLabel); the bar
-  // renders an empty themed container and publishes its DOM node via
-  // panelHost, into which the hook PORTALS the consumer's content.
-  // Content never enters context state — a fresh JSX identity per
-  // consumer render would otherwise re-render-loop through setPanel.
-  panel: ActionBarPanelMeta | null;
-  setPanel: (panel: ActionBarPanelMeta | null) => void;
-  panelHost: HTMLDivElement | null;
-  setPanelHost: (el: HTMLDivElement | null) => void;
-  // Transient bubble above the bar (completion toasts etc.) — same
-  // portal-host pattern: consumers register only "active", content
-  // portals into toastHost.
-  toastActive: boolean;
-  setToastActive: (active: boolean) => void;
-  toastHost: HTMLDivElement | null;
-  setToastHost: (el: HTMLDivElement | null) => void;
-}
-
-export const ActionBarContext = createContext<ActionBarContextValue | null>(null);

package/src/actionbar/index.ts

@@ -1,28 +0,0 @@
-export { ActionBarProvider } from "./ActionBarProvider";
-export type { ActionBarProviderProps } from "./ActionBarProvider";
-export { ActionBar } from "./ActionBar";
-export type { ActionBarProps } from "./ActionBar";
-export { ActionBarButton } from "./ActionBarButton";
-export type { ActionBarButtonProps } from "./ActionBarButton";
-export { useActionBarItems, useActionBarItemsContext } from "./useActionBarItems";
-export { useActionBarStatusDot } from "./useActionBarStatusDot";
-export { useActionBarPanel } from "./useActionBarPanel";
-export { useActionBarToast } from "./useActionBarToast";
-export { ActionBarModeHandle } from "./ActionBarModeHandle";
-export type { ActionBarModeHandleProps } from "./ActionBarModeHandle";
-export { useActionBarMode } from "./useActionBarMode";
-export type {
-  ActionBarModeConfig,
-  UseActionBarModeOptions,
-  UseActionBarModeResult,
-} from "./useActionBarMode";
-export type {
-  ActionBarItem,
-  ActionBarItemVariant,
-  ActionBarItemSlot,
-  ActionBarStatusDot,
-  ActionBarPanel,
-  ActionBarPanelMeta,
-  ActionBarCategory,
-  ActionBarCategories,
-} from "./types";