tembro 1.0.0

package/packages/cli/vendor/src/components/layout/page-header.tsx

@@ -0,0 +1,104 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const pageHeaderVariants = cva("flex flex-col border transition-[background-color,border-color,box-shadow]", {
+  variants: {
+    variant: {
+      default: "border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/5",
+      elevated: "border-border/70 bg-card shadow-[0_1px_2px_rgba(15,23,42,0.06),0_18px_45px_rgba(15,23,42,0.08)] ring-1 ring-foreground/5",
+      outline: "border-border bg-transparent shadow-none",
+      ghost: "border-transparent bg-transparent shadow-none",
+      soft: "border-transparent bg-muted/45 shadow-none",
+    },
+    size: {
+      sm: "gap-3 rounded-[var(--radius-2xl)] p-4",
+      default: "gap-4 rounded-[var(--radius-3xl)] p-5",
+      lg: "gap-5 rounded-[calc(var(--radius-3xl)*1.1)] p-6",
+    },
+    tone: {
+      neutral: "",
+      info: "border-blue-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.03_235)_28%),var(--card))]",
+      success: "border-emerald-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.04_155)_30%),var(--card))]",
+      warning: "border-amber-500/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.05_85)_30%),var(--card))]",
+      danger: "border-destructive/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),var(--destructive)_8%),var(--card))]",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+    tone: "neutral",
+  },
+})
+
+export type PageHeaderProps = React.ComponentProps<"div"> &
+  VariantProps<typeof pageHeaderVariants> & {
+    title?: React.ReactNode
+    description?: React.ReactNode
+    eyebrow?: React.ReactNode
+    breadcrumbs?: React.ReactNode
+    actions?: React.ReactNode
+    meta?: React.ReactNode
+    leading?: React.ReactNode
+    footer?: React.ReactNode
+    sticky?: boolean
+    titleClassName?: string
+    descriptionClassName?: string
+    actionsClassName?: string
+  }
+
+function PageHeader({
+  className,
+  variant,
+  size,
+  tone,
+  title,
+  description,
+  eyebrow,
+  breadcrumbs,
+  actions,
+  meta,
+  leading,
+  footer,
+  sticky = false,
+  titleClassName,
+  descriptionClassName,
+  actionsClassName,
+  children,
+  ...props
+}: PageHeaderProps) {
+  return (
+    <div
+      data-slot="page-header"
+      data-sticky={sticky || undefined}
+      className={cn(
+        pageHeaderVariants({ variant, size, tone }),
+        sticky && "sticky top-0 z-30 bg-background/92 backdrop-blur supports-[backdrop-filter]:bg-background/78",
+        className
+      )}
+      {...props}
+    >
+      {breadcrumbs && <div className="text-sm text-muted-foreground/95">{breadcrumbs}</div>}
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 gap-4">
+          {leading ? <div className="shrink-0">{leading}</div> : null}
+          <div className="min-w-0 space-y-2">
+            {eyebrow && <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-muted-foreground">{eyebrow}</div>}
+            {title && <h1 className={cn("truncate text-3xl font-semibold tracking-[-0.03em] text-foreground", size === "sm" && "text-2xl", size === "lg" && "text-4xl", titleClassName)}>{title}</h1>}
+            {description && <p className={cn("max-w-3xl text-sm leading-7 text-muted-foreground", descriptionClassName)}>{description}</p>}
+            {meta && <div className="pt-1 text-sm text-muted-foreground">{meta}</div>}
+          </div>
+        </div>
+
+        {actions && <div className={cn("flex shrink-0 flex-wrap items-center gap-2.5", actionsClassName)}>{actions}</div>}
+      </div>
+
+      {children}
+      {footer && <div data-slot="page-header-footer" className="border-t border-border/70 pt-4">{footer}</div>}
+    </div>
+  )
+}
+
+export { PageHeader, pageHeaderVariants }

package/packages/cli/vendor/src/components/layout/public.ts

@@ -0,0 +1,8 @@
+export * from "./app-sidebar"
+export * from "./breadcrumbs"
+export * from "./page-container"
+export * from "./section"
+export * from "./section-header"
+export * from "./sidebar-nav"
+export * from "./stack"
+export * from "./sticky-footer-bar"

package/packages/cli/vendor/src/components/layout/section-header.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type SectionHeaderProps = React.ComponentProps<"div"> & {
+  eyebrow?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  meta?: React.ReactNode
+  align?: "start" | "center"
+  size?: "sm" | "default" | "lg"
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+const titleSizeClassName = {
+  sm: "text-xl",
+  default: "text-2xl",
+  lg: "text-3xl",
+}
+
+function SectionHeader({
+  className,
+  eyebrow,
+  title,
+  description,
+  actions,
+  meta,
+  align = "start",
+  size = "default",
+  titleClassName,
+  descriptionClassName,
+  children,
+  ...props
+}: SectionHeaderProps) {
+  return (
+    <div
+      data-slot="section-header"
+      data-align={align}
+      className={cn("flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", align === "center" && "text-center sm:flex-col sm:items-center", className)}
+      {...props}
+    >
+      <div className={cn("min-w-0 space-y-2", align === "center" && "mx-auto max-w-2xl")}> 
+        {eyebrow ? <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">{eyebrow}</p> : null}
+        {title ? <h2 className={cn("font-semibold tracking-[-0.03em] text-foreground", titleSizeClassName[size], titleClassName)}>{title}</h2> : null}
+        {description ? <p className={cn("max-w-3xl text-sm leading-7 text-muted-foreground", descriptionClassName)}>{description}</p> : null}
+        {meta ? <div className="text-sm text-muted-foreground">{meta}</div> : null}
+        {children}
+      </div>
+      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2.5">{actions}</div> : null}
+    </div>
+  )
+}
+
+export { SectionHeader }

package/packages/cli/vendor/src/components/layout/section.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type SectionProps = React.ComponentProps<"section"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  padded?: boolean
+  bordered?: boolean
+}
+
+function Section({ title, description, actions, padded = true, bordered = false, className, children, ...props }: SectionProps) {
+  return (
+    <section data-slot="section" className={cn("grid gap-4", bordered && "rounded-lg border bg-card", padded && bordered && "p-4", className)} {...props}>
+      {(title || description || actions) && (
+        <div data-slot="section-header" className="flex flex-wrap items-start justify-between gap-3">
+          <div className="grid gap-1">
+            {title && <h2 className="text-lg font-semibold tracking-tight text-foreground">{title}</h2>}
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+          </div>
+          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      <div data-slot="section-content">{children}</div>
+    </section>
+  )
+}
+
+export type ToolbarProps = React.ComponentProps<"div"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  filters?: React.ReactNode
+  actions?: React.ReactNode
+}
+
+function Toolbar({ title, description, filters, actions, className, children, ...props }: ToolbarProps) {
+  return (
+    <div data-slot="toolbar" className={cn("flex flex-wrap items-center justify-between gap-3", className)} {...props}>
+      {(title || description) && (
+        <div className="grid gap-0.5">
+          {title && <div className="font-medium text-foreground">{title}</div>}
+          {description && <div className="text-sm text-muted-foreground">{description}</div>}
+        </div>
+      )}
+      {children}
+      {(filters || actions) && (
+        <div className="flex flex-wrap items-center gap-2">
+          {filters}
+          {actions}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export type SplitLayoutProps = React.ComponentProps<"div"> & {
+  aside: React.ReactNode
+  asidePosition?: "start" | "end"
+  asideClassName?: string
+  contentClassName?: string
+}
+
+function SplitLayout({ aside, asidePosition = "end", asideClassName, contentClassName, className, children, ...props }: SplitLayoutProps) {
+  const asideNode = <aside data-slot="split-layout-aside" className={cn("min-w-0", asideClassName)}>{aside}</aside>
+  const contentNode = <main data-slot="split-layout-content" className={cn("min-w-0", contentClassName)}>{children}</main>
+
+  return (
+    <div data-slot="split-layout" className={cn("grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]", asidePosition === "start" && "lg:grid-cols-[320px_minmax(0,1fr)]", className)} {...props}>
+      {asidePosition === "start" ? asideNode : contentNode}
+      {asidePosition === "start" ? contentNode : asideNode}
+    </div>
+  )
+}
+
+export { Section, SplitLayout, Toolbar }

package/packages/cli/vendor/src/components/layout/sidebar-nav.tsx

@@ -0,0 +1,337 @@
+import * as React from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { Tooltip } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+
+export type SidebarNavItem = {
+  key: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  badge?: React.ReactNode
+  href?: string
+  items?: SidebarNavItem[]
+  active?: boolean
+  current?: React.AriaAttributes["aria-current"]
+  disabled?: boolean
+  hidden?: boolean
+  sectionLabel?: React.ReactNode
+  defaultExpanded?: boolean
+  tooltip?: React.ReactNode
+  onSelect?: () => void
+}
+
+export type SidebarNavProps = React.ComponentProps<"nav"> & {
+  items: SidebarNavItem[]
+  collapsed?: boolean
+  scrollable?: boolean
+  tooltipOnCollapsed?: boolean
+  itemClassName?: string
+  activeItemClassName?: string
+  renderItem?: (item: SidebarNavItem, element: React.ReactNode) => React.ReactNode
+  renderLink?: (props: React.ComponentProps<"a"> & { item: SidebarNavItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
+}
+
+function hasVisibleChildren(item: SidebarNavItem) {
+  return item.items?.some((child) => !child.hidden) ?? false
+}
+
+function isActiveItem(item: SidebarNavItem): boolean {
+  if (item.active) return true
+  return item.items?.some((child) => isActiveItem(child)) ?? false
+}
+
+function SidebarLeaf({
+  item,
+  collapsed,
+  depth,
+  itemClassName,
+  activeItemClassName,
+  renderLink,
+}: {
+  item: SidebarNavItem
+  collapsed: boolean
+  depth: number
+  itemClassName?: string
+  activeItemClassName?: string
+  renderLink?: SidebarNavProps["renderLink"]
+}) {
+  const currentValue: React.AriaAttributes["aria-current"] = item.current ?? (item.active ? "page" : undefined)
+  const content = (
+    <>
+      {item.icon && <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>}
+      {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
+      {!collapsed && item.badge && (
+        <Badge variant="secondary" className="ml-auto h-5 shrink-0 px-1.5">
+          {item.badge}
+        </Badge>
+      )}
+    </>
+  )
+
+  const commonClassName = cn(
+    "group flex min-h-9 items-center gap-2 rounded-xl border border-transparent px-2.5 text-sm font-medium text-[color:var(--aui-page-muted-strong,var(--muted-foreground))] transition-[background-color,border-color,color,box-shadow] hover:border-[color:var(--aui-divider)] hover:bg-[color:var(--aui-page-bg-alt)] hover:text-[color:var(--aui-page-foreground)] data-[active=true]:border-[color:var(--aui-surface-border-strong,var(--ring))] data-[active=true]:bg-[color:var(--aui-control-bg)] data-[active=true]:text-[color:var(--aui-page-foreground)] data-[active=true]:shadow-[inset_0_1px_0_rgba(255,255,255,0.25)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+    collapsed && "justify-center px-0",
+    depth > 0 && !collapsed && "pl-3",
+    itemClassName,
+    item.active && activeItemClassName
+  )
+
+  const wrapCollapsed = (node: React.ReactNode) =>
+    collapsed ? (
+      <Tooltip content={item.tooltip ?? item.label} side="right">
+        <span className="block">{node}</span>
+      </Tooltip>
+    ) : (
+      node
+    )
+
+  const internal = item.href && item.href.startsWith("/")
+
+  if (internal) {
+    if (renderLink) {
+      return wrapCollapsed(
+        renderLink({
+          item,
+          href: item.href,
+          "data-slot": "sidebar-nav-item",
+          "data-depth": String(depth),
+          "data-active": item.active || undefined,
+          "data-disabled": item.disabled || undefined,
+          "aria-current": currentValue,
+          className: commonClassName,
+          onClick: (event) => {
+            if (item.disabled) {
+              event.preventDefault()
+              return
+            }
+            item.onSelect?.()
+          },
+          children: content,
+        })
+      )
+    }
+
+    return wrapCollapsed(
+      <a
+        href={item.href}
+        data-slot="sidebar-nav-item"
+        data-depth={depth}
+        data-active={item.active || undefined}
+        data-disabled={item.disabled || undefined}
+        aria-current={currentValue}
+        className={commonClassName}
+        onClick={(event) => {
+          if (item.disabled) {
+            event.preventDefault()
+            return
+          }
+          item.onSelect?.()
+        }}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  if (item.href) {
+    return wrapCollapsed(
+      <button
+        type="button"
+        data-slot="sidebar-nav-item"
+        data-depth={depth}
+        data-active={item.active || undefined}
+        data-disabled={item.disabled || undefined}
+        aria-current={currentValue}
+        className={cn("w-full text-left", commonClassName)}
+        onClick={() => {
+          if (item.disabled) return
+          const href = item.href
+          if (!href) return
+          item.onSelect?.()
+          if (href.startsWith("http")) {
+            window.open(href, "_blank", "noopener,noreferrer")
+            return
+          }
+          window.location.assign(href)
+        }}
+      >
+        {content}
+      </button>
+    )
+  }
+
+  return wrapCollapsed(
+    <button
+      type="button"
+      data-slot="sidebar-nav-item"
+      data-depth={depth}
+      data-active={item.active || undefined}
+      data-disabled={item.disabled || undefined}
+      aria-current={currentValue}
+      disabled={item.disabled}
+      className={cn("w-full text-left", commonClassName)}
+      onClick={item.onSelect}
+    >
+      {content}
+    </button>
+  )
+}
+
+function SidebarTree({
+  items,
+  collapsed,
+  depth,
+  itemClassName,
+  activeItemClassName,
+  renderItem,
+  renderLink,
+}: {
+  items: SidebarNavItem[]
+  collapsed: boolean
+  depth: number
+  itemClassName?: string
+  activeItemClassName?: string
+  renderItem?: SidebarNavProps["renderItem"]
+  renderLink?: SidebarNavProps["renderLink"]
+}) {
+  return items.map((item) => {
+    if (item.hidden) return null
+
+    const showSectionLabel = !collapsed && depth === 0 && item.sectionLabel
+    const hasChildren = hasVisibleChildren(item)
+
+    if (!hasChildren) {
+      const element = (
+        <SidebarLeaf
+          item={item}
+          collapsed={collapsed}
+          depth={depth}
+          itemClassName={itemClassName}
+          activeItemClassName={activeItemClassName}
+          renderLink={renderLink}
+        />
+      )
+
+      return (
+        <React.Fragment key={item.key}>
+          {showSectionLabel ? (
+            <div
+              data-slot="sidebar-nav-group-label"
+              className="px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
+            >
+              {item.sectionLabel}
+            </div>
+          ) : null}
+          {renderItem ? renderItem(item, element) : element}
+        </React.Fragment>
+      )
+    }
+
+    const isExpanded = item.defaultExpanded ?? isActiveItem(item)
+    const trigger = (
+      <summary
+        data-slot="sidebar-nav-group-trigger"
+        className={cn(
+          "flex min-h-9 list-none items-center gap-2 rounded-xl border border-transparent px-2.5 text-sm font-medium text-[color:var(--aui-page-muted-strong,var(--muted-foreground))] transition-[background-color,border-color,color,box-shadow] hover:border-[color:var(--aui-divider)] hover:bg-[color:var(--aui-page-bg-alt)] hover:text-[color:var(--aui-page-foreground)]",
+          collapsed ? "justify-center px-0" : "px-2"
+        )}
+      >
+        {item.icon ? (
+          collapsed ? (
+            <Tooltip content={item.tooltip ?? item.label} side="right">
+              <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
+            </Tooltip>
+          ) : (
+            <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
+          )
+        ) : null}
+        {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
+        {!collapsed && item.badge ? (
+          <Badge variant="secondary" className="h-5 shrink-0 px-1.5">
+            {item.badge}
+          </Badge>
+        ) : null}
+        {!collapsed && (
+          <span
+            data-slot="sidebar-nav-group-chevron"
+            className="ml-auto text-xs text-muted-foreground transition-transform group-open/sidebar-nav-details:rotate-90"
+          >
+            ›
+          </span>
+        )}
+      </summary>
+    )
+
+    const groupElement = (
+      <div data-slot="sidebar-nav-group" data-depth={depth}>
+        {showSectionLabel ? (
+          <div
+            data-slot="sidebar-nav-group-label"
+            className="px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
+          >
+            {item.sectionLabel}
+          </div>
+        ) : null}
+        <details
+          data-slot="sidebar-nav-group-details"
+          open={isExpanded}
+          className="group/sidebar-nav-details"
+        >
+          {trigger}
+          <div
+            data-slot="sidebar-nav-group-content"
+            className={cn("mt-1 grid gap-1", !collapsed && "ml-3 border-l border-border/55 pl-2")}
+          >
+            <SidebarTree
+              items={item.items ?? []}
+              collapsed={collapsed}
+              depth={depth + 1}
+              itemClassName={itemClassName}
+              activeItemClassName={activeItemClassName}
+              renderItem={renderItem}
+              renderLink={renderLink}
+            />
+          </div>
+        </details>
+      </div>
+    )
+
+    return renderItem ? <React.Fragment key={item.key}>{renderItem(item, groupElement)}</React.Fragment> : <React.Fragment key={item.key}>{groupElement}</React.Fragment>
+  })
+}
+
+function SidebarNav({
+  className,
+  items,
+  collapsed = false,
+  scrollable = true,
+  itemClassName,
+  activeItemClassName,
+  renderItem,
+  renderLink,
+  ...props
+}: SidebarNavProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <nav
+      data-slot="sidebar-nav"
+      data-collapsed={collapsed || undefined}
+      className={cn("grid min-h-0 gap-1", scrollable ? "overflow-y-auto overscroll-contain" : null, className)}
+      {...props}
+    >
+      <SidebarTree
+        items={visibleItems}
+        collapsed={collapsed}
+        depth={0}
+        itemClassName={itemClassName}
+        activeItemClassName={activeItemClassName}
+        renderItem={renderItem}
+        renderLink={renderLink}
+      />
+    </nav>
+  )
+}
+
+export { SidebarNav }

package/packages/cli/vendor/src/components/layout/stack.tsx

@@ -0,0 +1,106 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type StackGap = "xs" | "sm" | "md" | "lg" | "xl"
+type InlineAlign = "start" | "center" | "end" | "stretch"
+type InlineJustify = "start" | "center" | "end" | "between"
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6
+
+const stackGapClassName: Record<StackGap, string> = {
+  xs: "gap-2",
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8",
+}
+
+const inlineAlignClassName: Record<InlineAlign, string> = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+}
+
+const inlineJustifyClassName: Record<InlineJustify, string> = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+}
+
+const gridColumnClassName: Record<GridColumns, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+}
+
+export type StackProps = React.ComponentProps<"div"> & {
+  gap?: StackGap
+  splitAfter?: React.ReactNode
+}
+
+function Stack({ gap = "md", splitAfter, className, children, ...props }: StackProps) {
+  return (
+    <div data-slot="stack" className={cn("flex min-w-0 flex-col", stackGapClassName[gap], className)} {...props}>
+      {children}
+      {splitAfter ? <div data-slot="stack-split-after">{splitAfter}</div> : null}
+    </div>
+  )
+}
+
+export type InlineProps = React.ComponentProps<"div"> & {
+  gap?: StackGap
+  align?: InlineAlign
+  justify?: InlineJustify
+  wrap?: boolean
+}
+
+export type GridProps = React.ComponentProps<"div"> & {
+  gap?: StackGap
+  columns?: GridColumns
+}
+
+function Inline({
+  gap = "md",
+  align = "center",
+  justify = "start",
+  wrap = true,
+  className,
+  children,
+  ...props
+}: InlineProps) {
+  return (
+    <div
+      data-slot="inline"
+      className={cn(
+        "flex min-w-0",
+        stackGapClassName[gap],
+        inlineAlignClassName[align],
+        inlineJustifyClassName[justify],
+        wrap ? "flex-wrap" : "flex-nowrap",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Grid({ gap = "md", columns = 2, className, children, ...props }: GridProps) {
+  return (
+    <div
+      data-slot="grid"
+      className={cn("grid min-w-0", stackGapClassName[gap], gridColumnClassName[columns], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { Grid, Inline, Stack }