@tempoxyz/ds 0.3.5 → 0.3.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/web/components/AppShell.tsx

@@ -81,11 +81,8 @@ function useShell() {
  */
 export namespace AppShell {
   /**
-   * Renders the 56px page header bar at the top of `Main`, in the fill of the sidebar with a bottom
-   * border, holding the title, actions and the compact-viewport `Trigger`. It spans the full width
-   * of `Main`. With `align="center"` on wide viewports, its fill and border continue to the end
-   * edge. A `Main` that scrolls itself clips them at its own edge, so scroll the root instead when
-   * the shell fills a fixed-height region.
+   * Renders the transparent 56px page header at the top of `Main`, holding the title, actions and
+   * the compact-viewport `Trigger`. It spans the full width of `Main`.
    */
   export function Header(props: Header.Props) {
     const { className, vars, ...attributes } = props
@@ -623,16 +620,11 @@ namespace styles {
     { id: 'tds/web/app-shell/drawer' },
   )
 
-  // The bar bleeds into the padding of `Main`, so it spans the column and starts at its top edge.
-  // The header takes the fill of the sidebar, so the two frame the page.
+  // The header bleeds into the padding of `Main`, so it spans the column at its top edge.
   export const header = variants(
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'background.sidebar',
-        borderBottomColor: 'line.secondary',
-        borderBottomStyle: 'solid',
-        borderBottomWidth: '1px !custom',
         boxSizing: 'border-box',
         columnGap: '8',
         display: 'flex',
@@ -643,7 +635,8 @@ namespace styles {
         minHeight: '56',
         minWidth: '0',
         paddingInline: '16',
-        '@media (min-width: 640px)': { marginInline: '-2rem !custom', paddingInline: '24' },
+        // The title starts on the 28px edge of the content below it, as the Page Header pads it.
+        '@media (min-width: 640px)': { marginInline: '-1.75rem !custom', paddingInline: '28' },
         // Below 1024px the fixed trigger covers the end of the bar, so header actions end 8px
         // before it: its 40px plus its 16px inset. A collapsed sidebar hides it from 768px.
         '@media (max-width: 1023px)': { paddingInlineEnd: '64' },
@@ -667,7 +660,7 @@ namespace styles {
         paddingInline: '16',
         paddingTop: '20',
         width: '100% !custom',
-        '@media (min-width: 640px)': { paddingInline: '32' },
+        '@media (min-width: 640px)': { paddingInline: '28' },
       },
     },
     { id: 'tds/web/app-shell/main' },
@@ -704,23 +697,7 @@ namespace styles {
       defaultVariants: { align: 'center' },
       variants: {
         align: {
-          // The header bar continues across the end gutter as the outset of a border image, which
-          // is ink overflow. It adds no scroll and changes no layout, and a scrolling `Main` clips
-          // it at its own edge. The image draws the fill and the 1px bottom border of the header.
-          // The outset takes the gutter from the viewport width, since the root of an application
-          // frame spans the viewport.
-          center: {
-            '@media (min-width: 1024px)': {
-              selectors: {
-                '& > main > [data-app-shell-header]': {
-                  borderImageOutset: `0 max(0px, calc((100vw - var(--sidebar-width, 16rem) - ${vars.container['1024']}) / 2)) 0 0 !custom`,
-                  borderImageSlice: '0 fill !custom',
-                  borderImageSource: `linear-gradient(${vars.color.background.sidebar} calc(100% - 1px), ${vars.color.line.secondary} 0) !custom`,
-                  borderImageWidth: '0 !custom',
-                },
-              },
-            },
-          },
+          center: {},
           start: {
             selectors: {
               '&::after, &::before': { display: 'none !custom' },

package/src/web/icons/README.md

@@ -1,5 +1,7 @@
 # Web Icons
 
+`@tempoxyz/ds/icons` exports the 303 Platform icons that the components render and every icon of [Central Icons](central/README.md). A Central icon whose name a Platform icon uses takes a `2` suffix, such as `ArrowDown2`.
+
 ## Usage
 
 Import individual SVG components. Icons inherit CSS `color`, default to `1em × 1em` based on inherited font size, and accept native SVG attributes and refs. Decorative icons are hidden from assistive technology. Give meaningful icons an accessible name.

package/src/web/icons/central/Central.tsx

@@ -0,0 +1,66 @@
+/** Renders generated Central icon data with the Platform icon contract. @module */
+import { createElement, useId } from 'react'
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react'
+
+/**
+ * Returns an icon component that draws a generated Central icon. The icon renders at `1em`, inherits
+ * `currentColor`, hides itself from assistive technology unless it has an accessible name, and accepts
+ * native SVG props and refs. Paths at the set's 1.5 stroke follow the root `strokeWidth`, which
+ * defaults to `1.5`. Paths with another authored width keep it. Clipping and mask IDs are scoped per
+ * instance.
+ *
+ * @example
+ * export const Zap = icon([['path', { d: 'M19.79 8.75H13.75', stroke: 'currentColor' }]])
+ */
+export function icon(nodes: icon.Nodes): icon.ReturnType {
+  return function CentralIcon(props) {
+    const id = useId()
+    const labelled = Boolean(props['aria-label'] || props['aria-labelledby'])
+
+    return (
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        strokeWidth={1.5}
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden={labelled ? undefined : true}
+        role={labelled ? 'img' : undefined}
+        {...props}
+      >
+        {render(nodes, id)}
+      </svg>
+    )
+  }
+}
+
+export declare namespace icon {
+  /** An SVG element: its tag, its React props, and its children. `{id}` in a value marks the instance ID. */
+  type Node = readonly [
+    tag: string,
+    props: Readonly<Record<string, number | string>>,
+    children?: Nodes,
+  ]
+
+  /** The SVG elements of an icon, in paint order. */
+  type Nodes = readonly Node[]
+
+  /** Native SVG props. */
+  type Props = Omit<ComponentPropsWithRef<'svg'>, 'children' | 'dangerouslySetInnerHTML'>
+
+  /** An icon component with the Platform icon contract. */
+  type ReturnType = (props: Props) => ReactElement
+}
+
+function render(nodes: icon.Nodes, id: string): ReactNode {
+  return nodes.map((node, index) => {
+    const [tag, attributes, children] = node
+    const props: Record<string, number | string> = { key: index }
+
+    for (const [name, value] of Object.entries(attributes))
+      props[name] = typeof value === 'string' ? value.replaceAll('{id}', id) : value
+
+    return createElement(tag, props, children ? render(children, id) : undefined)
+  })
+}

package/src/web/icons/central/README.md

@@ -0,0 +1,29 @@
+# Central Icons
+
+`@tempoxyz/ds/icons` re-exports every icon of the [Central Icons](https://centralicons.com) package `@central-icons-react/round-outlined-radius-1-stroke-1.5`, the default style of the [Central Icon System](https://www.figma.com/design/GGiLAoCosR3YvokjJ18W9f/central-icon-system-v1.28?node-id=7-118), as generated icon data.
+
+```tsx
+import { SettingsGear2 } from '@tempoxyz/ds/icons'
+
+;<SettingsGear2 aria-label="Settings" strokeWidth={2.25} />
+```
+
+## Contract
+
+Each icon follows the Platform icon contract. It renders at `1em`, inherits `currentColor`, hides itself from assistive technology unless it has an accessible name, and accepts native SVG props and refs.
+
+Icons draw on a 24 by 24 grid with a 1.5 stroke, so the stroke scales with the icon: 1px at 16px and 1.5px at 24px. Paths at the 1.5 stroke follow the root `strokeWidth`. Paths with another authored width keep it.
+
+## Updates
+
+`index.ts` and `icons/` are generated. To take a new Central release:
+
+1. Bump the package version in the `pnpm-workspace.yaml` catalog and run `pnpm install`.
+2. Run `pnpm icons:central` to rewrite the icon modules from the installed package.
+3. Run the `Central.test.tsx` browser suite, which fails when an export is missing or extra.
+
+The package is a development dependency. Its install script checks a Central license key, which pnpm skips through `ignoredBuiltDependencies`. The published library ships the generated icons, so consumers install neither the package nor a key.
+
+## Source
+
+Names follow Central's package names without the `Icon` prefix, such as `SettingsGear2`. A name that a Platform icon uses takes a `2` suffix, such as `ArrowDown2`, or the next free number when Central already uses it, such as `Bank3`. Names that start with a digit keep the prefix, such as `Icon3d`, and `Infinity` becomes `InfinityIcon2`. The package ships no SVG files. Central Icons are licensed from iconists under the redistribution rights Tempo confirmed on October 1, 2026, and keep their original licensing terms.