@usableapp/cardds 0.1.3 → 0.1.5

package/dist/sheets/SheetHead.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /** SheetHead — the stage sheet's three-column head: round button · centred title + sub · round button. A step sheet uses a CardHead instead. */
 export function SheetHead({ lead, title, sub, trail, className, ...rest }) {
     return (_jsxs("div", { className: cx('sheet__head', className), ...rest, children: [lead ?? _jsx("span", {}), _jsxs("div", { children: [_jsx("h2", { className: "sheet__title", children: title }), sub != null && _jsx("span", { className: "sheet__sub", children: sub })] }), trail ?? _jsx("span", {})] }));

package/dist/sheets/SheetStack.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * SheetStack — the MENU: sheets stacked like paper at the middle of the home screen, every one a main section.
  * Children are Cards, direct children only, at most five: first = the back of the stack, last = the front (open) sheet.

package/dist/sheets/SheetStage.d.ts

@@ -6,7 +6,7 @@ export interface SheetStageProps extends ComponentPropsWithoutRef<'div'> {
     hero?: ReactNode;
     /** blur and darken the background (the dim page sheet) */
     dim?: boolean;
-    /** the ask drawer stage: a Lift card over a dark Drawer */
+    /** the ask stage: the page under a scrim, one Modal (Lift + Drawer) at the centre */
     ask?: boolean;
     /** a footnote strip on the scrim under a raised sheet */
     foot?: ReactNode;

package/dist/sheets/SheetStage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
  * SheetStage — a page-level overlay stage, its own 100dvh page: a Sheet over a map (or over a `hero` — one
  * thing centred in the band a half sheet leaves open), the dim page sheet

package/dist/sheets/Step.d.ts

@@ -2,14 +2,13 @@ import type { ComponentPropsWithoutRef } from 'react';
 export interface StepProps extends ComponentPropsWithoutRef<'section'> {
 }
 /**
- * Step — one screen, one task. Children: a StepCard first (what the member READS), an optional Sheet last
+ * Step — one screen, one task. Children: a StepCard first (what the member READS — words on the base, not a card), an optional Sheet last
  * (what the member DOES); the ActionBar goes OUTSIDE, after the Step. It fills a `Screen fill` between the top bar
  * and the bar's room, bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
  * Reads → StepCard only. Acts → StepCard + Sheet. Never hand-lay a step, never write a sheet height.
  */
 export declare function Step({ className, ...rest }: StepProps): import("react").JSX.Element;
 export interface StepCardProps extends ComponentPropsWithoutRef<'article'> {
-    tone?: 1 | 2 | 3;
 }
-/** StepCard — the reading card of a Step: a normal Card (CardHead · content) that hugs its words and scrolls inside itself when the column runs out. */
-export declare function StepCard({ tone, className, ...rest }: StepCardProps): import("react").JSX.Element;
+/** StepCard — the reading block of a Step: the words on the base, no frame, no area colour (a CardHead · content, with a card's rhythm); it hugs its words and scrolls inside itself when the column runs out. */
+export declare function StepCard({ className, ...rest }: StepCardProps): import("react").JSX.Element;

package/dist/sheets/Step.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 /**
- * Step — one screen, one task. Children: a StepCard first (what the member READS), an optional Sheet last
+ * Step — one screen, one task. Children: a StepCard first (what the member READS — words on the base, not a card), an optional Sheet last
  * (what the member DOES); the ActionBar goes OUTSIDE, after the Step. It fills a `Screen fill` between the top bar
  * and the bar's room, bleeds to the screen's edges (the sheet is full-width), and follows its TopBar/AppBar directly.
  * Reads → StepCard only. Acts → StepCard + Sheet. Never hand-lay a step, never write a sheet height.
@@ -9,7 +9,7 @@ import { cx } from '../cx';
 export function Step({ className, ...rest }) {
     return _jsx("section", { className: cx('step', className), ...rest });
 }
-/** StepCard — the reading card of a Step: a normal Card (CardHead · content) that hugs its words and scrolls inside itself when the column runs out. */
-export function StepCard({ tone, className, ...rest }) {
-    return _jsx("article", { className: cx('card step__card', tone && tone !== 1 && `card--${tone}`, className), ...rest });
+/** StepCard — the reading block of a Step: the words on the base, no frame, no area colour (a CardHead · content, with a card's rhythm); it hugs its words and scrolls inside itself when the column runs out. */
+export function StepCard({ className, ...rest }) {
+    return _jsx("article", { className: cx('step__card', className), ...rest });
 }

package/dist/type/Icon.d.ts

@@ -1,4 +1,4 @@
-import { type IconName } from './icons';
+import { type IconName } from './icons.js';
 export type { IconName };
 export interface IconProps extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'children'> {
     /** one of the 57 Lucide symbols in icons.svg (arrow-left, bell, check, chevron-down, id-card, plus, x, …) */

package/dist/type/Icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from '../cx';
-import { ICONS } from './icons';
+import { cx } from '../cx.js';
+import { ICONS } from './icons.js';
 /**
  * Icon — a Lucide stroke icon from the cardds sprite, inlined (no icons.svg file needed at runtime).
  * Sizes are the tokens the CSS defines: `.icon` 28px, `--sm` 28px (a semantic size, same as md today), `--xs` 16px, `--lg` 32px.

package/dist/type/Text.js

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { cx } from '../cx';
+import { cx } from '../cx.js';
 const DEFAULT_AS = {
     display: 'h2', h1: 'h2', h2: 'h2', title: 'p', body: 'p', label: 'span', caption: 'span', overline: 'span', stat: 'p',
 };

package/package.json

@@ -1,18 +1,16 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "license": "UNLICENSED",
   "type": "module",
-  "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth), app/ is the Commons Time Bank PWA built from them, demo/ the CSS spec pages the acceptance tests (tests/) drive.",
+  "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/everysundays/cardds.git"
   },
   "scripts": {
-    "dev": "vite --config app/vite.config.ts",
+    "dev": "vite --config gallery/vite.config.ts",
     "build": "node scripts/build-icons.mjs && tsc -p tsconfig.json && node scripts/flatten-css.mjs",
-    "build:app": "node scripts/build-icons.mjs && vite build --config app/vite.config.ts",
-    "preview:app": "vite preview --config app/vite.config.ts",
     "test": "playwright test",
     "validate:inbox": "node scripts/validate-inbox.mjs",
     "mcp:verify": "cd mcp-server && npm run verify && npm run verify:http",