@vibeuncle/gpgb-ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.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.
+
+## 0.2.1
+- Release pipeline only: publishes through npm trusted publishing (no token). No code or appearance changes.
+
 ## 0.2.0 — first public release
 - Tokens: paper/ink/accent palette with dark mode, `accent-text`, `border-strong`, `focus`, `on-accent`/`on-danger`; radii, shadows, motion tokens.
 - `ds-*` CSS components and a React package: buttons, forms, cards, badges, tabs, modal, confirm dialog, sheet, menu, popover, tooltip, toast, stamp, skeleton.

package/DESIGN.md

@@ -187,7 +187,9 @@ Rule: no raw hex in app code; no Tailwind red/gray/orange.
 
 ## Layout
 
-- 4px base. Page gutter 24px; `ds-container` max 72rem. Card padding 16 to 24px; field gap 16px; button icon gap 8px.
+- **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.
 - Mobile-first; `sm` (640px) is the phone/tablet switch. On touch (`pointer: coarse`) inputs are 16px (no iOS zoom) and buttons are 44px tall; switches get a 44px hit area; tabs 40px.
 - Sections separate with generous vertical space (40px) and a hairline; groups inside stay tight.
 

package/DESIGN_SYSTEM.md

@@ -89,7 +89,7 @@ Rules: one flourish per view; everything else is quiet feedback that answers an
 ## Navigation
 | Piece | React | Notes |
 |---|---|---|
-| Header | `<SiteHeader logoSrc title nav actions menuButton containerClassName homeLabel>` | Graphic logo left; `nav` shows from `md`; `menuButton` shows below `md`. Includes a skip link to `#main` (give your `<main>` that id). `containerClassName` sets the content width (default 72rem `ds-container`; narrow apps pass e.g. `mx-auto max-w-2xl px-5`). Put short always-visible links in `actions` instead of `nav`. |
+| Header | `<SiteHeader logoSrc title nav actions menuButton containerClassName homeLabel>` | Graphic logo left; `nav` shows from `md`; `menuButton` shows below `md`. Includes a skip link to `#main` (give your `<main>` that id). `containerClassName` sets the content width (default the 72rem `ds-container` frame; pass `ds-container ds-container-wide` on wide pages; don't narrow it). Put short always-visible links in `actions` instead of `nav`. |
 | Nav links | `<NavLinks items>` / `ds-nav-link` | Pill links; current = accent-soft wash + `aria-current="page"`. |
 | Phone nav | `<MenuButton>` + `<NavDrawer items open onOpenChange>` | Left drawer (`Sheet side="left"`). Closes on link click, Esc, scrim. |
 | Account | `<UserMenu>` / `<SignInButton>` | Avatar + menu: settings, extras, sign out. Signed out: outline 登录 button. |
@@ -105,8 +105,18 @@ 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.
 
+## 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.
+- **Wide:** `ds-container ds-container-wide` (80rem). Editors and big tables only. Pass the same to `SiteHeader`'s `containerClassName`.
+- **Never narrow the frame.** Narrow content is a column *inside* it: `ds-measure` (42rem) for reading text or a single form. Sign-in, invite and not-found pages are a `CenteredPage` card (400px).
+- **Use the width:** `ds-split` / `<SplitLayout aside>` puts content on the left and a 22rem side panel (share link, QR, info, actions) on the right from 1024px, stacking below on smaller screens; `ds-grid-cards` is a responsive card grid (columns of at least 18rem); `<SidebarLayout>` is a left navigation column (240px) for editors, settings and admin.
+- **Phones:** everything is one column with 16px gutters; the frame only matters from tablet up.
+
+Tailwind note: `rounded-sm/md/lg/xl` (6/8/12/16px) and `shadow-sm/md/lg` are the system scale (they are defined in `@theme`), so they differ slightly from Tailwind's defaults in every app that imports the package. Use them rather than arbitrary radii.
+
 ## Page layouts
-`<PageShell header footer>` (header, 72rem container, footer: lists, galleries, dashboards) · `<CenteredPage>` (one 400px card: sign-in, invite, not-found) · `<SidebarLayout aside>` (240px sticky aside from `lg`; on phones move the aside into a bottom Sheet: editors, settings, admin) · `<PageTitle title description actions breadcrumbs>` (serif title, primary action first on phones).
+`<PageShell header footer wide>` (header, frame, footer: lists, galleries, dashboards) · `<CenteredPage>` (one 400px card: sign-in, invite, not-found) · `<SplitLayout aside>` (content + right side panel) · `<SidebarLayout aside>` (left navigation column: editors, settings, admin; on phones move it into a bottom Sheet) · `<PageTitle title description actions breadcrumbs>` (serif title, primary action first on phones).
 
 ## Content & voice
 Warm, plain, respectful: a helpful neighbour at the community centre. Chinese (简体) first, English beside or beneath. Say what happened and what to do next; never blame the person.

package/README.md

@@ -17,7 +17,7 @@ Then follow "Using it in an app" in [DESIGN_SYSTEM.md](./DESIGN_SYSTEM.md) (CSS
 1. Change tokens/components; update the style guide and docs in the same commit; add a `CHANGELOG.md` entry.
 2. `npm run check` (typecheck + browser tests; also runs in CI).
 3. `npm version minor` (or `patch`), then `git push --follow-tags`.
-4. The tag triggers `.github/workflows/release.yml`, which publishes to npm when the repo secret `NPM_TOKEN` is set. Or publish by hand: `npm publish`.
+4. The tag triggers `.github/workflows/release.yml`, which publishes to npm through trusted publishing (OIDC: npm trusts this repo and workflow, so there is no token to manage).
 5. Apps pick it up via Renovate/Dependabot PRs (or `npm update @vibeuncle/gpgb-ui`).
 
 Licence: proprietary (`UNLICENSED`): published for 大道大商 / VibeUncle apps, no reuse grant.

package/package.json

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

package/src/components/Layout.tsx

@@ -6,12 +6,12 @@ import { t } from '../copy'
 import type { Lang } from '../copy'
 import { useLink } from '../link'
 
-/** Standard page: header, main, footer. Content width via `ds-container`. */
-export function PageShell({ header, children, footer }: { header?: ReactNode; children: ReactNode; footer?: ReactNode }) {
+/** Standard page: header, main, footer, all on the 72rem frame (`wide` = 80rem for editors and big tables). */
+export function PageShell({ header, children, footer, wide }: { header?: ReactNode; children: ReactNode; footer?: ReactNode; wide?: boolean }) {
   return (
     <div className="ds-page">
       {header}
-      <main id="main" className="ds-container py-10">{children}</main>
+      <main id="main" className={cn('ds-container py-10', wide && 'ds-container-wide')}>{children}</main>
       {footer}
     </div>
   )
@@ -38,6 +38,11 @@ export function PageTitle({ title, description, actions, breadcrumbs }: { title:
   )
 }
 
+/** Content + side panel (share link, QR, info, actions). Panel is on the right from 1024px (sticky) and stacks below the content on smaller screens. */
+export function SplitLayout({ aside, children }: { aside: ReactNode; children: ReactNode }) {
+  return <div className="ds-split"><div className="min-w-0">{children}</div><aside>{aside}</aside></div>
+}
+
 /** Sidebar + content (editor, settings, admin). Sidebar is sticky from `lg`; on phones put its content in a Sheet instead. */
 export function SidebarLayout({ aside, children, wide }: { aside: ReactNode; children: ReactNode; wide?: boolean }) {
   return <div className={cn('ds-shell', wide && 'ds-shell-wide')}><aside>{aside}</aside><div className="min-w-0">{children}</div></div>

package/src/components/SiteHeader.tsx

@@ -7,7 +7,7 @@ import { useLink } from '../link'
  *  Phones: pass `menuButton` (see MenuButton + NavDrawer) and hide `nav` below `md` (NavLinks className="hidden md:flex"). */
 export function SiteHeader({ logoSrc, logoAlt = '大道大商', title, nav, actions, menuButton, href = '/', containerClassName = 'ds-container', homeLabel }: {
   logoSrc: string; logoAlt?: string; title?: string; nav?: ReactNode; actions?: ReactNode; menuButton?: ReactNode; href?: string
-  /** Width/gutter of the header content. Default `ds-container` (72rem). Narrow apps pass e.g. 'mx-auto max-w-2xl px-5' to line up with their page column. */
+  /** Width/gutter of the header content. Default `ds-container` (the 72rem frame). Keep it equal to the page's frame: pass 'ds-container ds-container-wide' on wide pages. Don't narrow it; put narrow content in a column inside the frame. */
   containerClassName?: string
   /** aria-label for the logo link when there is no title (e.g. "接龙 首页"). */
   homeLabel?: string

package/styles/components.css

@@ -288,7 +288,20 @@
   .ds-header { border-bottom: 1px solid var(--color-border-soft); }
   /* 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; }
-  .ds-container { margin-inline: auto; width: 100%; max-width: 72rem; padding-inline: 24px; }
+  /* Page width: the 72rem frame (1152px, = draw.gpgb.app), gutters 16px then 24px from 640px, so 1104px of content on desktop.
+     Header and page content share it. Never use a narrower frame: put narrow content in a column INSIDE it (ds-measure). */
+  .ds-container { margin-inline: auto; width: 100%; max-width: 72rem; padding-inline: 16px; }
+  @media (min-width: 640px) { .ds-container { padding-inline: 24px; } }
+  .ds-container-wide { max-width: 80rem; }   /* editors, big tables: add to ds-container */
+  .ds-measure { max-width: 42rem; }          /* reading text / single-column form inside the frame */
+  /* Content + side panel. From 1024px the panel sits to the right (22rem, sticky); below that it stacks under the content. */
+  .ds-split { display: grid; gap: 24px; }
+  @media (min-width: 1024px) {
+    .ds-split { grid-template-columns: minmax(0, 1fr) 22rem; gap: 32px; }
+    .ds-split > aside { position: sticky; top: 24px; align-self: start; }
+  }
+  /* Responsive card grid: as many columns as fit at >=18rem. */
+  .ds-grid-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
   /* Underline draws in from the left on hover. */
   .ds-link {
     color: var(--color-ink-soft); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;