{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-template",
  "type": "registry:component",
  "title": "Page Template",
  "description": "Layout wrapper that composes the Steez page header and subtabs.",
  "dependencies": [],
  "registryDependencies": [
    "https://steez-ui-6v5.pages.dev/r-steez/theme-tokens.json",
    "https://steez-ui-6v5.pages.dev/r-steez/page-header.json",
    "https://steez-ui-6v5.pages.dev/r-steez/roving-tabs.json",
    "https://steez-ui-6v5.pages.dev/r-steez/stable-id.json",
    "https://steez-ui-6v5.pages.dev/r-steez/tab-list.json"
  ],
  "docs": "Files install at the project root. Import styles/steez/tokens.css once from your global stylesheet or root layout, then import components from components/steez. No Steez npm packages are required.",
  "files": [
    {
      "path": "components/steez/PageTemplate.tsx",
      "type": "registry:file",
      "target": "components/steez/PageTemplate.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { useRovingTabs } from \"../hooks/useRovingTabs\";\nimport { useStableId } from \"../hooks/useStableId\";\nimport { PageHeader, type PageHeaderProps } from \"./PageHeader\";\nimport styles from \"./PageTemplate.module.css\";\nimport { TabList } from \"./TabList\";\n\ninterface SubTab {\n  id: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface PageTemplateProps\n  extends Pick<\n    PageHeaderProps,\n    | \"title\"\n    | \"description\"\n    | \"icon\"\n    | \"onBack\"\n    | \"onSettings\"\n    | \"brand\"\n    | \"onBrandClick\"\n    | \"onViewerToggle\"\n    | \"viewerVisible\"\n  > {\n  actions?: React.ReactNode;\n  extra?: React.ReactNode;\n  className?: string;\n  subTabs?: SubTab[];\n  activeSubTab?: string;\n  onSubTabChange?: (tabId: string) => void;\n  children?: React.ReactNode;\n  loading?: boolean;\n  showTitle?: boolean;\n  brandTitle?: string;\n  brandAriaLabel?: string;\n  viewerShowLabel?: string;\n  viewerHideLabel?: string;\n}\n\nexport function PageTemplate({\n  title,\n  actions,\n  extra,\n  description,\n  icon,\n  subTabs,\n  activeSubTab,\n  onSubTabChange,\n  onBack,\n  onSettings,\n  brand,\n  onBrandClick,\n  onViewerToggle,\n  viewerVisible,\n  brandTitle,\n  brandAriaLabel,\n  viewerShowLabel,\n  viewerHideLabel,\n  children,\n  loading,\n  showTitle = true,\n  className = \"\",\n}: PageTemplateProps) {\n  const baseId = useStableId(\"page-template\");\n  const headerExtra = extra ?? actions;\n  const hasContent = loading || React.Children.count(children) > 0;\n\n  const getTabDomId = React.useCallback(\n    (tabId: string) => `${baseId}-tab-${tabId}`,\n    [baseId],\n  );\n  const getPanelDomId = React.useCallback(\n    (tabId: string) => `${baseId}-panel-${tabId}`,\n    [baseId],\n  );\n\n  const resolvedActiveTabId =\n    subTabs?.some((tab) => tab.id === activeSubTab) ? activeSubTab : subTabs?.[0]?.id;\n\n  const handleSelect = React.useCallback(\n    (tabId: string) => {\n      onSubTabChange?.(tabId);\n    },\n    [onSubTabChange],\n  );\n  const { handleKeyDown: handleTabKeyDown, setTabRef } = useRovingTabs({\n    tabs: subTabs ?? [],\n    onSelect: handleSelect,\n  });\n\n  const hasSubTabs = Boolean(subTabs?.length);\n\n  return (\n    <div className={`${styles.root} ${className}`.trim()}>\n      {showTitle ? (\n        <div className={styles.header}>\n          <PageHeader\n            title={title}\n            description={description}\n            icon={icon}\n            extra={headerExtra}\n            onBack={onBack}\n            onSettings={onSettings}\n            brand={brand}\n            onBrandClick={onBrandClick}\n            brandTitle={brandTitle}\n            brandAriaLabel={brandAriaLabel}\n            onViewerToggle={onViewerToggle}\n            viewerVisible={viewerVisible}\n            viewerShowLabel={viewerShowLabel}\n            viewerHideLabel={viewerHideLabel}\n          />\n        </div>\n      ) : null}\n\n      {hasSubTabs ? (\n        <TabList\n          tabs={subTabs!}\n          activeTabId={resolvedActiveTabId}\n          getTabDomId={getTabDomId}\n          getPanelDomId={getPanelDomId}\n          setTabRef={setTabRef}\n          onSelect={handleSelect}\n          onKeyDown={handleTabKeyDown}\n          tabListClassName={styles.subTabs}\n          tabClassName={styles.subTabButton}\n          activeTabClassName={styles.subTabButtonActive}\n          panelClassName={styles.content}\n          ariaLabel={`${title} sections`}\n          renderPanel={hasContent}\n          panelContent={loading ? <div className={styles.loading}>Loading...</div> : children ?? null}\n        />\n      ) : hasContent ? (\n        <div className={styles.content}>\n          {loading ? <div className={styles.loading}>Loading...</div> : children ?? null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "source": "packages/ui/src/components/PageTemplate.tsx"
    },
    {
      "path": "components/steez/PageTemplate.module.css",
      "type": "registry:file",
      "target": "components/steez/PageTemplate.module.css",
      "content": ".root {\n  display: flex;\n  flex-direction: column;\n}\n\n.header {\n  flex-shrink: 0;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\n.subTabs {\n  display: flex;\n  gap: 4px;\n  padding: 0 24px 16px;\n  border-bottom: 1px solid var(--border-color);\n  flex-shrink: 0;\n}\n\n.subTabButton {\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--text-secondary);\n  cursor: pointer;\n  font-size: 13px;\n  font-family: var(--font-mono);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  transition: all var(--transition-fast);\n}\n\n.subTabButtonActive {\n  border-bottom-color: var(--accent-primary);\n  color: var(--text-primary);\n  font-weight: 800;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n}\n\n.loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 60px;\n  color: var(--text-secondary);\n}\n\n",
      "source": "packages/ui/src/components/PageTemplate.module.css"
    }
  ]
}