@talelk/newui-templates 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+# @talelk/newui-templates
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Exactly three templates: one responsive workspace `AppShell`, a two-pane
+`PaneLayout`, and a centered `AuthLayout`.
+
+```tsx
+import { AppShell, PaneLayout } from '@talelk/newui-templates'
+
+<AppShell
+  brand={<Brand />}
+  tenant={<TenantSwitcher />}
+  navigation={groups}
+  settings={<SettingsAction />}
+  account={<AccountMenu />}
+  title="Projects"
+>
+  <ProjectsPage />
+</AppShell>
+```
+
+`AppShell` owns the responsive behavior and the single sidebar. The app owns its
+logo, tenant switcher, routes and account actions. There is no separate rail,
+desktop shell, mobile shell or alternate app layout.
+
+The package depends downward on `@talelk/newui-atoms`, `@talelk/newui-molecules` and
+`@talelk/newui-organisms`.

package/package.json

@@ -1,6 +1,40 @@
 {
   "name": "@talelk/newui-templates",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "type": "module",
+  "description": "The three page templates: AppShell, PaneLayout and AuthLayout.",
+  "exports": {
+    ".": {
+      "solid": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@talelk/newui-atoms": "1.0.0",
+    "@talelk/newui-molecules": "1.0.0",
+    "@talelk/newui-organisms": "1.0.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "solid-js": "^1.9.0"
+  },
+  "sideEffects": false,
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/talelk/newui.git",
+    "directory": "packages/templates"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  }
 }

package/src/exports.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import * as templates from './index'
+
+describe('@talelk/newui-templates', () => {
+  it('exports exactly the three supported page templates', () => {
+    expect(Object.keys(templates).sort()).toEqual([
+      'AppShell',
+      'AuthLayout',
+      'PaneLayout',
+    ])
+  })
+})

package/src/index.ts

@@ -0,0 +1 @@
+export * from './templates'

package/src/templates/AppShell.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen, waitFor } from '@solidjs/testing-library'
+import { SidebarItem } from '@talelk/newui-organisms'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { AppShell } from './AppShell'
+
+describe('AppShell', () => {
+  it('uses one sidebar model for the mobile drawer, including tenant and bottom actions', async () => {
+    render(() => (
+      <AppShell
+        title="Projects"
+        brand={<span>Acme</span>}
+        brandCollapsed={<span>AC</span>}
+        tenant={<button type="button">Acme · Production</button>}
+        tenantCollapsed={
+          <button type="button" aria-label="Choose tenant">
+            AC
+          </button>
+        }
+        navigation={[
+          {
+            label: 'Workspace',
+            items: [
+              { label: 'Projects', icon: 'lucide-folders', active: true },
+              { label: 'People', icon: 'lucide-users' },
+            ],
+          },
+          {
+            label: 'Reports',
+            items: [
+              { label: 'Revenue', icon: 'lucide-chart-no-axes-combined' },
+            ],
+          },
+        ]}
+        settings={
+          <SidebarItem label="Settings" icon="lucide-settings">
+            Settings
+          </SidebarItem>
+        }
+        account={
+          <SidebarItem label="Rhea Kapoor" icon="lucide-user-round">
+            Rhea Kapoor
+          </SidebarItem>
+        }
+      >
+        <p>Content</p>
+      </AppShell>
+    ))
+
+    expect(
+      screen.getByRole('heading', { name: 'Projects', level: 1 }),
+    ).toBeTruthy()
+    expect(screen.queryByRole('dialog')).toBeNull()
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Open application navigation' }),
+    )
+    const drawer = screen.getByRole('dialog', {
+      name: 'Application navigation',
+    })
+    expect(drawer).toBeVisible()
+    expect(screen.getByText('Acme')).toBeTruthy()
+    expect(
+      screen.getByRole('button', { name: 'Acme · Production' }),
+    ).toBeTruthy()
+    expect(screen.getByText('Workspace')).toBeTruthy()
+    expect(screen.getByText('Reports')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Settings' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Rhea Kapoor' })).toBeTruthy()
+    expect(document.querySelector('[data-slot="sidebar-rail"]')).toBeNull()
+
+    await userEvent.click(screen.getByRole('button', { name: 'People' }))
+    await waitFor(() => expect(drawer).not.toBeVisible())
+  })
+})

package/src/templates/AppShell.tsx

@@ -0,0 +1,241 @@
+import {
+  Button,
+  createMediaQuery,
+  UIProvider,
+  useUI,
+} from '@talelk/newui-atoms'
+import { closeDialog, showDialog } from '@talelk/newui-atoms/internal'
+import { type BreadcrumbItem, Breadcrumbs } from '@talelk/newui-molecules'
+import { AppSidebar, type AppSidebarGroup } from '@talelk/newui-organisms'
+import {
+  createEffect,
+  createSignal,
+  type JSX,
+  onCleanup,
+  onMount,
+  Show,
+} from 'solid-js'
+
+/**
+ * The one application frame: a single, responsive, multi-section sidebar and
+ * the page it opens. There is no separate app rail and no second mobile shell.
+ *
+ * At desktop width the sidebar docks and can collapse to icons. On a narrow
+ * viewport the same sidebar becomes an expanded modal drawer; selection closes
+ * it and focus returns to the menu trigger. The brand, tenant picker, menu data,
+ * settings action and user menu are app-owned inputs, not an auth or tenancy
+ * backend hidden in the template.
+ */
+export interface AppShellProps {
+  /** Brand/logo at the top of the sidebar. */
+  brand: JSX.Element
+  /** Compact mark used when the sidebar is icon-only. Defaults to `brand`. */
+  brandCollapsed?: JSX.Element
+  /** Tenant/workspace switcher, usually a `Dropdown`. */
+  tenant?: JSX.Element
+  /** Compact tenant action when collapsed (usually the tenant logo). */
+  tenantCollapsed?: JSX.Element
+  /** Optional search/filter control, pinned above the scrolling menu. */
+  sidebarSearch?: JSX.Element
+  /** The labelled sections and icon rows of the one navigation sidebar. */
+  navigation?: AppSidebarGroup[]
+  /** Advanced navigation content, rendered inside the same sidebar. */
+  navigationContent?: JSX.Element | (() => JSX.Element)
+  /** Settings action pinned to the bottom of the sidebar. */
+  settings?: JSX.Element
+  /** User/account control pinned below settings. */
+  account?: JSX.Element
+  /** Compact account icon control, shown while collapsed. */
+  accountCollapsed?: JSX.Element
+  /** Controlled desktop icon-collapse state. Unset: shell owns it. */
+  collapsed?: boolean
+  onCollapsedChange?: (collapsed: boolean) => void
+  /** Accessible names of the sidebar and mobile drawer. */
+  navLabel?: string
+  /** Main page title, rendered as the document's h1. */
+  title: JSX.Element
+  description?: JSX.Element
+  breadcrumbs?: BreadcrumbItem[]
+  actions?: JSX.Element
+  /** Header actions shared by desktop and the mobile bar. */
+  headerActions?: JSX.Element
+  /** Title shown in the compact mobile bar. Defaults to `title`. */
+  mobileTitle?: JSX.Element
+  /** Content below the page heading. */
+  children: JSX.Element
+  /** Content below the page body, inside the page scroller. */
+  footer?: JSX.Element
+  class?: string
+}
+
+const DESKTOP = '(min-width: 1024px)'
+
+export function AppShell(props: AppShellProps): JSX.Element {
+  const desktop = createMediaQuery(DESKTOP)
+  const ui = useUI()
+  const [internalCollapsed, setInternalCollapsed] = createSignal(false)
+  const [drawerOpen, setDrawerOpen] = createSignal(false)
+  const drawerPortal =
+    typeof document === 'undefined' ? undefined : document.createElement('div')
+  const collapsed = () => props.collapsed ?? internalCollapsed()
+  let drawer: HTMLDialogElement | undefined
+  let trigger: HTMLButtonElement | undefined
+
+  drawerPortal?.setAttribute('data-keep-drawer', '')
+
+  onMount(() => {
+    if (drawer && drawerPortal) drawer.append(drawerPortal)
+  })
+
+  const setCollapsed = (next: boolean) => {
+    if (props.collapsed === undefined) setInternalCollapsed(next)
+    props.onCollapsedChange?.(next)
+  }
+
+  const openDrawer = () => {
+    setDrawerOpen(true)
+    showDialog(drawer)
+  }
+
+  const closeDrawer = () => {
+    setDrawerOpen(false)
+    if (drawer?.open) closeDialog(drawer)
+  }
+
+  createEffect(() => {
+    if (desktop() && drawerOpen()) closeDrawer()
+  })
+
+  onCleanup(() => closeDialog(drawer))
+
+  const sidebarProps = () => ({
+    brand: props.brand,
+    brandCollapsed: props.brandCollapsed,
+    tenant: props.tenant,
+    tenantCollapsed: props.tenantCollapsed,
+    search: props.sidebarSearch,
+    groups: props.navigation,
+    children: props.navigationContent,
+    settings: props.settings,
+    account: props.account,
+    accountCollapsed: props.accountCollapsed,
+    ariaLabel: props.navLabel ?? 'Application navigation',
+  })
+
+  const title = () => props.mobileTitle ?? props.title
+
+  return (
+    <div
+      data-slot="app-shell"
+      class={`flex h-dvh min-h-0 overflow-hidden bg-surface-gray-1 text-interface text-ink-gray-9 ${props.class ?? ''}`}
+    >
+      <Show when={desktop()}>
+        <div
+          data-slot="app-shell-sidebar"
+          class={`h-full shrink-0 overflow-hidden border-e border-outline-gray-1 bg-surface-sidebar transition-[width] duration-200 motion-reduce:transition-none ${collapsed() ? 'w-14' : 'w-64'}`}
+        >
+          <AppSidebar
+            {...sidebarProps()}
+            width="100%"
+            collapsedWidth="100%"
+            collapsed={collapsed()}
+            onCollapsedChange={setCollapsed}
+          />
+        </div>
+      </Show>
+
+      <div class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+        <Show when={!desktop() || props.headerActions}>
+          <header
+            data-slot="app-shell-header"
+            class="flex min-h-12 shrink-0 items-center justify-between gap-control-gap border-b border-outline-gray-1 bg-surface-elevation-1 px-page-gutter-compact"
+          >
+            <div class="flex min-w-0 items-center gap-2">
+              <Show when={!desktop()}>
+                <button
+                  ref={trigger}
+                  type="button"
+                  aria-label="Open application navigation"
+                  aria-haspopup="dialog"
+                  aria-expanded={drawerOpen()}
+                  onClick={openDrawer}
+                  class="grid size-9 shrink-0 place-items-center rounded-3 hover:bg-surface-gray-2 focus-visible:focus-ring"
+                >
+                  <span aria-hidden="true" class="lucide-menu size-4" />
+                </button>
+                <span class="min-w-0 truncate font-medium">{title()}</span>
+              </Show>
+            </div>
+            <div class="flex shrink-0 items-center gap-2">
+              {props.headerActions}
+            </div>
+          </header>
+        </Show>
+
+        <main
+          id="app-shell-content"
+          data-slot="app-shell-content"
+          class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+        >
+          <a href="#app-shell-content" class="sr-only focus:not-sr-only">
+            Skip to workspace
+          </a>
+          <div class="mx-auto flex w-full max-w-[1440px] flex-col gap-section-gap p-page-gutter-compact pb-8 md:p-page-gutter">
+            <div class="flex flex-wrap items-end justify-between gap-4">
+              <div class="min-w-0">
+                <Show when={props.breadcrumbs}>
+                  {(items) => <Breadcrumbs items={items()} />}
+                </Show>
+                <h1 class="mt-1 text-heading">{props.title}</h1>
+                <Show when={props.description}>
+                  <p class="mt-2 max-w-2xl text-ink-gray-7">
+                    {props.description}
+                  </p>
+                </Show>
+              </div>
+              <Show when={props.actions}>
+                <div class="flex flex-wrap items-center gap-2">
+                  {props.actions}
+                </div>
+              </Show>
+            </div>
+            {props.children}
+            <Show when={props.footer}>{props.footer}</Show>
+          </div>
+        </main>
+      </div>
+
+      <dialog
+        ref={drawer}
+        aria-label={props.navLabel ?? 'Application navigation'}
+        data-slot="app-shell-drawer"
+        onClose={() => {
+          setDrawerOpen(false)
+          trigger?.focus()
+        }}
+        onClick={(event) => {
+          if (event.target === drawer) return closeDrawer()
+          const target = event.target as Element
+          const control = target.closest('a, button, [data-navigates]')
+          if (control && !control.closest('[data-keep-drawer]')) closeDrawer()
+        }}
+        class="open:flex m-0 h-dvh max-h-none w-72 max-w-[calc(100vw-2rem)] flex-col overflow-y-auto border-e border-outline-gray-1 bg-surface-sidebar p-0 text-ink-gray-9 backdrop:bg-black-overlay-200"
+      >
+        <div class="flex shrink-0 justify-end border-b border-outline-gray-1 p-2">
+          <Button variant="ghost" size="sm" onClick={closeDrawer}>
+            Close navigation
+          </Button>
+        </div>
+        <UIProvider dir={ui?.dir()} portalTarget={drawerPortal}>
+          <AppSidebar
+            {...sidebarProps()}
+            width="100%"
+            collapsedWidth="100%"
+            collapsed={false}
+            collapsible={false}
+          />
+        </UIProvider>
+      </dialog>
+    </div>
+  )
+}

package/src/templates/AuthLayout.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { AuthLayout } from './AuthLayout'
+
+describe('AuthLayout', () => {
+  it('centers public access content and allows an optional context panel', () => {
+    const { container } = render(() => (
+      <AuthLayout aside={<p>Welcome to Acme</p>} brand={<span>Acme</span>}>
+        <form aria-label="Sign in">
+          <button type="submit">Continue</button>
+        </form>
+      </AuthLayout>
+    ))
+
+    expect(screen.getByText('Welcome to Acme')).toBeVisible()
+    expect(screen.getByText('Acme')).toBeVisible()
+    expect(screen.getByRole('form', { name: 'Sign in' })).toBeVisible()
+    expect(container.querySelectorAll('main')).toHaveLength(1)
+  })
+})

package/src/templates/AuthLayout.tsx

@@ -0,0 +1,42 @@
+import { type JSX, Show } from 'solid-js'
+
+/**
+ * A focused frame for public access screens: sign-in, sign-up and recovery.
+ * The authentication card and the auth provider remain app-owned; this only
+ * supplies the responsive page canvas and brand slot.
+ */
+export interface AuthLayoutProps {
+  brand?: JSX.Element
+  /** Optional desktop-only context panel beside the auth form. */
+  aside?: JSX.Element
+  /** Optional top-edge actions, e.g. a theme switcher and a return link. */
+  header?: JSX.Element
+  children: JSX.Element
+}
+
+export function AuthLayout(props: AuthLayoutProps): JSX.Element {
+  return (
+    <div
+      data-slot="auth-layout"
+      class="grid min-h-dvh bg-surface-gray-1 text-interface text-ink-gray-9"
+      classList={{ 'lg:grid-cols-2': Boolean(props.aside) }}
+    >
+      <Show when={props.aside}>
+        <aside class="hidden flex-col justify-between bg-surface-blue-8 p-6 text-ink-base lg:flex">
+          {props.aside}
+        </aside>
+      </Show>
+      <main class="relative grid min-h-dvh place-items-center p-4">
+        <Show when={props.header}>
+          <div class="absolute inset-x-0 top-0 flex items-center justify-between p-3">
+            {props.header}
+          </div>
+        </Show>
+        <div class="flex w-full max-w-md flex-col items-center gap-4">
+          {props.brand}
+          {props.children}
+        </div>
+      </main>
+    </div>
+  )
+}

package/src/templates/PaneLayout/PaneLayout.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { PaneLayout } from './PaneLayout'
+
+function panes(props: Partial<Parameters<typeof PaneLayout>[0]> = {}) {
+  return render(() => (
+    <PaneLayout start={<p>Conversations</p>} end={<p>Message</p>} {...props} />
+  ))
+}
+
+const handle = () =>
+  screen.getByRole('separator', { name: 'Resize panes' }) as HTMLElement
+
+describe('PaneLayout', () => {
+  it('renders both panes and an adjustable separator', () => {
+    panes({ startSize: 40 })
+    expect(screen.getByText('Conversations')).toBeTruthy()
+    expect(screen.getByText('Message')).toBeTruthy()
+    expect(handle().getAttribute('aria-orientation')).toBe('vertical')
+    expect(handle().getAttribute('aria-valuenow')).toBe('40')
+    expect(handle().getAttribute('aria-valuemin')).toBe('20')
+    expect(handle().getAttribute('aria-valuemax')).toBe('70')
+  })
+
+  it('moves with the keyboard, and jumps to the bounds', async () => {
+    panes({ startSize: 40 })
+    handle().focus()
+    await userEvent.keyboard('{ArrowRight}')
+    expect(handle().getAttribute('aria-valuenow')).toBe('42')
+    await userEvent.keyboard('{Shift>}{ArrowLeft}{/Shift}')
+    expect(handle().getAttribute('aria-valuenow')).toBe('32')
+    await userEvent.keyboard('{Home}')
+    expect(handle().getAttribute('aria-valuenow')).toBe('20')
+    await userEvent.keyboard('{End}')
+    expect(handle().getAttribute('aria-valuenow')).toBe('70')
+  })
+
+  it('clamps the split to the minimum and maximum', async () => {
+    panes({ startSize: 40, minStartSize: 45, maxStartSize: 55 })
+    handle().focus()
+    await userEvent.keyboard('{Home}')
+    expect(handle().getAttribute('aria-valuenow')).toBe('45')
+    await userEvent.keyboard('{End}')
+    expect(handle().getAttribute('aria-valuenow')).toBe('55')
+  })
+
+  it('returns to the default split on double-click', async () => {
+    panes({ startSize: 40 })
+    handle().focus()
+    await userEvent.keyboard('{End}')
+    expect(handle().getAttribute('aria-valuenow')).toBe('70')
+    await userEvent.dblClick(handle())
+    expect(handle().getAttribute('aria-valuenow')).toBe('40')
+  })
+
+  it('shows one pane on a compact viewport, by `active`', () => {
+    const { unmount } = panes()
+    // Default: the list stays, the record is hidden until one is chosen.
+    expect(screen.getByText('Message').parentElement?.className).toContain(
+      'max-lg:hidden',
+    )
+    unmount()
+
+    panes({ active: 'end' })
+    expect(
+      screen.getByText('Conversations').parentElement?.className,
+    ).toContain('max-lg:hidden')
+    expect(screen.getByText('Message').parentElement?.className).not.toContain(
+      'max-lg:hidden',
+    )
+  })
+
+  it('can be a fixed split with no control in the tab order', () => {
+    panes({ resizable: false, startSize: 30 })
+    expect(screen.queryByRole('separator')).toBeNull()
+    expect(screen.getByText('Conversations')).toBeTruthy()
+    expect(screen.getByText('Message')).toBeTruthy()
+  })
+})

package/src/templates/PaneLayout/PaneLayout.tsx

@@ -0,0 +1,226 @@
+import { cn } from '@talelk/newui-atoms'
+import {
+  createEffect,
+  createSignal,
+  createUniqueId,
+  type JSX,
+  Show,
+  splitProps,
+} from 'solid-js'
+
+/**
+ * Two panes side by side, with a draggable divider.
+ *
+ * This is the shape a workspace reaches for the moment it has a list and a
+ * record: mail's conversations beside the message, a ticket queue beside the
+ * ticket, a file tree beside the preview. Mail was hand-rolling it with a grid,
+ * a CSS variable and a *slider in the toolbar* — three pieces of plumbing per
+ * consumer, and a resize affordance in the wrong place.
+ *
+ * **The divider is the control.** `role="separator"` with a value: it drags with
+ * a pointer, moves with the arrow keys (Shift for a coarse step), jumps to the
+ * bounds with Home/End, and returns to the default split on double-click. Its
+ * value is the start pane's width as a percentage, so the split survives a
+ * resize of the window.
+ *
+ * **One pane on a narrow viewport.** Below `compactAt` the layout becomes a
+ * single column showing `active`; the app switches it when a record opens and
+ * renders its own back affordance. Nothing here hides content the reader cannot
+ * get back to.
+ */
+
+export type PaneBreakpoint = 'sm' | 'md' | 'lg'
+
+/** Below the breakpoint one pane shows; above it, both. */
+const HIDE_BELOW: Record<PaneBreakpoint, string> = {
+  sm: 'max-sm:hidden',
+  md: 'max-md:hidden',
+  lg: 'max-lg:hidden',
+}
+
+/** The divider is furniture: only the split breakpoint gets one. */
+const DIVIDER_FROM: Record<PaneBreakpoint, string> = {
+  sm: 'hidden sm:block',
+  md: 'hidden md:block',
+  lg: 'hidden lg:block',
+}
+
+/** Two panes with a resize column. */
+const SPLIT_FROM: Record<PaneBreakpoint, string> = {
+  sm: 'sm:grid-cols-[var(--pane-start,36%)_auto_minmax(0,1fr)]',
+  md: 'md:grid-cols-[var(--pane-start,36%)_auto_minmax(0,1fr)]',
+  lg: 'lg:grid-cols-[var(--pane-start,36%)_auto_minmax(0,1fr)]',
+}
+
+/** Two panes without one — the consumer owns the border. */
+const FIXED_FROM: Record<PaneBreakpoint, string> = {
+  sm: 'sm:grid-cols-[var(--pane-start,36%)_minmax(0,1fr)]',
+  md: 'md:grid-cols-[var(--pane-start,36%)_minmax(0,1fr)]',
+  lg: 'lg:grid-cols-[var(--pane-start,36%)_minmax(0,1fr)]',
+}
+
+export interface PaneLayoutProps {
+  /** The first pane: a list, a tree, a queue. */
+  start: JSX.Element
+  /** The second pane: the record the start pane selects. */
+  end: JSX.Element
+  /** Percent of the frame the start pane takes. Default `36`. */
+  startSize?: number
+  /** Narrowest the split may go, in percent. Default `20`. */
+  minStartSize?: number
+  /** Widest the split may go, in percent. Default `70`. */
+  maxStartSize?: number
+  /** Below this breakpoint only one pane shows. Default `lg`. */
+  compactAt?: PaneBreakpoint
+  /** Which pane a compact viewport shows. Default `start`. */
+  active?: 'start' | 'end'
+  /** Allow dragging the divider. Default `true`. */
+  resizable?: boolean
+  /** Accessible name of the resize control. Default `Resize panes`. */
+  resizeLabel?: string
+  class?: string
+}
+
+export function PaneLayout(props: PaneLayoutProps): JSX.Element {
+  const [local] = splitProps(props, [
+    'start',
+    'end',
+    'startSize',
+    'minStartSize',
+    'maxStartSize',
+    'compactAt',
+    'active',
+    'resizable',
+    'resizeLabel',
+    'class',
+  ])
+  const breakpoint = () => local.compactAt ?? 'lg'
+  const resizable = () => local.resizable !== false
+  const min = () => local.minStartSize ?? 20
+  const max = () => local.maxStartSize ?? 70
+  const clamp = (value: number) =>
+    Math.min(max(), Math.max(min(), Math.round(value * 10) / 10))
+
+  const [size, setSize] = createSignal<number | undefined>(undefined)
+  const split = () => clamp(size() ?? local.startSize ?? 36)
+  const startId = createUniqueId()
+  const label = () => local.resizeLabel ?? 'Resize panes'
+
+  let frame: HTMLDivElement | undefined
+  // The CSS variable rather than an inline width: the compact layout is a
+  // single `1fr` column, and an inline width would win over that rule.
+  createEffect(() => {
+    frame?.style.setProperty('--pane-start', `${split()}%`)
+  })
+
+  const [dragging, setDragging] = createSignal(false)
+  let originX = 0
+  let originSize = 0
+  let frameWidth = 0
+
+  const beginDrag = (event: PointerEvent) => {
+    if (event.button !== 0) return
+    const element = event.currentTarget as HTMLElement
+    originX = event.clientX
+    originSize = split()
+    frameWidth = frame?.getBoundingClientRect().width ?? 0
+    if (frameWidth === 0) return
+    event.preventDefault()
+    element.setPointerCapture(event.pointerId)
+    setDragging(true)
+  }
+
+  const moveDrag = (event: PointerEvent) => {
+    if (!dragging()) return
+    const delta = ((event.clientX - originX) / frameWidth) * 100
+    setSize(clamp(originSize + delta))
+  }
+
+  const endDrag = (event: PointerEvent) => {
+    if (!dragging()) return
+    setDragging(false)
+    const element = event.currentTarget as HTMLElement
+    if (element.hasPointerCapture(event.pointerId))
+      element.releasePointerCapture(event.pointerId)
+  }
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    const step = event.shiftKey ? 10 : 2
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault()
+      setSize(clamp(split() - step))
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault()
+      setSize(clamp(split() + step))
+    } else if (event.key === 'Home') {
+      event.preventDefault()
+      setSize(clamp(min()))
+    } else if (event.key === 'End') {
+      event.preventDefault()
+      setSize(clamp(max()))
+    }
+  }
+
+  return (
+    <div
+      ref={frame}
+      data-slot="pane-layout"
+      data-resizing={dragging() ? '' : undefined}
+      class={cn(
+        'grid min-h-0 min-w-0 flex-1',
+        resizable() ? SPLIT_FROM[breakpoint()] : FIXED_FROM[breakpoint()],
+        dragging() && 'cursor-col-resize select-none',
+        local.class,
+      )}
+    >
+      <div
+        id={startId}
+        data-slot="pane-start"
+        class={cn(
+          'min-h-0 min-w-0',
+          local.active === 'end' && HIDE_BELOW[breakpoint()],
+        )}
+      >
+        {local.start}
+      </div>
+
+      <Show when={resizable()}>
+        <div
+          data-slot="pane-resizer"
+          class={cn(
+            'relative w-px shrink-0 bg-outline-gray-1',
+            DIVIDER_FROM[breakpoint()],
+          )}
+        >
+          <button
+            type="button"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label={label()}
+            aria-controls={startId}
+            aria-valuenow={Math.round(split())}
+            aria-valuemin={min()}
+            aria-valuemax={max()}
+            class="absolute inset-y-0 -end-2 -start-2 z-raised cursor-col-resize rounded-3 focus-visible:focus-ring"
+            onPointerDown={beginDrag}
+            onPointerMove={moveDrag}
+            onPointerUp={endDrag}
+            onPointerCancel={endDrag}
+            onDblClick={() => setSize(undefined)}
+            onKeyDown={onKeyDown}
+          />
+        </div>
+      </Show>
+
+      <div
+        data-slot="pane-end"
+        class={cn(
+          'min-h-0 min-w-0',
+          local.active !== 'end' && HIDE_BELOW[breakpoint()],
+        )}
+      >
+        {local.end}
+      </div>
+    </div>
+  )
+}

package/src/templates/PaneLayout/index.ts

@@ -0,0 +1 @@
+export * from './PaneLayout'

package/src/templates/index.ts

@@ -0,0 +1,3 @@
+export * from './AppShell'
+export * from './AuthLayout'
+export * from './PaneLayout'