@vibeuncle/gpgb-ui 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 Versions follow semver while 0.x: **minor** = new components or token changes that may shift appearance, **patch** = fixes. Apps pin with `^0.x.0`.
 
+## 0.4.0
+- **Standard sizes:** header row is a fixed 72px (`ds-header-row`, built into `SiteHeader`) so the logo and page sit at the same height in every app; exact control heights, sm 32 / md 40 / lg 48px for buttons and inputs (`ds-input-lg` added), tabs 40px; page head classes `ds-page-head`, `ds-title` (36/48px), `ds-title-sm`, `ds-lede`; `ds-search` and `<SearchInput>`; `<PageTitle small>`. `ds-page-title` removed (use `ds-page-head`).
+- The browser test suite now measures these sizes in the style guide.
+- Appearance: buttons that were 46px (lg) are now 48px; inputs 39px are 40px; small inputs 34px are 32px; headers that depended on their content are now 72px.
+
 ## 0.3.0
 - **Page width standard:** the 72rem (1152px) frame of draw.gpgb.app, now with responsive gutters (16px, 24px from 640px) so desktop content is 1104px. `ds-container-wide` (80rem), `ds-measure` (42rem reading column inside the frame), `ds-split` / `<SplitLayout>` (content + 22rem side panel), `ds-grid-cards` (auto-fill card grid). `<PageShell wide>`.
 - Docs: Tailwind's `rounded-sm/md/lg/xl` and `shadow-sm/md/lg` follow the system scale (they are defined in `@theme`), and the page-width rules.

package/DESIGN.md

@@ -187,6 +187,8 @@ Rule: no raw hex in app code; no Tailwind red/gray/orange.
 
 ## Layout
 
+- **Standard sizes (every app):** header 72px (+1px border) with the 24px (`h-6`) graphic logo; page title 36px (48px from 640px), 40/48px below the header; buttons and inputs 32 / 40 / 48px (page action = lg; toolbar and search = md; row actions = sm); segmented tabs and the language toggle 40px. Fixed heights, not by-products of padding.
+
 - **Page frame:** 72rem (1152px) centered, as draw.gpgb.app; gutters 16px, then 24px from 640px (1104px of content on desktop). The header and the content share it. Editors and big tables use the 80rem wide frame. Never a narrower frame: narrow content is a 42rem column (`ds-measure`) inside it; sign-in, invite and not-found are a 400px centered card.
 - **Using the width:** content plus a 22rem side panel (`ds-split`, from 1024px, sticky; stacks on smaller screens), responsive card grids (`ds-grid-cards`, columns of at least 18rem), or a 240px left navigation column for editors and admin.
 - 4px spacing base. Card padding 16 to 24px; field gap 16px; button icon gap 8px.

package/DESIGN_SYSTEM.md

@@ -105,6 +105,21 @@ Pick by job: **Menu** = list of actions; **Popover** = a little extra content or
 - Modal, ConfirmDialog and Sheet trap focus, close on Esc, lock scroll and restore focus to the opener. Footer order: outline cancel, then the primary or danger action, whose label names the action ("删除海报", not "确定").
 - Positioning is simple (below the trigger, start or end aligned); there is no collision flipping yet. Keep triggers away from the bottom edge, or use a Sheet on phones.
 
+## Standard sizes (identical in every app)
+| Thing | Size | Class |
+|---|---|---|
+| Header | **72px** tall (+1px border), content centred, whatever is inside (language toggle, buttons, nothing); inner content at most 48px | `ds-header-row` (built into `SiteHeader`) |
+| Logo | **24px** high (`h-6`), always the graphic mark | |
+| Page title | **36px**, 48px from 640px, serif 500, tracking -0.025em. Detail pages with long titles: 30px / 36px | `ds-title`, `ds-title-sm` |
+| Page head | title + lede on the left, actions right; **40px** below the header (48px from 640px) | `ds-page-head`, `ds-lede`, `<PageTitle>` |
+| Buttons | **sm 32 / md 40 / lg 48px**; icon buttons are square at the same size | `ds-btn` `-sm` `-lg` `-icon` |
+| Inputs | **sm 32 / md 40 / lg 48px** | `ds-input` `-sm` `-lg` |
+| Search | the 40px input with a leading icon | `ds-search` / `<SearchInput>` |
+| Segmented tabs / language toggle | **40px** | `ds-tabs` |
+| Touch (`pointer: coarse`) | controls 44px, input text 16px | automatic |
+
+Use: page-level action (new poster, new album, create group) = **lg**; toolbar and in-card actions, search and filter tabs = **md** (they line up in one 40px row); compact row actions = **sm**. Don't set your own heights or text sizes on these. The style guide's "Sizes & page head" section measures them live, and `npm test` asserts them.
+
 ## Page width
 One width across all 大道大商 apps: the **72rem frame** (1152px, centered), as on draw.gpgb.app. Gutters are 16px, then 24px from 640px, so desktop content is **1104px** wide. The header and the page content share the frame.
 - **Standard:** `ds-container` (72rem). Galleries, dashboards, chat, lists, forms-with-context.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibeuncle/gpgb-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "大道大商 shared design system: tokens, CSS components, React components, style guide",
   "license": "UNLICENSED",
   "repository": {

package/src/components/Layout.tsx

@@ -22,18 +22,17 @@ export function CenteredPage({ children }: { children: ReactNode }) {
   return <div className="ds-page-centered"><main id="main" className="ds-card">{children}</main></div>
 }
 
-/** Page title row: serif title + description on the left, actions on the right (primary action first on phones). */
-export function PageTitle({ title, description, actions, breadcrumbs }: { title: string; description?: string; actions?: ReactNode; breadcrumbs?: ReactNode }) {
+/** The page head, identical in position and type on every page: serif title (36px, 48px from 640px; `small` = 30/36px for detail pages
+ *  with long titles), optional lede, actions on the right. Sits 40/48px below the header. */
+export function PageTitle({ title, description, actions, breadcrumbs, small }: { title: string; description?: string; actions?: ReactNode; breadcrumbs?: ReactNode; small?: boolean }) {
   return (
-    <div className="mb-9">
-      {breadcrumbs && <div className="mb-3">{breadcrumbs}</div>}
-      <div className="ds-page-title !mb-0">
-        <div className="min-w-0">
-          <h1 className="font-display text-4xl font-medium sm:text-5xl">{title}</h1>
-          {description && <p className="mt-3 max-w-[44em] text-[13px] leading-[1.85] text-ink-soft">{description}</p>}
-        </div>
-        {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
+    <div className="ds-page-head">
+      <div className="min-w-0">
+        {breadcrumbs && <div className="mb-3">{breadcrumbs}</div>}
+        <h1 className={small ? 'ds-title-sm' : 'ds-title'}>{title}</h1>
+        {description && <p className="ds-lede">{description}</p>}
       </div>
+      {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
     </div>
   )
 }

package/src/components/SearchInput.tsx

@@ -0,0 +1,13 @@
+import { Search } from 'lucide-react'
+import type { InputHTMLAttributes } from 'react'
+import { cn } from '../cn'
+
+/** Search field: the standard 40px `ds-input` with a leading icon. Pass `label` (the accessible name) and a placeholder. */
+export function SearchInput({ label, className, wrapperClassName, ...rest }: InputHTMLAttributes<HTMLInputElement> & { label: string; wrapperClassName?: string }) {
+  return (
+    <div className={cn('ds-search', wrapperClassName)}>
+      <Search aria-hidden />
+      <input type="search" aria-label={label} className={cn('ds-input', className)} {...rest} />
+    </div>
+  )
+}

package/src/components/SiteHeader.tsx

@@ -16,7 +16,7 @@ export function SiteHeader({ logoSrc, logoAlt = '大道大商', title, nav, acti
   return (
     <header className="ds-header">
       <a href="#main" className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 ds-btn ds-btn-primary">Skip to content</a>
-      <div className={`${containerClassName} flex items-center justify-between gap-x-4 gap-y-2 py-4`}>
+      <div className={`${containerClassName} ds-header-row flex items-center justify-between gap-x-4 gap-y-2`}>
         <div className="flex min-w-0 items-center gap-3">
           {menuButton && <div className="md:hidden">{menuButton}</div>}
           <Link href={href} aria-label={homeLabel} className="flex min-w-0 items-center gap-4">

package/src/index.ts

@@ -17,3 +17,4 @@ export * from './copy'
 export * from './hooks'
 export * from './components/Stamp'
 export * from './link'
+export * from './components/SearchInput'

package/styles/components.css

@@ -36,9 +36,12 @@
   .ds-hint { font-size: 12px; color: var(--color-ink-faint); }
 
   /* ---- Buttons: pills. One primary per view. ---- */
+  /* Control heights are a standard, not a by-product of padding: sm 32px, md 40px, lg 48px (buttons, inputs, tabs). Page-level
+     action = lg; toolbar and in-card actions = md; compact row actions = sm. */
   .ds-btn {
+    --ds-h: 40px; min-height: var(--ds-h);
     display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-    padding: 10px 20px; font-size: 14px; font-weight: 500; line-height: 1.3;
+    padding: 0 20px; font-size: 14px; font-weight: 500; line-height: 1.3;
     border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
     transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out,
       border-color var(--duration-fast) ease-out, box-shadow var(--duration-fast) ease-out,
@@ -46,9 +49,9 @@
   }
   .ds-btn:active:not(:disabled) { transform: scale(0.97); }
   .ds-btn:disabled, .ds-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
-  .ds-btn-sm { padding: 6px 14px; font-size: 13px; }
-  .ds-btn-lg { padding: 12px 24px; font-size: 15px; }
-  .ds-btn-icon { padding: 8px; aspect-ratio: 1; }
+  .ds-btn-sm { --ds-h: 32px; padding: 0 14px; font-size: 13px; }
+  .ds-btn-lg { --ds-h: 48px; padding: 0 24px; font-size: 15px; }
+  .ds-btn-icon { padding: 0; width: var(--ds-h); }
   .ds-btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-sm); }
   .ds-btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }
   .ds-btn-outline { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-soft); }
@@ -70,7 +73,7 @@
   /* ---- Forms ---- */
   .ds-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--color-ink); }
   .ds-input {
-    width: 100%; padding: 10px 14px; font-size: 14px; color: var(--color-ink);
+    width: 100%; min-height: 40px; padding: 9px 14px; font-size: 14px; line-height: 1.4; color: var(--color-ink);
     background: var(--color-surface); border: 1px solid var(--color-border-strong);
     border-radius: var(--radius-md); transition: border-color var(--duration-fast) ease-out;
   }
@@ -80,7 +83,9 @@
   .ds-input:disabled { opacity: 0.55; cursor: not-allowed; }
   .ds-input[aria-invalid='true'] { border-color: var(--color-danger); }
   .ds-input[aria-invalid='true']:focus-visible { outline-color: var(--color-danger); border-color: var(--color-danger); }
-  .ds-input-sm { padding: 7px 12px; font-size: 13px; }
+  .ds-input-sm { min-height: 32px; padding: 5px 12px; font-size: 13px; }
+  .ds-input-lg { min-height: 48px; padding: 12px 16px; font-size: 15px; }
+  textarea.ds-input, select.ds-input-sm, textarea.ds-input-sm { min-height: 0; }
   textarea.ds-input { resize: vertical; min-height: 88px; line-height: 1.6; }
   .ds-error { margin-top: 6px; font-size: 12px; color: var(--color-danger); }
   /* Checkbox / radio: native control, brand-coloured, with a comfortable hit target. */
@@ -126,11 +131,11 @@
 
   /* ---- Segmented control / tabs (role=tablist) ---- */
   .ds-tabs {
-    display: flex; gap: 6px; padding: 4px; width: fit-content; background: var(--color-surface);
+    display: flex; gap: 4px; padding: 3px; width: fit-content; background: var(--color-surface);   /* 3 + 32 + 3 + 2 border = 40px */
     border: 1px solid var(--color-border-soft); border-radius: var(--radius-md);
   }
   .ds-tab {
-    padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--color-ink-soft); cursor: pointer;
+    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--color-ink-soft); cursor: pointer;
     border: 0; background: transparent; border-radius: var(--radius-sm);
     transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
   }
@@ -282,10 +287,26 @@
   @media (min-width: 1024px) { .ds-shell { grid-template-columns: 240px minmax(0, 1fr); } .ds-shell-wide { grid-template-columns: 280px minmax(0, 1fr); } }
   .ds-shell > aside { align-self: start; }
   @media (min-width: 1024px) { .ds-shell > aside { position: sticky; top: 24px; } }
-  .ds-page-title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
+  /* Page head: the same position and type on every page. Title 36px (48px from 640px), 40px (48px) above it, optional lede and
+     actions on the right. Detail pages with long titles use ds-title-sm (30px / 36px). */
+  .ds-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding-top: 40px; padding-bottom: 24px; }
+  @media (min-width: 640px) { .ds-page-head { padding-top: 48px; padding-bottom: 32px; } }
+  .ds-title { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
+  .ds-title-sm { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
+  @media (min-width: 640px) { .ds-title { font-size: 48px; } .ds-title-sm { font-size: 36px; } }
+  .ds-lede { margin-top: 12px; max-width: 48rem; font-size: 14px; line-height: 1.7; color: var(--color-ink-soft); }
+  @media (min-width: 640px) { .ds-lede { font-size: 15px; } }
+  /* Search field: a ds-input with a leading icon. <div class="ds-search"><svg/><input class="ds-input" type="search"></div> */
+  .ds-search { position: relative; display: block; width: 100%; }
+  .ds-search > svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--color-ink-faint); pointer-events: none; }
+  .ds-search > .ds-input { padding-left: 38px; }
+  .ds-search > .ds-input::-webkit-search-cancel-button { display: none; }
 
   /* ---- Header / layout ---- */
   .ds-header { border-bottom: 1px solid var(--color-border-soft); }
+  /* Every header is the same height whatever sits in it (language toggle, buttons, nothing): 72px + 1px border, content centred.
+     The logo is always h-6 (24px). Content must not be taller than 48px. */
+  .ds-header-row { min-height: 72px; padding-block: 12px; }
   /* Hairline between the 大道大商 mark and the app name, so the graphic logo and the app title don't read as one phrase. */
   .ds-brand-divider { width: 1px; height: 20px; flex-shrink: 0; background: var(--color-border-strong); opacity: 0.55; }
   /* Page width: the 72rem frame (1152px, = draw.gpgb.app), gutters 16px then 24px from 640px, so 1104px of content on desktop.
@@ -350,9 +371,9 @@
 
   /* Touch: >=16px inputs (iOS zoom) and 44px tap targets; fine pointers keep compact sizes. */
   @media (pointer: coarse) {
-    .ds-input, .ds-input-sm { font-size: 16px; padding-top: 11px; padding-bottom: 11px; }
-    .ds-btn { min-height: 44px; }
-    .ds-tab { min-height: 40px; }
+    .ds-input, .ds-input-sm { font-size: 16px; min-height: 44px; }
+    .ds-btn { min-height: max(44px, var(--ds-h)); }
+    .ds-tab { min-height: 36px; }
     .ds-menu-item { min-height: 44px; }
     .ds-nav-link { min-height: 40px; }
   }