altitude-design 0.1.0 → 0.2.0

package/README.md

@@ -2,8 +2,8 @@
 
 A React component library where **height is the interface**. Its one idea: the ground is the record. Settled content sits on the ground; anything live rises above it; anything waiting to receive sinks below it.
 
-- **Storybook:** every component, with its guidelines and a live preview in all four schemes: `https://<owner>.github.io/<repo>/`
-- **The design guide:** [`project/README.md`](project/README.md), then [Elevation](project/Elevation.md), [Motion](project/Motion.md), [Theming](project/Theming.md) and [Research](project/Research.md)
+- **Storybook:** every component, with its guidelines and a live preview in all four schemes: https://richlaconte.github.io/altitude/
+- **The design guide:** [`project/README.md`](https://github.com/richlaconte/altitude/blob/main/project/README.md), then [Elevation](https://github.com/richlaconte/altitude/blob/main/project/Elevation.md), [Motion](https://github.com/richlaconte/altitude/blob/main/project/Motion.md), [Theming](https://github.com/richlaconte/altitude/blob/main/project/Theming.md) and [Research](https://github.com/richlaconte/altitude/blob/main/project/Research.md)
 
 ## Install
 
@@ -33,6 +33,8 @@ Render `AltitudeProvider` once around your app. Schemes are `daylight`, `nightfa
 |---|---|
 | `altitude-design` | the components (ESM and CommonJS, with types) |
 | `altitude-design/altitude.css` | tokens and component styles in one file (it also loads Instrument Sans and JetBrains Mono from Google Fonts) |
+| `altitude-design/altitude.no-fonts.css` | the same styles without the Google Fonts import, so the page makes no third-party request; self-host the fonts or set `--font-sans` and `--font-mono` to your own (both fall back to system fonts) |
+| `altitude-design/fonts.css` | just the Google Fonts import, to pair with `tokens.css` or `altitude.no-fonts.css` |
 | `altitude-design/tokens.css`, `altitude-design/tokens.json` | the tokens on their own |
 | `altitude-design/altitude.iife.js` | a `<script>` build that sets `window.Altitude`, for pages without a bundler; it expects React 18's UMD builds as `window.React` and `window.ReactDOM` |
 
@@ -72,6 +74,19 @@ A push to `main` then also:
 - deploys Storybook to GitHub Pages;
 - publishes to npm **if the version in `package.json` isn't published yet**, and tags the commit `v<version>`. To release, bump the version (`npm version patch`, `minor` or `major`) and push.
 
+## Found a bug, or need something it doesn't do?
+
+Open an issue: **https://github.com/richlaconte/altitude/issues/new/choose**. There are templates for a bug, a new feature for an existing component, and a new component, and [CONTRIBUTING.md](https://github.com/richlaconte/altitude/blob/main/CONTRIBUTING.md) says what makes each one useful.
+
+**If you're an agent using this package** in someone else's project, you're welcome to report problems with it here:
+
+1. Check it's Altitude's problem, not the app's: reproduce it with the smallest render that uses only the public API, inside `AltitudeProvider`, with `altitude-design/altitude.css` imported.
+2. Look for an existing issue: `gh issue list --repo richlaconte/altitude --state all --search "<Component> <keywords>"`.
+3. Fill in the matching template from [`.github/ISSUE_TEMPLATE/`](https://github.com/richlaconte/altitude/blob/main/.github/ISSUE_TEMPLATE/): title `<Component>: <what goes wrong>`, the installed version (from `node_modules/altitude-design/package.json`), how it's loaded (ESM, CommonJS or `altitude.iife.js`), React version, browser, and the scheme and mode (reduced motion, forced colours, `contrast="more"`) you saw it in.
+4. File it only if the person you're working for agrees: `gh issue create --repo richlaconte/altitude --label bug --title "…" --body-file issue.md`. Otherwise hand them the drafted issue and the link above. End the body with `Filed by an agent (<model or tool>) on behalf of @<person>.`
+
+The full guidance for agents is in [AGENTS.md](https://github.com/richlaconte/altitude/blob/main/AGENTS.md).
+
 ## License
 
-[MIT](LICENSE)
+[MIT](https://github.com/richlaconte/altitude/blob/main/LICENSE)

package/dist/altitude.css

@@ -1134,6 +1134,31 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-drop[data-drop="armed"] { background: var(--surface-well); box-shadow: var(--well); border-color: var(--ink-muted); }
 .alt-drop[data-drop="over"] { background: var(--accent-soft); box-shadow: var(--trench); border-style: solid; border-color: var(--accent-ink); color: var(--ink); transform: scale(calc(1 - 0.01 * var(--alt-travel))); }
 
+/* ── EmptyState: an opening the first record will fill. Nothing here yet isn't a problem (Alert) or a settled
+   container (Card): it's a space waiting to receive, so it's sunk, a well cut into the page with a dashed rim, the
+   same below-ground signal as an empty field. Its actions are ordinary raised buttons standing in it. Pointing at
+   the primary action deepens the well to a trench and darkens the rim: feedforward for where the record will land.
+   It sinks in when it appears (flush to well, dur-travel-1, ease-sink), the inverse of content arriving lifted,
+   and it never pulses. ── */
+.alt-empty {
+  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center;
+  border: 1.5px dashed var(--line-control); border-radius: var(--radius-lg); background: var(--surface-well); box-shadow: var(--well);
+  color: var(--ink-muted); font: 400 15px/23px var(--font-sans);
+  animation: alt-empty-sink var(--dur-travel-1) var(--ease-sink);
+  transition: box-shadow var(--dur-travel-1) var(--ease-sink), border-color var(--dur-travel-1);
+}
+@keyframes alt-empty-sink { from { background-color: var(--surface-ground); box-shadow: var(--elev-0); } }
+.alt-empty-icon { display: inline-flex; margin-bottom: var(--space-1); color: var(--ink-muted); }
+.alt-empty-icon > svg { width: 24px; height: 24px; }
+.alt-empty-title { margin: 0; font: 600 19px/26px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
+.alt-empty-desc { margin: 0; max-width: 46ch; color: var(--ink-muted); text-wrap: pretty; }
+.alt-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
+.alt-empty:has(.alt-empty-actions > :first-child:is(:hover, :focus-visible):not(:disabled)) { box-shadow: var(--trench); border-color: var(--ink-muted); }
+.alt-empty[data-size="sm"] { gap: var(--space-1); padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); font: 400 14px/20px var(--font-sans); }
+.alt-empty[data-size="sm"] .alt-empty-icon > svg { width: 18px; height: 18px; }
+.alt-empty[data-size="sm"] .alt-empty-title { font: 500 14px/20px var(--font-sans); letter-spacing: 0; }
+.alt-empty[data-size="sm"] .alt-empty-actions { margin-top: var(--space-2); }
+
 /* ── SortableList: pick up → level 3 in your hand; the landing slot opens as a well; release → it lands. ── */
 .alt-sort { position: relative; display: flex; flex-direction: column; }
 .alt-sort-item {
@@ -1586,6 +1611,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
     --alt-ring: var(--ink); --alt-cast: transparent; --alt-cast-deep: transparent; --alt-wall-in: var(--ink-muted); --alt-lip: transparent; --alt-rim-held: var(--ink);
   }
   .alt-btn, .alt-kbd, .alt-crumbs button { --wall-c: var(--ink); }
+  .alt-empty { border-style: solid; }
 }
 [data-contrast="more"], [data-contrast="more"] [data-theme] {
   --elev-0: inset 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000;
@@ -1600,6 +1626,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   --alt-ring: var(--ink); --alt-cast: transparent; --alt-cast-deep: transparent; --alt-wall-in: var(--ink-muted); --alt-lip: transparent; --alt-rim-held: var(--ink);
 }
 [data-contrast="more"] .alt-btn, [data-contrast="more"] .alt-kbd, [data-contrast="more"] .alt-crumbs button { --wall-c: var(--ink); }
+[data-contrast="more"] .alt-empty { border-style: solid; }
 
 /* Forced colours (Windows High Contrast) drop every box-shadow, which erases elevation entirely
    (measured: the ladder renders as blank). Height falls back to border weight and style. */
@@ -1610,7 +1637,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   .alt-surface[data-level="5"], .alt-dialog { border: 4px double CanvasText; }
   .alt-input:has(input:not(:placeholder-shown)), .alt-input:has(textarea:not(:placeholder-shown)) { border-style: solid !important; }
   .alt-input[data-invalid] { border: 2px dashed CanvasText !important; }
-  .alt-surface[data-level="-1"], .alt-input, .alt-tabs-list, .alt-sort-slot, .alt-drop[data-drop="armed"] { border: 1px dashed CanvasText; }
+  .alt-surface[data-level="-1"], .alt-input, .alt-tabs-list, .alt-sort-slot, .alt-drop[data-drop="armed"], .alt-empty { border: 1px dashed CanvasText; }
   .alt-surface[data-level="-2"], .alt-switch, .alt-slider-track, .alt-progress, [data-status="failed"], .alt-drop[data-drop="over"] { border: 2px dashed CanvasText; }
   [data-status="pending"] { border: 2px dotted CanvasText; }
   .alt-progress-fill, .alt-slider-fill, .alt-switch-fill, .alt-check-fill { background: Highlight; }