@squadbase/vantage 0.6.2-dev1.42c4e48 → 0.6.2-dev1.51e401a

package/registry/ui/metric-value.tsx

@@ -1,8 +1,14 @@
 // Copied by `vantage add ui metric-value`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/metric-value.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/metric-value.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * MetricValue / MetricUnit — the large number in a dashboard tile and its
  * trailing unit, sized as a pair so the unit stays subordinate at every size.
+ *
+ * @deprecated KPI の数字は KpiCard を使う。KpiCard は書式（`format`、単位は
+ * `{ type: "number", unit: "社" }`）・比較ラベル・増減を値から計算するので、
+ * 手書きの数字と TrendIndicator の組み合わせのように食い違わない。
  */
 import { forwardRef, type HTMLAttributes } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
@@ -27,6 +33,7 @@ export interface MetricValueProps
   extends HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof metricValueVariants> {}
 
+/** @deprecated KPI の数字は KpiCard を使う。 */
 export const MetricValue = forwardRef<HTMLDivElement, MetricValueProps>(
   ({ className, size, ...props }, ref) => (
     <div
@@ -41,6 +48,7 @@ MetricValue.displayName = "MetricValue"
 
 export interface MetricUnitProps extends HTMLAttributes<HTMLSpanElement> {}
 
+/** @deprecated KPI の単位は KpiCard の `format`（`{ type: "number", unit: "社" }`）で付ける。 */
 export const MetricUnit = forwardRef<HTMLSpanElement, MetricUnitProps>(
   ({ className, ...props }, ref) => (
     <span

package/registry/ui/multi-select.tsx

@@ -1,8 +1,10 @@
 // Copied by `vantage add ui multi-select`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/multi-select.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/multi-select.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * MultiSelect — a multi-value combobox that shows the selection as removable
- * badges. Past `maxCount` badges the rest collapse into a "+N件" counter.
+ * badges. Past `maxCount` badges the rest collapse into a "+N more" (ja: "+N件") counter.
  * Pass `onSearch` to take filtering over yourself (server-side search).
  */
 import { forwardRef, useId, useMemo, useState } from "react"
@@ -12,12 +14,144 @@ import { cn } from "@squadbase/vantage/ui"
 import { Badge } from "@squadbase/vantage/ui"
 import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
 import { flattenOptions, type SelectOptions } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
 import type { KeyboardEvent, MouseEvent } from "react"
 import { CheckIcon, LoaderIcon, XIcon } from "lucide-react"
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@squadbase/vantage/ui"
 import { isGroupedOptions, type SelectOption } from "@squadbase/vantage/components"
 
-/* ---------- inlined from src/components/option-command.tsx (internal to @squadbase/vantage) ---------- */
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/components/option-command.tsx (internal to @squadbase/vantage) ---------- */
 
 interface OptionCommandListProps {
   options: SelectOptions
@@ -134,16 +268,37 @@ export interface MultiSelectProps {
   className?: string
 }
 
+const TEXT = {
+  ja: {
+    placeholder: "選択してください",
+    search: "検索...",
+    empty: "見つかりませんでした",
+    remove: (label: string) => `${label}を削除`,
+    more: (count: number) => `+${count}件`,
+  },
+  en: {
+    placeholder: "Select options",
+    search: "Search...",
+    empty: "No results found.",
+    remove: (label: string) => `Remove ${label}`,
+    more: (count: number) => `+${count} more`,
+  },
+}
+
+/** Not given yet (a draft fills props in steps): render empty, keep the same value between renders. */
+const NO_OPTIONS: never[] = []
+const NO_VALUES: string[] = []
+
 export const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(
   {
-    options,
-    value,
+    options = NO_OPTIONS,
+    value = NO_VALUES,
     onChange,
     onSearch,
     maxCount = 3,
-    placeholder = "選択してください",
-    searchPlaceholder = "検索...",
-    emptyText = "見つかりませんでした",
+    placeholder,
+    searchPlaceholder,
+    emptyText,
     isLoading = false,
     disabled = false,
     className,
@@ -152,6 +307,7 @@ export const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function
 ) {
   const [open, setOpen] = useState(false)
   const listId = useId()
+  const t = TEXT[uiLanguage(useLocale())]
 
   const allOptions = useMemo(() => flattenOptions(options), [options])
   const selectedOptions = useMemo(
@@ -179,20 +335,20 @@ export const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function
           aria-controls={listId}
           disabled={disabled}
           className={cn(
-            "inline-flex min-h-9 w-full items-center justify-between gap-2 rounded-md border bg-background px-3 py-1.5 text-sm shadow-xs transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            "inline-flex min-h-9 w-full items-center justify-between gap-2 rounded-md border bg-background px-3 py-1.5 text-sm shadow-xs transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
             className,
           )}
         >
           <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1">
             {selectedOptions.length === 0 ? (
-              <span className="text-muted-foreground">{placeholder}</span>
+              <span className="text-muted-foreground">{placeholder ?? t.placeholder}</span>
             ) : (
               <>
                 {visibleBadges.map((option) => (
                   <Badge key={option.value} variant="secondary" className="shrink-0 gap-1 pr-1">
                     <span className="max-w-[120px] truncate">{option.label}</span>
                     <RemoveButton
-                      label={`${option.label}を削除`}
+                      label={t.remove(option.label)}
                       onRemove={() => onChange?.(value.filter((v) => v !== option.value))}
                       iconClassName="size-3"
                     />
@@ -200,7 +356,7 @@ export const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function
                 ))}
                 {overflowCount > 0 && (
                   <Badge variant="secondary" className="shrink-0">
-                    +{overflowCount}件
+                    {t.more(overflowCount)}
                   </Badge>
                 )}
               </>
@@ -215,8 +371,8 @@ export const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function
             onSelect={handleSelect}
             onSearch={onSearch}
             isLoading={isLoading}
-            searchPlaceholder={searchPlaceholder}
-            emptyText={emptyText}
+            searchPlaceholder={searchPlaceholder ?? t.search}
+            emptyText={emptyText ?? t.empty}
           />
         </PopoverContent>
       </Popover>

package/registry/ui/page-shell.tsx

@@ -1,14 +1,153 @@
 // Copied by `vantage add ui page-shell`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/page-shell.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/page-shell.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * PageShell — the standard page frame: a bordered header band (title,
  * description, meta, actions), an optional summary card row, and the content
  * area. Composed from parts so a page can use only what it needs.
  */
-import { forwardRef, type HTMLAttributes } from "react"
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
+import { formatDateRange, EMPTY_VALUE } from "@squadbase/vantage/components"
 import { cn } from "@squadbase/vantage/ui"
+import { Badge } from "@squadbase/vantage/ui"
+import { UpdatedAt, type UpdatedAtProps } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
 
 export interface PageShellProps extends HTMLAttributes<HTMLDivElement> {}
 
@@ -19,7 +158,22 @@ export const PageShell = forwardRef<HTMLDivElement, PageShellProps>(
 )
 PageShell.displayName = "PageShell"
 
-export interface PageShellHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+const SOURCE_PREFIX = { ja: "出典：", en: "Source: " }
+
+export interface PageShellHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /** When the data was last updated. Drawn by `UpdatedAt` at the right end of the title row. */
+  updatedAt?: UpdatedAtProps["at"]
+  /** `"relative"` (default) or `"absolute-first"` ("16:41 更新（23 分前）") for pages where "now" matters. */
+  updatedAtVariant?: UpdatedAtProps["variant"]
+  /** IANA time zone for the absolute time of `updatedAt`. Defaults to the runtime's zone. */
+  timeZone?: string
+  /** Where the data comes from. Shown as a chip "Source: ○○" (ja: "出典：○○") on the second row. */
+  source?: string
+  /** The period the data covers. Shown as a chip "2026/9/23〜10/20" on the second row. */
+  period?: { start: Date | string | number; end: Date | string | number }
+  /** The page's overall state (an alert, a status badge). Shown on the third row; no row when absent. */
+  status?: ReactNode
+}
 
 /**
  * A wrapping flex row, not a two-column grid: when the heading cannot keep its
@@ -27,16 +181,54 @@ export interface PageShellHeaderProps extends HTMLAttributes<HTMLDivElement> {}
  * `1fr auto` grid would instead hand the heading whatever the end block leaves,
  * and a CJK title — breakable between any two characters — collapses into a
  * one-character column.
+ *
+ * The meta props (`updatedAt`, `source`, `period`, `status`) fix the order every
+ * page head shares: title and update time (right end) → source / period chips →
+ * overall status → summary cards. Empty rows are not drawn. Rows are placed with
+ * flex `order`, so they land before `PageShellSummary` whatever the child order.
  */
 export const PageShellHeader = forwardRef<HTMLDivElement, PageShellHeaderProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="page-shell-header"
-      className={cn("flex flex-wrap items-start gap-x-4 gap-y-6 border-b px-6 py-12", className)}
-      {...props}
-    />
-  ),
+  ({ className, updatedAt, updatedAtVariant, timeZone, source, period, status, children, ...props }, ref) => {
+    const locale = useLocale()
+    const periodText = period ? formatDateRange(period.start, period.end, { timeZone, locale }) : undefined
+    const hasChips = Boolean(source) || (periodText !== undefined && periodText !== EMPTY_VALUE)
+    const hasStatus = status !== undefined && status !== null && status !== false && status !== ""
+    return (
+      <div
+        ref={ref}
+        data-slot="page-shell-header"
+        className={cn("flex flex-wrap items-start gap-x-4 gap-y-4 px-6 pt-8", className)}
+        {...props}
+      >
+        {children}
+        {updatedAt !== undefined && updatedAt !== null ? (
+          <div data-slot="page-shell-updated-at" className="ml-auto max-w-full shrink-0 text-right">
+            <UpdatedAt at={updatedAt} variant={updatedAtVariant} timeZone={timeZone} />
+          </div>
+        ) : null}
+        {hasChips ? (
+          <div data-slot="page-shell-chips" className="order-1 flex basis-full flex-wrap gap-1.5">
+            {source ? (
+              <Badge variant="outline" className="h-auto max-w-full whitespace-normal text-muted-foreground">
+                {SOURCE_PREFIX[uiLanguage(locale)]}
+                {source}
+              </Badge>
+            ) : null}
+            {periodText && periodText !== EMPTY_VALUE ? (
+              <Badge variant="outline" className="tabular-nums text-muted-foreground">
+                {periodText}
+              </Badge>
+            ) : null}
+          </div>
+        ) : null}
+        {hasStatus ? (
+          <div data-slot="page-shell-status" className="order-2 min-w-0 basis-full">
+            {status}
+          </div>
+        ) : null}
+      </div>
+    )
+  },
 )
 PageShellHeader.displayName = "PageShellHeader"
 
@@ -61,7 +253,7 @@ export const PageShellTitle = forwardRef<HTMLHeadingElement, PageShellTitleProps
     <h1
       ref={ref}
       data-slot="page-shell-title"
-      className={cn("text-2xl font-bold tracking-tight text-foreground", className)}
+      className={cn("text-2xl font-semibold tracking-tight text-foreground", className)}
       {...props}
     />
   ),
@@ -132,7 +324,7 @@ export const PageShellSummary = forwardRef<HTMLDivElement, PageShellSummaryProps
       ref={ref}
       data-slot="page-shell-summary"
       className={cn(
-        "grid basis-full grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+        "order-3 grid basis-full grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
         className,
       )}
       {...props}
@@ -142,10 +334,23 @@ export const PageShellSummary = forwardRef<HTMLDivElement, PageShellSummaryProps
 PageShellSummary.displayName = "PageShellSummary"
 
 /**
- * Accent colours are spelled out one utility set per colour rather than built
- * from a template string — Tailwind only emits classes it can see literally in
- * the source.
+ * Accent tints come from theme tokens, never Tailwind palette colours: the
+ * semantic tones (`--positive` / `--negative` / `--warning` / `--info` /
+ * `--neutral` and their `*-subtle`) and, for hues with no status meaning,
+ * `--chart-4` / `--chart-5`. The colour-named accents are kept for compatibility
+ * and map to the nearest tone. Each set is a literal string — Tailwind only
+ * emits classes it can see literally in the source.
  */
+const summaryCardTones = {
+  positive: "border-positive/20 dark:border-positive/25 bg-positive-subtle [&>svg]:text-positive",
+  negative: "border-negative/20 dark:border-negative/25 bg-negative-subtle [&>svg]:text-negative",
+  warning: "border-warning/20 dark:border-warning/25 bg-warning-subtle [&>svg]:text-warning",
+  info: "border-info/20 dark:border-info/25 bg-info-subtle [&>svg]:text-info",
+  neutral: "border-neutral/20 dark:border-neutral/25 bg-neutral-subtle [&>svg]:text-neutral",
+  violet: "border-chart-4/30 bg-chart-4/5 [&>svg]:text-chart-4",
+  pink: "border-chart-5/30 bg-chart-5/5 [&>svg]:text-chart-5",
+} as const
+
 export const pageShellSummaryCardVariants = cva(
   "relative flex items-start gap-3 rounded-lg border bg-background px-4 py-3 text-sm [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
   {
@@ -154,40 +359,28 @@ export const pageShellSummaryCardVariants = cva(
         default: "text-card-foreground",
         accent:
           "border-[var(--chart-1)]/30 bg-linear-to-r from-[var(--chart-1)]/5 to-[var(--chart-1)]/5 [&>svg]:text-[var(--chart-1)]",
-        amber:
-          "border-amber-300 bg-amber-50 [&>svg]:text-amber-600 dark:border-amber-800 dark:bg-amber-950/50 dark:[&>svg]:text-amber-400",
-        blue: "border-blue-300 bg-blue-50 [&>svg]:text-blue-600 dark:border-blue-800 dark:bg-blue-950/50 dark:[&>svg]:text-blue-400",
-        emerald:
-          "border-emerald-300 bg-emerald-50 [&>svg]:text-emerald-600 dark:border-emerald-800 dark:bg-emerald-950/50 dark:[&>svg]:text-emerald-400",
-        red: "border-red-300 bg-red-50 [&>svg]:text-red-600 dark:border-red-800 dark:bg-red-950/50 dark:[&>svg]:text-red-400",
-        violet:
-          "border-violet-300 bg-violet-50 [&>svg]:text-violet-600 dark:border-violet-800 dark:bg-violet-950/50 dark:[&>svg]:text-violet-400",
-        orange:
-          "border-orange-300 bg-orange-50 [&>svg]:text-orange-600 dark:border-orange-800 dark:bg-orange-950/50 dark:[&>svg]:text-orange-400",
-        cyan: "border-cyan-300 bg-cyan-50 [&>svg]:text-cyan-600 dark:border-cyan-800 dark:bg-cyan-950/50 dark:[&>svg]:text-cyan-400",
-        slate:
-          "border-slate-300 bg-slate-50 [&>svg]:text-slate-600 dark:border-slate-800 dark:bg-slate-950/50 dark:[&>svg]:text-slate-400",
-        green:
-          "border-green-300 bg-green-50 [&>svg]:text-green-600 dark:border-green-800 dark:bg-green-950/50 dark:[&>svg]:text-green-400",
-        teal: "border-teal-300 bg-teal-50 [&>svg]:text-teal-600 dark:border-teal-800 dark:bg-teal-950/50 dark:[&>svg]:text-teal-400",
-        sky: "border-sky-300 bg-sky-50 [&>svg]:text-sky-600 dark:border-sky-800 dark:bg-sky-950/50 dark:[&>svg]:text-sky-400",
-        indigo:
-          "border-indigo-300 bg-indigo-50 [&>svg]:text-indigo-600 dark:border-indigo-800 dark:bg-indigo-950/50 dark:[&>svg]:text-indigo-400",
-        purple:
-          "border-purple-300 bg-purple-50 [&>svg]:text-purple-600 dark:border-purple-800 dark:bg-purple-950/50 dark:[&>svg]:text-purple-400",
-        pink: "border-pink-300 bg-pink-50 [&>svg]:text-pink-600 dark:border-pink-800 dark:bg-pink-950/50 dark:[&>svg]:text-pink-400",
-        rose: "border-rose-300 bg-rose-50 [&>svg]:text-rose-600 dark:border-rose-800 dark:bg-rose-950/50 dark:[&>svg]:text-rose-400",
-        yellow:
-          "border-yellow-300 bg-yellow-50 [&>svg]:text-yellow-600 dark:border-yellow-800 dark:bg-yellow-950/50 dark:[&>svg]:text-yellow-400",
-        lime: "border-lime-300 bg-lime-50 [&>svg]:text-lime-600 dark:border-lime-800 dark:bg-lime-950/50 dark:[&>svg]:text-lime-400",
-        gray: "border-gray-300 bg-gray-50 [&>svg]:text-gray-600 dark:border-gray-800 dark:bg-gray-950/50 dark:[&>svg]:text-gray-400",
-        zinc: "border-zinc-300 bg-zinc-50 [&>svg]:text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950/50 dark:[&>svg]:text-zinc-400",
-        neutral:
-          "border-neutral-300 bg-neutral-50 [&>svg]:text-neutral-600 dark:border-neutral-800 dark:bg-neutral-950/50 dark:[&>svg]:text-neutral-400",
-        stone:
-          "border-stone-300 bg-stone-50 [&>svg]:text-stone-600 dark:border-stone-800 dark:bg-stone-950/50 dark:[&>svg]:text-stone-400",
-        fuchsia:
-          "border-fuchsia-300 bg-fuchsia-50 [&>svg]:text-fuchsia-600 dark:border-fuchsia-800 dark:bg-fuchsia-950/50 dark:[&>svg]:text-fuchsia-400",
+        amber: summaryCardTones.warning,
+        blue: summaryCardTones.info,
+        emerald: summaryCardTones.positive,
+        red: summaryCardTones.negative,
+        violet: summaryCardTones.violet,
+        orange: summaryCardTones.warning,
+        cyan: summaryCardTones.info,
+        slate: summaryCardTones.neutral,
+        green: summaryCardTones.positive,
+        teal: summaryCardTones.positive,
+        sky: summaryCardTones.info,
+        indigo: summaryCardTones.info,
+        purple: summaryCardTones.violet,
+        pink: summaryCardTones.pink,
+        rose: summaryCardTones.negative,
+        yellow: summaryCardTones.warning,
+        lime: summaryCardTones.positive,
+        gray: summaryCardTones.neutral,
+        zinc: summaryCardTones.neutral,
+        neutral: summaryCardTones.neutral,
+        stone: summaryCardTones.neutral,
+        fuchsia: summaryCardTones.violet,
       },
     },
     defaultVariants: {
@@ -219,7 +412,7 @@ export const PageShellContent = forwardRef<HTMLDivElement, PageShellContentProps
     <div
       ref={ref}
       data-slot="page-shell-content"
-      className={cn("flex-1 p-6", className)}
+      className={cn("flex min-w-0 flex-1 flex-col gap-6 p-6", className)}
       {...props}
     />
   ),

package/registry/ui/pagination.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui pagination`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/pagination.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/pagination.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import * as React from "react"
 import { cn } from "@squadbase/vantage/ui"