@exegia/corpora-ui 0.22.0 → 0.24.0

package/src/components/blocks/shell/shell-layout.tsx

@@ -40,7 +40,12 @@ export function ShellLayout({
     <AnimatedPanelProvider
       {...panelControlProps}
       defaultOpen={initialOpen}
-      className={cn("relative h-full min-h-0 px-2 pb-2", className, background)}
+      className={cn(
+        "relative h-full min-h-0 px-2 pb-2",
+        variant === "web" && "pt-2",
+        className,
+        background
+      )}
       style={{
         paddingTop: variant === "desktop" ? TITLE_BAR_HEIGHT : 0,
       }}
@@ -59,7 +64,7 @@ export function ShellLayout({
       <AnimatedPanelInset>
         <header className="flex h-12 flex-row! items-center justify-between gap-2 border-b px-2">
           {panels?.left?.component && (
-            <div className="flex min-w-0 flex-1 items-center gap-2">
+            <div className="flex min-w-0 shrink-0 items-center justify-start gap-2">
               <AnimatedPanelTrigger side="left">
                 <MotionIcon name="PanelLeft" size={24} animation="press" />
               </AnimatedPanelTrigger>
@@ -69,7 +74,7 @@ export function ShellLayout({
             <div className="flex w-full flex-1 items-center">{header}</div>
           )}
           {panels?.right?.component && (
-            <div className="flex flex-1 items-center justify-end gap-2">
+            <div className="flex w-full shrink items-center justify-end gap-2">
               <AnimatedPanelTrigger aria-label="Toggle panel" side="right">
                 <MotionIcon
                   className="opacity-70"

package/src/components/docs/component-preview.tsx

@@ -12,12 +12,17 @@ export function ComponentPreview({ entry }: { entry: RegistryEntry }) {
   const Demo = entry.preview
 
   return (
-    <BrowserFrame title={entry.name} titleStyle="hidden" className="min-h-60">
+    <BrowserFrame
+      title={entry.name}
+      titleStyle={entry.titleStyle ?? "expanded"}
+    >
       {Demo ? (
         <React.Suspense
           fallback={<p className="text-sm text-muted-foreground">Loading…</p>}
         >
-          <Demo />
+          <div className="relative h-full min-h-96 w-full">
+            <Demo />
+          </div>
         </React.Suspense>
       ) : (
         <p className="text-sm text-muted-foreground">

package/src/components/docs/demo-controls.tsx

@@ -5,9 +5,11 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
- SelectContent} from "@/components/ui/select"
+  SelectContent,
+} from "@/components/ui/select"
 import { Field, FieldLabel } from "@/components/ui/field"
-import { Card , CardContent} from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card"
+import { Switch } from "../ui/switch"
 
 /**
  * Lightweight playground controls for registry demos — docs-only, never
@@ -28,22 +30,25 @@ export function DemoSelect<T extends string>({
   const items = options.map((option) => ({ label: option, value: option }))
 
   return (
-    <Field className="flex flex-col gap-1 text-xs text-muted-foreground">
-      {label && <FieldLabel>{label}</FieldLabel>}
+    <Field className="ml-0 flex w-full flex-1 flex-row items-center justify-between text-muted-foreground">
+      {label && <FieldLabel className="ml-0 capitalize">{label}</FieldLabel>}
       <Select
         items={items}
         onValueChange={(next) => onChange(next as T)}
         value={value}
       >
-        <SelectTrigger className="h-7 min-w-0 text-xs capitalize rounded-sm " size="sm">
+        <SelectTrigger
+          className="h-7 min-w-0 rounded-sm text-xs capitalize"
+          size="sm"
+        >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
-            {items.map((item) => (
-              <SelectItem key={item.value} value={item.value}>
-                {item.label}
-              </SelectItem>
-            ))}
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
         </SelectContent>
       </Select>
     </Field>
@@ -95,14 +100,15 @@ export function DemoToggle({
   onChange: (checked: boolean) => void
 }) {
   return (
-    <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={(event) => onChange(event.target.checked)}
-      />
-      {label}
-    </label>
+    <Field className="ml-0 w-full">
+      <FieldLabel className="ml-0 w-full justify-between capitalize">
+        {label}
+        <Switch
+          checked={checked}
+          onCheckedChange={(value) => onChange(value)}
+        />
+      </FieldLabel>
+    </Field>
   )
 }
 
@@ -118,13 +124,16 @@ export function DemoStage({
 }) {
   return (
     <div className="relative flex w-full flex-col items-center">
-      {controls && <Card className="absolute top-3 right-3 z-20 rounded-xl shadow-lg">
-        <CardContent className="flex flex-row items-center gap-x-2">{controls}</CardContent>
-      </Card>}
+      {controls && (
+        <Card className="absolute top-3 right-3 z-20 min-w-48 rounded-lg shadow-lg">
+          <CardContent className="flex flex-col items-start gap-2">
+            {controls}
+          </CardContent>
+        </Card>
+      )}
       <div
         className={
-          canvasClassName ??
-          "flex min-h-24 max-h-32 w-full items-center justify-center rounded-lg"
+          canvasClassName ?? "flex min-h-24 w-full items-center justify-center"
         }
       >
         {children}

package/src/components/ui/switch.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+export function Switch({
+  className,
+  ...props
+}: SwitchPrimitive.Root.Props): React.ReactElement {
+  return (
+    <SwitchPrimitive.Root
+      className={cn(
+        "inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(5)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-disabled:cursor-not-allowed data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(4)]",
+        className,
+      )}
+      data-slot="switch"
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          "pointer-events-none block aspect-square h-full origin-left in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110 in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]",
+        )}
+        data-slot="switch-thumb"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { SwitchPrimitive };

package/src/index.ts

@@ -60,6 +60,7 @@ export type {
 
 // blocks
 export * from "./components/blocks/auth/auth-shell"
+export * from "./components/blocks/auth/auth-flow-block"
 export * from "./components/blocks/auth/auth-state"
 export * from "./components/blocks/auth/code-auth-block"
 export * from "./components/blocks/auth/forgot-password-block"

package/dist-lib/components/blocks/scaffold/use-panel-visibility.d.ts

@@ -1,19 +0,0 @@
-export interface PanelVisibility {
-    /** How many panels currently fit side by side (1..capacity cap). */
-    panelCapacity: number;
-    /** Ids of panels currently hidden (auto + user), for tabs to reflect. */
-    hiddenPanelIds: readonly string[];
-    isPanelHidden: (id: string) => boolean;
-    togglePanelVisibility: (id: string) => void;
-    /** Id of the panel whose tab is hovered — the canvas spotlights it. */
-    hoveredPanelId: string | null;
-    /** @internal Tabs report pointer enter/leave on their label. */
-    setPanelHovered: (id: string, hovered: boolean) => void;
-    /** @internal Canvas reports its ordered panel ids each render. */
-    registerPanelIds: (ids: readonly string[]) => void;
-    /** @internal Canvas reports its measured width. */
-    setCanvasWidth: (width: number) => void;
-}
-/** Owns which panels are hidden as the canvas gains and loses room.
- * Lives in `Scaffold.Root`; Canvas and Tab reach it through context. */
-export declare function usePanelVisibility(): PanelVisibility;

package/src/components/blocks/scaffold/use-panel-visibility.ts

@@ -1,180 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { SCAFFOLD_PANEL_CAPACITY } from "./constants"
-import { getPanelCapacity } from "./utils"
-
-/**
- * Internal bookkeeping for responsive panel hiding.
- *
- * - `visibleOrder`: visible panel ids, least-recently-activated first — the
- *   front is what capacity pressure evicts next.
- * - `autoHidden`: panels the scaffold hid because the canvas shrank, most
- *   recent last. They return on their own when room comes back.
- * - `userHidden`: panels hidden by a tab press. They stay hidden until the
- *   tab is pressed again, however wide the canvas grows.
- */
-interface PanelVisibilityState {
-  visibleOrder: string[]
-  autoHidden: string[]
-  userHidden: string[]
-}
-
-const EMPTY_STATE: PanelVisibilityState = {
-  visibleOrder: [],
-  autoHidden: [],
-  userHidden: [],
-}
-
-/** Fold the registered ids and current capacity into a settled state:
- * prune departed panels, admit new ones, evict the least-recently-activated
- * visible panels past capacity, and restore auto-hidden ones when room
- * returns. Returns `prev` untouched when nothing changes. */
-function reconcile(
-  prev: PanelVisibilityState,
-  ids: readonly string[],
-  capacity: number
-): PanelVisibilityState {
-  const known = new Set(ids)
-  const visibleOrder = prev.visibleOrder.filter((id) => known.has(id))
-  const autoHidden = prev.autoHidden.filter((id) => known.has(id))
-  const userHidden = prev.userHidden.filter((id) => known.has(id))
-
-  const tracked = new Set([...visibleOrder, ...autoHidden, ...userHidden])
-  for (const id of ids) if (!tracked.has(id)) visibleOrder.push(id)
-
-  while (visibleOrder.length > capacity && visibleOrder.length > 1) {
-    autoHidden.push(visibleOrder.shift() as string)
-  }
-  while (visibleOrder.length < capacity && autoHidden.length > 0) {
-    visibleOrder.push(autoHidden.pop() as string)
-  }
-
-  const unchanged =
-    visibleOrder.join(" ") === prev.visibleOrder.join(" ") &&
-    autoHidden.join(" ") === prev.autoHidden.join(" ") &&
-    userHidden.join(" ") === prev.userHidden.join(" ")
-  return unchanged ? prev : { visibleOrder, autoHidden, userHidden }
-}
-
-export interface PanelVisibility {
-  /** How many panels currently fit side by side (1..capacity cap). */
-  panelCapacity: number
-  /** Ids of panels currently hidden (auto + user), for tabs to reflect. */
-  hiddenPanelIds: readonly string[]
-  isPanelHidden: (id: string) => boolean
-  togglePanelVisibility: (id: string) => void
-  /** Id of the panel whose tab is hovered — the canvas spotlights it. */
-  hoveredPanelId: string | null
-  /** @internal Tabs report pointer enter/leave on their label. */
-  setPanelHovered: (id: string, hovered: boolean) => void
-  /** @internal Canvas reports its ordered panel ids each render. */
-  registerPanelIds: (ids: readonly string[]) => void
-  /** @internal Canvas reports its measured width. */
-  setCanvasWidth: (width: number) => void
-}
-
-/** Owns which panels are hidden as the canvas gains and loses room.
- * Lives in `Scaffold.Root`; Canvas and Tab reach it through context. */
-export function usePanelVisibility(): PanelVisibility {
-  const [panelIds, setPanelIds] = React.useState<readonly string[]>([])
-  const [measuredCapacity, setMeasuredCapacity] = React.useState<number | null>(
-    null
-  )
-  const [state, setState] = React.useState<PanelVisibilityState>(EMPTY_STATE)
-  const [hoveredPanelId, setHoveredPanelId] = React.useState<string | null>(
-    null
-  )
-
-  const panelCapacity = measuredCapacity ?? SCAFFOLD_PANEL_CAPACITY
-
-  const registerPanelIds = React.useCallback((ids: readonly string[]) => {
-    setPanelIds((prev) =>
-      prev.length === ids.length && prev.every((id, i) => id === ids[i])
-        ? prev
-        : [...ids]
-    )
-  }, [])
-
-  // Store the derived capacity, not the raw width — resize storms only
-  // re-render the tree when a panel actually gains or loses room.
-  const setCanvasWidth = React.useCallback((width: number) => {
-    setMeasuredCapacity(getPanelCapacity(width))
-  }, [])
-
-  // Settle during render (the derive-state-while-rendering pattern): ids
-  // and capacity arrive as state, so an effect here would only add a
-  // cascading render after each change.
-  const settled = reconcile(state, panelIds, panelCapacity)
-  if (settled !== state) setState(settled)
-
-  const togglePanelVisibility = React.useCallback(
-    (id: string) => {
-      setState((prev) => {
-        if (!panelIds.includes(id)) return prev
-        const hidden =
-          prev.autoHidden.includes(id) || prev.userHidden.includes(id)
-        if (!hidden && prev.visibleOrder.length <= 1) return prev
-
-        const next: PanelVisibilityState = hidden
-          ? {
-              // Showing: newest activation — reconcile evicts the oldest
-              // visible panel if the canvas can't fit one more.
-              visibleOrder: [...prev.visibleOrder, id],
-              autoHidden: prev.autoHidden.filter((other) => other !== id),
-              userHidden: prev.userHidden.filter((other) => other !== id),
-            }
-          : {
-              visibleOrder: prev.visibleOrder.filter((other) => other !== id),
-              autoHidden: prev.autoHidden,
-              userHidden: [...prev.userHidden, id],
-            }
-        return reconcile(next, panelIds, panelCapacity)
-      })
-    },
-    [panelIds, panelCapacity]
-  )
-
-  // Leaving clears only its own id — a tab that unmounts mid-hover must
-  // not wipe out a hover the pointer has already moved on to.
-  const setPanelHovered = React.useCallback((id: string, hovered: boolean) => {
-    setHoveredPanelId((prev) => {
-      if (hovered) return id
-      return prev === id ? null : prev
-    })
-  }, [])
-
-  const hiddenPanelIds = React.useMemo(
-    () => [...settled.autoHidden, ...settled.userHidden],
-    [settled]
-  )
-
-  const isPanelHidden = React.useCallback(
-    (id: string) => hiddenPanelIds.includes(id),
-    [hiddenPanelIds]
-  )
-
-  return React.useMemo(
-    () => ({
-      panelCapacity,
-      hiddenPanelIds,
-      isPanelHidden,
-      togglePanelVisibility,
-      hoveredPanelId,
-      setPanelHovered,
-      registerPanelIds,
-      setCanvasWidth,
-    }),
-    [
-      panelCapacity,
-      hiddenPanelIds,
-      isPanelHidden,
-      togglePanelVisibility,
-      hoveredPanelId,
-      setPanelHovered,
-      registerPanelIds,
-      setCanvasWidth,
-    ]
-  )
-}