@polderlabs/bizar 7.0.2 → 8.0.0

package/bizar-dash/src/web/v8/ui/memory/MemoryVault.tsx

@@ -0,0 +1,144 @@
+import { type ReactNode } from 'react';
+import { FileText, Hash } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+import { Badge } from '../data/Badge.js';
+
+/**
+ * MemoryVault — list of memory entries (memos) grouped by scope.
+ *
+ * PLAN.md: memos are the durable cross-session notes the harness writes
+ * down. Scopes: `project` (committed to repo) vs `global` (user-wide).
+ * Each entry: content (truncated to 3 lines), tags, last-updated time,
+ * scope badge.
+ */
+
+export type MemoryScope = 'project' | 'global';
+
+export interface MemoryEntry {
+  id: string;
+  content: string;
+  tags?: readonly string[];
+  scope: MemoryScope;
+  /** Relative time label ("3 days ago", "Just now"). */
+  updatedAt: string;
+}
+
+export interface MemoryVaultProps {
+  entries: readonly MemoryEntry[];
+  /** Optional click handler — opens memo detail. */
+  onOpen?: (entry: MemoryEntry) => void;
+  /** Optional empty state. */
+  empty?: ReactNode;
+  className?: string;
+}
+
+const SCOPE_LABEL: Record<MemoryScope, string> = {
+  project: 'Project',
+  global: 'Global',
+};
+
+const SCOPE_TONE: Record<MemoryScope, 'accent' | 'info'> = {
+  project: 'accent',
+  global: 'info',
+};
+
+export function MemoryVault(props: MemoryVaultProps) {
+  const { entries, onOpen, empty, className } = props;
+
+  if (entries.length === 0 && empty !== undefined) {
+    return <>{empty}</>;
+  }
+
+  return (
+    <div className={cx('v8-memory-vault', className)}>
+      {entries.map((entry) => (
+        <button
+          type="button"
+          key={entry.id}
+          onClick={() => onOpen?.(entry)}
+          className={cx('v8-memory-vault__item', `v8-memory-vault__item--${entry.scope}`)}
+          style={{
+            display: 'block',
+            width: '100%',
+            padding: 'var(--space-3) var(--space-4)',
+            background: 'var(--surface-1)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius)',
+            textAlign: 'left',
+            cursor: onOpen !== undefined ? 'pointer' : 'default',
+            font: 'inherit',
+            color: 'inherit',
+            marginBottom: 'var(--space-2)',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 'var(--space-2)',
+              marginBottom: 6,
+            }}
+          >
+            <Badge tone={SCOPE_TONE[entry.scope]} size="sm">
+              {SCOPE_LABEL[entry.scope]}
+            </Badge>
+            <span
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 4,
+                fontSize: 'var(--fs-12)',
+                color: 'var(--fg-subtle)',
+                fontVariantNumeric: 'tabular-nums',
+              }}
+            >
+              <FileText size={12} aria-hidden="true" />
+              {entry.updatedAt}
+            </span>
+          </div>
+          <div
+            style={{
+              fontSize: 'var(--fs-13)',
+              color: 'var(--fg)',
+              lineHeight: 'var(--lh-snug)',
+              display: '-webkit-box',
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+            }}
+          >
+            {entry.content}
+          </div>
+          {entry.tags !== undefined && entry.tags.length > 0 && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                marginTop: 'var(--space-2)',
+                flexWrap: 'wrap',
+              }}
+            >
+              <Hash size={11} aria-hidden="true" style={{ color: 'var(--fg-subtle)' }} />
+              {entry.tags.map((tag) => (
+                <span
+                  key={tag}
+                  style={{
+                    fontSize: 'var(--fs-12)',
+                    color: 'var(--fg-muted)',
+                  }}
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </button>
+      ))}
+      <style>{`
+        .v8-memory-vault__item:hover { border-color: var(--accent); }
+      `}</style>
+    </div>
+  );
+}

package/bizar-dash/src/web/v8/ui/navigation/CommandPalette.tsx

@@ -0,0 +1,224 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import { Command } from 'cmdk';
+import { Search } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * CommandPalette — global ⌘K command palette.
+ *
+ * Built on cmdk. Renders inside a Dialog overlay (caller wires Dialog +
+ * DialogContent + DialogTitle). This component is the palette content.
+ *
+ * Usage:
+ *   <Dialog open={open} onOpenChange={setOpen}>
+ *     <DialogContent title="Command palette">
+ *       <CommandPalette>
+ *         <CommandPaletteGroup heading="Navigation">
+ *           <CommandPaletteItem value="go:tasks">Go to Tasks</CommandPaletteItem>
+ *         </CommandPaletteGroup>
+ *       </CommandPalette>
+ *     </DialogContent>
+ *   </Dialog>
+ *
+ * For triggering the dialog with ⌘K, see `useCommandPaletteHotkey`.
+ */
+
+export interface CommandPaletteProps {
+  query?: string;
+  onQueryChange?: (q: string) => void;
+  placeholder?: string;
+  hideIcon?: boolean;
+  emptyMessage?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+export function CommandPalette(props: CommandPaletteProps) {
+  const {
+    query,
+    onQueryChange,
+    placeholder = 'Type a command or search…',
+    hideIcon,
+    emptyMessage = 'No results found.',
+    children,
+    className,
+  } = props;
+
+  return (
+    <Command
+      className={cx('v8-command', className)}
+      label="Command palette"
+      shouldFilter
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-2)',
+          padding: 'var(--space-3) var(--space-4)',
+          borderBottom: '1px solid var(--border)',
+        }}
+      >
+        {hideIcon !== true && (
+          <Search size={14} aria-hidden="true" style={{ color: 'var(--fg-muted)' }} />
+        )}
+        <Command.Input
+          value={query}
+          onValueChange={onQueryChange}
+          placeholder={placeholder}
+          style={{
+            flex: 1,
+            border: 0,
+            outline: 0,
+            background: 'transparent',
+            fontFamily: 'inherit',
+            fontSize: 'var(--fs-14)',
+            color: 'var(--fg)',
+          }}
+        />
+      </div>
+      <Command.List
+        style={{
+          maxHeight: 'min(60vh, 480px)',
+          overflow: 'auto',
+          padding: 'var(--space-2)',
+        }}
+      >
+        <Command.Empty
+          style={{
+            padding: 'var(--space-6)',
+            textAlign: 'center',
+            color: 'var(--fg-muted)',
+            fontSize: 'var(--fs-13)',
+          }}
+        >
+          {emptyMessage}
+        </Command.Empty>
+        {children}
+      </Command.List>
+      <style>{`
+        [cmdk-item][data-selected='true'] {
+          background: var(--surface-2);
+        }
+        [cmdk-item][data-disabled='true'] {
+          color: var(--fg-subtle);
+        }
+      `}</style>
+    </Command>
+  );
+}
+
+export interface CommandPaletteGroupProps {
+  heading?: ReactNode;
+  children: ReactNode;
+}
+
+export function CommandPaletteGroup({ heading, children }: CommandPaletteGroupProps) {
+  return (
+    <Command.Group
+      style={{ padding: 'var(--space-1) 0' }}
+      heading={typeof heading === 'string' ? heading : undefined}
+    >
+      {heading !== undefined && (
+        <div
+          style={{
+            padding: 'var(--space-2) var(--space-3) var(--space-1)',
+            fontSize: 'var(--fs-12)',
+            fontWeight: 600,
+            color: 'var(--fg-subtle)',
+            textTransform: 'uppercase',
+            letterSpacing: 'var(--tracking-wide)',
+          }}
+        >
+          {heading}
+        </div>
+      )}
+      {children}
+    </Command.Group>
+  );
+}
+
+export interface CommandPaletteItemProps {
+  value: string;
+  children: ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+
+export function CommandPaletteItem({
+  value,
+  children,
+  shortcut,
+  disabled,
+  onSelect,
+}: CommandPaletteItemProps) {
+  return (
+    <Command.Item
+      value={value}
+      disabled={disabled}
+      onSelect={onSelect}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--space-2)',
+        height: 32,
+        padding: '0 var(--space-3)',
+        borderRadius: 'var(--radius-sm)',
+        fontSize: 'var(--fs-13)',
+        color: 'var(--fg)',
+        cursor: disabled === true ? 'not-allowed' : 'pointer',
+        userSelect: 'none',
+      }}
+    >
+      <span style={{ flex: 1, minWidth: 0 }}>{children}</span>
+      {shortcut !== undefined && (
+        <span
+          style={{
+            fontFamily: 'var(--font-mono)',
+            fontSize: 'var(--fs-12)',
+            color: 'var(--fg-muted)',
+          }}
+        >
+          {shortcut}
+        </span>
+      )}
+    </Command.Item>
+  );
+}
+
+/** Visual separator inside a Command palette list. */
+export function CommandPaletteSeparator() {
+  return (
+    <Command.Separator
+      style={{
+        height: 1,
+        margin: 'var(--space-1) var(--space-3)',
+        background: 'var(--border)',
+      }}
+    />
+  );
+}
+
+/**
+ * useCommandPaletteHotkey — wires ⌘K / Ctrl+K to toggle the palette.
+ * Returns `[open, setOpen]` for the controlling <Dialog open={…} onOpenChange={…}>.
+ * Escape closes the palette.
+ */
+export function useCommandPaletteHotkey(): [boolean, (next: boolean) => void] {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const isMeta = e.metaKey || e.ctrlKey;
+      if (isMeta && (e.key === 'k' || e.key === 'K')) {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      } else if (e.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+  return [open, setOpen];
+}

package/bizar-dash/src/web/v8/ui/navigation/NavLink.tsx

@@ -0,0 +1,81 @@
+import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * NavLink — semantic navigation link with active state.
+ *
+ * Use for sidebar nav items and inline breadcrumb-style navigation.
+ * For command palette actions use CommandPalette (cmdk).
+ *
+ * Active state is controlled via `aria-current="page"` from the parent
+ * (i.e. the router decides). The component only styles what's announced.
+ */
+export interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  children: ReactNode;
+  /** Show left-aligned accent bar when active (sidebar pattern). */
+  showActiveBar?: boolean;
+  /** Left-aligned icon (Lucide icon). */
+  leading?: ReactNode;
+}
+
+export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(function NavLink(props, ref) {
+  const { href, children, showActiveBar, leading, className, style, ...rest } = props;
+  return (
+    <a
+      ref={ref}
+      href={href}
+      className={cx('v8-nav-link', className)}
+      style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--space-2)',
+        padding: '0 var(--space-3)',
+        height: 28,
+        borderRadius: 'var(--radius-sm)',
+        color: 'var(--fg-muted)',
+        fontSize: 'var(--fs-13)',
+        fontWeight: 500,
+        textDecoration: 'none',
+        transition: 'background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {showActiveBar === true && (
+        <span
+          aria-hidden="true"
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 4,
+            bottom: 4,
+            width: 2,
+            borderRadius: 'var(--radius-pill)',
+            background: 'transparent',
+            transition: 'background var(--motion-fast) var(--ease-out)',
+          }}
+          data-nav-active-bar="true"
+        />
+      )}
+      {leading !== undefined && (
+        <span style={{ width: 14, display: 'inline-flex', color: 'inherit' }}>{leading}</span>
+      )}
+      <span style={{ flex: 1, minWidth: 0 }}>{children}</span>
+      <style>{`
+        .v8-nav-link:hover {
+          background: var(--surface-1);
+          color: var(--fg);
+        }
+        .v8-nav-link[aria-current='page'] {
+          background: var(--surface-1);
+          color: var(--fg);
+        }
+        .v8-nav-link[aria-current='page'] [data-nav-active-bar='true'] {
+          background: var(--accent);
+        }
+      `}</style>
+    </a>
+  );
+});

package/bizar-dash/src/web/v8/ui/navigation/Pagination.tsx

@@ -0,0 +1,164 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Pagination — numbered pages with prev/next/first/last controls.
+ *
+ * Use cases: Tasks list, Activity feed, Memory browser.
+ *
+ * For infinite-scroll lists use ScrollArea + sentinel instead.
+ */
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  page: number;
+  totalPages: number;
+  onChange: (page: number) => void;
+  /** Show first/last buttons (default true). */
+  showEdges?: boolean;
+  /** Sibling count around current page (default 1). */
+  siblingCount?: number;
+}
+
+function buildPages(current: number, total: number, siblings: number): (number | 'ellipsis')[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const left = Math.max(2, current - siblings);
+  const right = Math.min(total - 1, current + siblings);
+  const pages: (number | 'ellipsis')[] = [1];
+  if (left > 2) pages.push('ellipsis');
+  for (let i = left; i <= right; i++) pages.push(i);
+  if (right < total - 1) pages.push('ellipsis');
+  pages.push(total);
+  return pages;
+}
+
+export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(function Pagination(
+  props,
+  ref,
+) {
+  const {
+    page,
+    totalPages,
+    onChange,
+    showEdges = true,
+    siblingCount = 1,
+    className,
+    style,
+    ...rest
+  } = props;
+
+  const pages = buildPages(page, totalPages, siblingCount);
+
+  const go = (next: number) => {
+    if (next >= 1 && next <= totalPages && next !== page) onChange(next);
+  };
+
+  return (
+    <nav
+      ref={ref}
+      className={cx('v8-pagination', className)}
+      aria-label="Pagination"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 2,
+        ...style,
+      }}
+      {...rest}
+    >
+      {showEdges === true && (
+        <PageButton aria-label="First page" disabled={page === 1} onClick={() => go(1)}>
+          <ChevronsLeft size={14} aria-hidden="true" />
+        </PageButton>
+      )}
+      <PageButton aria-label="Previous page" disabled={page === 1} onClick={() => go(page - 1)}>
+        <ChevronLeft size={14} aria-hidden="true" />
+      </PageButton>
+      {pages.map((p, i) =>
+        p === 'ellipsis' ? (
+          <span
+            key={`e-${i}`}
+            style={{ padding: '0 6px', color: 'var(--fg-subtle)', fontSize: 'var(--fs-13)' }}
+            aria-hidden="true"
+          >
+            …
+          </span>
+        ) : (
+          <PageButton
+            key={p}
+            aria-current={p === page ? 'page' : undefined}
+            aria-label={`Page ${p}`}
+            selected={p === page}
+            onClick={() => go(p)}
+          >
+            {p}
+          </PageButton>
+        ),
+      )}
+      <PageButton
+        aria-label="Next page"
+        disabled={page === totalPages}
+        onClick={() => go(page + 1)}
+      >
+        <ChevronRight size={14} aria-hidden="true" />
+      </PageButton>
+      {showEdges === true && (
+        <PageButton
+          aria-label="Last page"
+          disabled={page === totalPages}
+          onClick={() => go(totalPages)}
+        >
+          <ChevronsRight size={14} aria-hidden="true" />
+        </PageButton>
+      )}
+    </nav>
+  );
+});
+
+interface PageButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'children'> {
+  selected?: boolean;
+  disabled?: boolean;
+  children: ReactNode;
+  'aria-label'?: string;
+  'aria-current'?: 'page';
+}
+
+function PageButton(props: PageButtonProps) {
+  const { selected, disabled, children, className, style, ...rest } = props;
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      className={cx('v8-pagination__btn', selected === true && 'is-selected', className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: 28,
+        height: 28,
+        padding: '0 8px',
+        background: selected === true ? 'var(--accent-soft)' : 'transparent',
+        color: selected === true ? 'var(--accent)' : 'var(--fg-muted)',
+        border: 0,
+        borderRadius: 'var(--radius-sm)',
+        fontSize: 'var(--fs-13)',
+        fontWeight: selected === true ? 600 : 500,
+        cursor: disabled === true ? 'not-allowed' : 'pointer',
+        opacity: disabled === true ? 0.45 : 1,
+        fontFamily: 'inherit',
+        transition: 'background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+      <style>{`
+        .v8-pagination__btn:hover:not(:disabled):not(.is-selected) {
+          background: var(--surface-1);
+          color: var(--fg);
+        }
+      `}</style>
+    </button>
+  );
+}