@mystravil/hardpoint 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Changelog
+
+Hardpoint follows semantic versioning. Before 1.0.0, a breaking change raises the minor version.
+
+## 0.2.0 (2026-11-11)
+
+- **Added**:
+  - `Meter`: a measurement inside a known range as separate segments, coloured by `warnAt` and `dangerAt` or by an app-set `tone`, with an optional `marker` and `detail` line.
+  - `Notice`: a persistent message in the page flow with an optional tone mark, title, text, up to two actions and a close button.
+  - `TextArea`: a multi-line text field that grows from `rows` to `maxRows` lines, then scrolls inside, with TextField's label, hint and error.
+  - `RadioGroup`: one choice from a set of rows, each with an optional hint and tag, named by a caps `label` or a `legend`, with a group `error`.
+  - `CheckboxGroup`: `legend` (a name set as written, instead of `label`), `error` and an item `tag`.
+  - `Checkbox`: `tag`. The whole row is now the target: a press on the hint, the tag or the gap counts as a press on the label.
+  - `ListDetail`: a list column beside the open item from `splitFrom` (`medium`, `expanded` by default, or `large`), one pane at a time below it, picked by a bindable `showDetail`.
+  - `ImageViewer`: one image full screen at every width over a Bits Dialog, with pinch zoom, pan, double-tap and wheel zoom, a Download button, a loading spinner, and Close, Escape or a swipe down at scale 1 to leave.
+  - `.hp-prose` in `base.css`, with `.hp-prose-code`, `.hp-prose-copy` and `.hp-prose-scroll`: styles for rendered markdown or sanitised HTML, at zero specificity. It covers headings, lists, task lists, quotes, code blocks with a copy button, tables that scroll inside their wrapper, and images.
+  - Grouped options: `group` on `SelectItem`, `ComboboxItem` and `NativeSelectOption`. Select and Combobox show a sticky heading per group, and NativeSelect renders `<optgroup>`.
+  - The token `--list-detail-width: 320px` (ListDetail's list column).
+- **Changed**:
+  - `--popover-width`, `--tooltip-width` and `--toast-width` can now be set from an app's class and stylesheet rule. Before, the component's own rule won over an app's one-class rule.
+  - The Dialog body sets `scroll-padding-block: var(--space-2)`, so a revealed caret stays 8 px clear of the action row.
+  - Combobox's default filter also matches an item's `group`, drops the heading of a group with no match, and scrolls the list to the top as you type.
+- **Checked**: every exported component, `toast()` and `Motion` run under `style-src 'self'` with no policy violation.
+
+## 0.1.0 (2026-11-11)
+
+The first public release. It needs Svelte 5.57 or newer.
+
+- **Components** (Svelte 5 on Bits UI):
+  - Actions and forms: Button, TextField, NativeSelect, Select, Combobox, Checkbox, CheckboxGroup, Switch.
+  - Overlays: Dialog (centred, bottom sheet or full screen), Popover, the Menu family, Tooltip with TooltipGroup, and Toaster with `toast()`.
+  - Navigation: AppShell (header, bottom bar or drawer, rail or sidebar), Tabs, Steps, Pagination.
+  - Data and display: Table, KeyValueList, Stat, Tag, Timeline, MediaFrame with MediaImage, Disclosure.
+  - Feedback: Progress, Spinner, Skeleton, LoadRegion, EmptyState, ErrorState.
+- **Motion** (`@mystravil/hardpoint/motion`): `<Motion tier>` and `useMotion()`, the overlay transitions `pop`, `sheet`, `fade` and `drawer`, and timing tokens for every duration. Quiet motion is the default; expressive effects run only inside `<Motion tier="expressive">` and never under reduced motion.
+- **CSS**, framework-free: `fonts.css` (Geist, Geist Mono and Geist Pixel Square with size-matched fallback faces), `tokens.css` and `base.css`.
+- **Themes**: dark by default; light through `data-theme="light"` on `<html>`, or `data-theme="system"` to follow the device.
+- **Phones**: 44 px touch targets on coarse pointers, 16 px inputs, bottom sheets on compact widths that stay above the on-screen keyboard, and safe-area insets.

package/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2026 MYSTRAVIL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+The fonts in src/lib/fonts (shipped as dist/fonts) are not covered by this
+licence. Geist, Geist Mono and Geist Pixel Square are licensed under the SIL
+Open Font License 1.1; see OFL.txt and OFL-geist-pixel.txt beside them.

package/README.md

@@ -1,3 +1,64 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# Hardpoint
+
+Hardpoint is a Svelte 5 design system on [Bits UI](https://www.bits-ui.com/). Its look and motion come from Dan Neuenhaus's MONOLITH reel, adapted for ordinary apps: AMOLED black, titanium ink, the Geist type family, square solid blocks for actions and tags, banded tables of mono data, and expressive motion only where an app asks for it. Bits UI supplies the behaviour and accessibility; Hardpoint supplies the look and the motion.
+
+It works on desktop and on phones: 44 px touch targets on coarse pointers, 16 px inputs, bottom sheets on compact widths that stay above the on-screen keyboard, and safe-area insets. Dark is the default theme, and a light theme is built in. Status colours (red, yellow, green) mean status only; no hue is a brand colour.
+
+The package imports nothing from SvelteKit, so plain Svelte apps can use it. The three CSS files are framework-free, so apps without Svelte can use the tokens and base styles.
+
+## Components
+
+- Actions and forms: `Button`, `TextField`, `TextArea`, `NativeSelect`, `Select`, `Combobox`, `Checkbox`, `CheckboxGroup`, `RadioGroup`, `Switch`.
+- Overlays: `Dialog` (centred, bottom sheet or full screen), `Popover`, `Menu` with `MenuItem`, `MenuCheckboxItem`, `MenuRadioGroup`, `MenuRadioItem`, `MenuGroup` and `MenuSeparator`, `Tooltip` with `TooltipGroup`, `Toaster` with `toast()`, and `ImageViewer` (one image full screen, with pinch zoom).
+- Navigation and layout: `AppShell` (header, bottom bar or drawer, rail or sidebar), `ListDetail` (a list beside the open item, one pane at a time on narrow screens), `Tabs`, `Steps`, `Pagination`.
+- Data and display: `Table`, `KeyValueList`, `Stat`, `Tag`, `Timeline`, `MediaFrame` with `MediaImage`, `Disclosure`, and `.hp-prose` in `base.css` for rendered markdown.
+- Feedback: `Progress`, `Meter`, `Notice`, `Spinner`, `Skeleton`, `LoadRegion`, `EmptyState`, `ErrorState`.
+
+The source repository has a showcase app with a docs page for each component, the foundations, the motion tokens and a specimen app.
+
+## Install
+
+```sh
+npm install @mystravil/hardpoint
+```
+
+Svelte 5.57 or newer is a peer dependency. Bits UI comes with the package.
+
+## Use
+
+```js
+import '@mystravil/hardpoint/fonts.css';
+import '@mystravil/hardpoint/tokens.css';
+import '@mystravil/hardpoint/base.css';
+
+// Svelte components
+import { Button, Dialog, Table, Pagination, TextField, toast } from '@mystravil/hardpoint';
+// Motion: <Motion tier="expressive"> for infrequent moments, and the overlay transitions
+import { Motion, useMotion, pop, sheet, fade, drawer } from '@mystravil/hardpoint/motion';
+```
+
+Skip `fonts.css` if the app already serves Geist.
+
+The theme is an attribute on `<html>`: `data-theme="light"`, `"dark"` or `"system"` (follows the device). Without it the theme is dark. Set it before first paint, and set `<meta name="theme-color">` to the canvas colour, `#000000` for dark and `#f7f5f0` for light.
+
+## Docs
+
+The design docs are in the source repository's `docs/` folder, which is private: `BRIEF.md` is the spec, with every decision and its reason; `ux-research.md` holds the UI/UX research and standards behind the app and phone rules; `elements-da3.md`, `measurements-da3.md` and `reference/da3/` measure the reference reel. `CHANGELOG.md` in the package lists the changes in each version.
+
+## Develop
+
+```sh
+npm install
+npm run dev      # showcase app in src/routes
+npm run check    # svelte-check, and no SvelteKit imports in src/lib
+npm run build    # showcase build, then svelte-package and publint into dist/
+npm run audit    # targets, overflow, 16px inputs, contrast on every route at four viewports, dark and light
+npm run shot -- /foundations shots/f.png --serve                       # screenshot with console-error check
+npm run shot -- /foundations shots/f-phone.png --w 390 --h 844 --touch --full --serve
+```
+
+`src/lib` is the library. `src/routes` is the showcase.
+
+## Licence
+
+The code is MIT licensed (`LICENSE`). The fonts are not: Geist, Geist Mono and Geist Pixel Square ship in `dist/fonts` under the SIL Open Font License 1.1 (`OFL.txt`, `OFL-geist-pixel.txt`).