@adea-ai/ui 0.60.4 → 0.61.1

package/src/components/layout/page/page.tsx

@@ -0,0 +1,122 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * PageHeader.
+ *
+ * The title block at the top of a scrollable page: where the user is, what this
+ * page is, and the actions that apply to the whole of it.
+ *
+ * The action slot is single and singular on purpose. A page header with four
+ * equally-weighted buttons has not decided what the page is for; the design
+ * system can only make that look tidy, not make it true. Put the primary action
+ * here and the rest in an overflow menu or on the rows they belong to.
+ */
+export function PageHeader(props: ComponentProps<'header'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <header
+      data-slot="page-header"
+      class={cn(
+        'flex shrink-0 flex-wrap items-start justify-between gap-x-4 gap-y-3 px-5 pt-5 pb-4',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function PageHeaderContent(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="page-header-content"
+      class={cn('flex min-w-0 flex-col gap-1', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function PageHeaderTitle(props: ComponentProps<'h1'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <h1
+      data-slot="page-header-title"
+      class={cn('text-xl font-semibold tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function PageHeaderDescription(props: ComponentProps<'p'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <p
+      data-slot="page-header-description"
+      class={cn('max-w-prose text-sm text-muted-foreground text-pretty', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/** The trailing action group. One primary action, at most. */
+export function PageHeaderActions(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="page-header-actions"
+      class={cn('flex shrink-0 items-center gap-2', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * A section inside a page, with an optional title and a description.
+ * Sections are separated by space rather than by rules — a page of boxed
+ * sections reads as a dashboard, and most pages are not one.
+ */
+export function PageSection(
+  props: ComponentProps<'section'> & { title?: string; description?: string; action?: JSX.Element }
+) {
+  const [local, rest] = splitProps(props, ['class', 'title', 'description', 'action', 'children'])
+
+  return (
+    <section
+      data-slot="page-section"
+      class={cn('flex flex-col gap-3 px-5 py-4', local.class)}
+      {...rest}
+    >
+      <Show when={local.title}>
+        <div class="flex items-baseline justify-between gap-3">
+          <div class="flex min-w-0 flex-col gap-0.5">
+            <h2 class="text-base font-semibold tracking-tight">{local.title}</h2>
+            <Show when={local.description}>
+              <p class="max-w-prose text-sm text-muted-foreground text-pretty">
+                {local.description}
+              </p>
+            </Show>
+          </div>
+          <Show when={local.action}>
+            <div class="flex shrink-0 items-center gap-2">{local.action}</div>
+          </Show>
+        </div>
+      </Show>
+      {local.children}
+    </section>
+  )
+}
+
+/** The scroll container a page's header and sections sit in. */
+export function Page(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="page"
+      class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', local.class)}
+      {...rest}
+    />
+  )
+}

package/src/components/layout/panel/index.ts

@@ -0,0 +1,12 @@
+export {
+  Panel,
+  PanelActions,
+  PanelBody,
+  PanelCard,
+  PanelDescription,
+  PanelFooter,
+  PanelHeader,
+  PanelPlaceholder,
+  PanelTitle,
+  PanelToolbar,
+} from './panel'

package/src/components/layout/panel/panel.tsx

@@ -0,0 +1,166 @@
+import type { ComponentProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Panel.
+ *
+ * A titled region inside the content area — an editor, an inspector, a list, a
+ * terminal. It is the third level of surface after the shell and the sidebar,
+ * and like them its parts are fixed: a header with a title and a toolbar, a
+ * scrolling body, an optional footer.
+ *
+ * The body scrolls and the header does not, which is the whole reason this is a
+ * component. A panel whose header scrolls away loses the name of what the user
+ * is looking at, and every hand-built panel gets this wrong at least once.
+ *
+ * Component props are `title`-agnostic on purpose: the panel does not decide
+ * how large its title is, so an inspector's title and an editor's title agree.
+ */
+export function Panel(props: ComponentProps<'section'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <section
+      data-slot="panel"
+      class={cn(
+        'bg-surface flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+/** A panel whose surface is raised, for a panel floating over the canvas. */
+export function PanelCard(props: ComponentProps<'section'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <Panel
+      class={cn(
+        'bg-card m-2 h-[calc(100%-1rem)] rounded-xl border border-border shadow-xs',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function PanelHeader(props: ComponentProps<'header'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <header
+      data-slot="panel-header"
+      class={cn(
+        'flex min-h-(--topbar-height) shrink-0 items-center gap-2 border-b border-border px-3',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function PanelTitle(props: ComponentProps<'h2'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <h2
+      data-slot="panel-title"
+      class={cn('min-w-0 truncate text-sm font-semibold tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function PanelDescription(props: ComponentProps<'p'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <p
+      data-slot="panel-description"
+      class={cn('truncate text-xs text-muted-foreground', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/** The trailing group in a panel header: buttons, tabs, a menu. */
+export function PanelActions(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="panel-actions"
+      class={cn('ms-auto flex shrink-0 items-center gap-1', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/** A secondary row under the header: a toolbar, tabs, a filter bar. */
+export function PanelToolbar(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="panel-toolbar"
+      class={cn(
+        'flex min-h-9 shrink-0 items-center gap-1.5 border-b border-border px-2',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * The scrolling region.
+ *
+ * `min-h-0` is required and easy to omit: a flex child's default `min-height`
+ * is its content, so without it a long body pushes the panel past its parent
+ * instead of scrolling.
+ */
+export function PanelBody(
+  props: ComponentProps<'div'> & { /** Remove the default padding. */ bare?: boolean }
+) {
+  const [local, rest] = splitProps(props, ['class', 'bare'])
+
+  return (
+    <div
+      data-slot="panel-body"
+      class={cn('min-h-0 flex-1 overflow-y-auto', { 'p-3': !local.bare }, local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function PanelFooter(props: ComponentProps<'footer'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <footer
+      data-slot="panel-footer"
+      class={cn('flex shrink-0 items-center gap-2 border-t border-border px-3 py-2', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * The centered message a panel shows when it has no content. Distinct from
+ * `Empty`, which is a full-page state with room for media and actions; this is
+ * the in-pane version, sized for a column.
+ */
+export function PanelPlaceholder(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <div
+      data-slot="panel-placeholder"
+      class={cn(
+        'text-muted-foreground flex h-full min-h-32 flex-col items-center justify-center gap-2 p-6 text-center text-sm',
+        local.class
+      )}
+      {...rest}
+    >
+      <Show when={local.children}>{local.children}</Show>
+    </div>
+  )
+}

package/src/components/layout/side-rail/index.ts

@@ -0,0 +1,12 @@
+export {
+  SideRail,
+  SideRailButton,
+  SideRailContent,
+  SideRailFooter,
+  SideRailHeader,
+  SideRailItem,
+  SideRailSection,
+  type SideRailItemProps,
+  type SideRailProps,
+} from './side-rail'
+export { useSideRail } from './side-rail-context'

package/src/components/layout/side-rail/side-rail-context.ts

@@ -0,0 +1,42 @@
+import { createContext, createMemo, useContext } from 'solid-js'
+
+/**
+ * The side rail's collapse state, shared with its items.
+ *
+ * A rail has two forms — icon-only and labelled — and every item has to agree
+ * about which is showing. Threading a `collapsed` prop through each item would
+ * work in a demo and break in practice, because an app composes its rail from
+ * several components (a brand, a section, a footer) and would have to remember
+ * to pass the flag to all of them.
+ *
+ * Context makes the rail's form a property of the rail rather than an argument
+ * every caller repeats. The items still decide what to *do* about it: a hidden
+ * label must become a tooltip, not simply disappear.
+ */
+type SideRailContextValue = {
+  collapsed: () => boolean
+  /** Width the rail occupies, so a layout can reserve it without measuring. */
+  width: () => string
+}
+
+const SideRailContext = createContext<SideRailContextValue>()
+
+export function useSideRail(): SideRailContextValue {
+  const value = useContext(SideRailContext)
+  if (!value) {
+    throw new Error('useSideRail must be called inside a <SideRail>.')
+  }
+  return value
+}
+
+export { SideRailContext }
+
+export function createSideRailValue(
+  collapsed: () => boolean,
+  width: () => string
+): SideRailContextValue {
+  return {
+    collapsed: createMemo(() => collapsed()),
+    width,
+  }
+}