@galaxy-io/dls 2.8.0 → 2.9.0

package/README.md

@@ -14,7 +14,7 @@ Node ≥ 22, React 18 or 19, ESM. Heavy single-component libraries (charts, tabl
 
 ## Quick start
 
-A new app in one command: Vite with the DLS Linaria preset, Biome with the DLS rules, the three stylesheets, `GalaxyProvider`, and a working app frame with routing, a command palette and four pages on sample data.
+A new app in one command: Vite with the DLS Linaria preset, Biome with the DLS rules, the three stylesheets, `GalaxyProvider`, and a thin Filament-shaped app: file routes, ConnectRPC queries on a mock transport, the frame and two pages.
 
 ```bash
 pnpm create @galaxy-io/galaxy-app my-app
@@ -78,7 +78,7 @@ The codemod rewrites everything mechanical and marks the rest with `@dls-migrate
 
 ## Claude skill
 
-[`skills/galaxy-ui`](./skills/galaxy-ui/SKILL.md) teaches Claude to design and build Galaxy UIs with this package: the workflow, the brand rules, the component decision tables, tokens, patterns and complete screen recipes. Its examples are type-checked against this repository (`pnpm skill:check`).
+[`skills/galaxy-ui`](./skills/galaxy-ui/SKILL.md) teaches Claude to design, build and structure Galaxy apps with this package: the app architecture `create-galaxy-app` scaffolds (stack, files and naming, routing and URL state, the ConnectRPC data layer and mocks, screen shells, forms, mountable modules), the brand rules, the component decision tables, tokens, patterns and complete screen recipes. Its DLS examples are type-checked against this repository (`pnpm skill:check`).
 
 - **Claude Code:** copy the folder into your skills directory: `cp -R skills/galaxy-ui ~/.claude/skills/` (or a project's `.claude/skills/`).
 - **Claude apps:** run `pnpm skill:pack` and upload `dist-skill/galaxy-ui.zip` as a skill (Settings → Capabilities → Skills).

package/dist/brand/GalaxyAlchemyWordmark.d.ts

@@ -0,0 +1,31 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+export interface GalaxyAlchemyWordmarkProps extends AriaAttributes {
+    /**
+     * Height of the wordmark in px, descender included. The width follows the aspect ratio
+     * (≈ 2.77 × height).
+     * @default 20
+     */
+    size?: number;
+    /**
+     * For a wordmark on an inverted fill (`text.primary`): paints `background.base`.
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Accessible name. Pass `""` to make it decorative (`aria-hidden`) when the name is already in
+     * the surrounding text.
+     * @default Alchemy
+     */
+    ariaLabel?: string;
+    /** DOM id on the `<svg>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<svg>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<svg>`. */
+    className?: string;
+    /** Inline style on the `<svg>`. */
+    style?: CSSProperties;
+}
+/** Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`. */
+declare const GalaxyAlchemyWordmark: import("react").ForwardRefExoticComponent<GalaxyAlchemyWordmarkProps & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyAlchemyWordmark;

package/dist/brand/GalaxyAlchemyWordmark.js

@@ -0,0 +1,38 @@
+import { BRAND_MARK_INVERSE_CSS, BRAND_MARK_NEUTRAL_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps } from "./brandMark.js";
+import GalaxyAlchemyWordmarkSvg, { GALAXY_ALCHEMY_WORDMARK_VIEW_BOX } from "./internal/svg/GalaxyAlchemyWordmarkSvg.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/brand/GalaxyAlchemyWordmark.tsx
+/**
+* Alchemy's product wordmark: the word "alchemy" in a heavy connected script, as one inline SVG.
+* It behaves exactly like `GalaxyWordmark`: it paints `text.primary`, reads only CSS variables,
+* and is SSR-safe.
+*
+* The artwork is `src/brand/assets/galaxy-alchemy-wordmark.svg`, compiled by `pnpm assets` into
+* the private `GalaxyAlchemyWordmarkSvg`; the aspect ratio comes from its
+* `GALAXY_ALCHEMY_WORDMARK_VIEW_BOX`.
+*/
+/** Width ÷ height of the artwork, from its viewBox. */
+var GALAXY_ALCHEMY_WORDMARK_ASPECT_RATIO = GALAXY_ALCHEMY_WORDMARK_VIEW_BOX.width / GALAXY_ALCHEMY_WORDMARK_VIEW_BOX.height;
+/** Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`. */
+var GalaxyAlchemyWordmark = forwardRef(function GalaxyAlchemyWordmark({ size = 20, isInverse = false, ariaLabel = "Alchemy", id, className, style, ...rest }, ref) {
+	const aria = brandMarkAriaProps(ariaLabel);
+	return /* @__PURE__ */ jsx(GalaxyAlchemyWordmarkSvg, {
+		ref,
+		id,
+		role: aria.role,
+		"aria-label": aria["aria-label"],
+		"aria-hidden": aria["aria-hidden"],
+		...rest,
+		width: size * GALAXY_ALCHEMY_WORDMARK_ASPECT_RATIO,
+		height: size,
+		fill: "currentColor",
+		focusable: "false",
+		className: cx(BRAND_MARK_SVG_CSS, isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_NEUTRAL_CSS, className),
+		style
+	});
+});
+GalaxyAlchemyWordmark.displayName = "GalaxyAlchemyWordmark";
+//#endregion
+export { GalaxyAlchemyWordmark as default };

package/dist/brand/brandMark.js

@@ -1,8 +1,9 @@
 /* empty css                    */
 //#region src/brand/brandMark.ts
 /**
-* @internal Shared by the five brand components (`GalaxyLogomark`, `GalaxyWordmark`,
-* `GalaxyFilamentWordmark`, `GalaxyLogomarkAnimation`, `GalaxyLogomark3D`); not documented API.
+* @internal Shared by the six brand components (`GalaxyLogomark`, `GalaxyWordmark`,
+* `GalaxyFilamentWordmark`, `GalaxyAlchemyWordmark`, `GalaxyLogomarkAnimation`,
+* `GalaxyLogomark3D`); not documented API.
 *
 * The marks are one inline SVG painted with `fill="currentColor"`, so their color is CSS: exactly
 * one of the color classes below sets `color` on the mark. One class never overrides another, so

package/dist/brand/internal/svg/GalaxyAlchemyWordmarkSvg.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-alchemy-wordmark.svg`.
+ * Do not edit: change the SVG and run `pnpm assets`. Every fill is `currentColor` and the
+ * root has no size; the public mark that renders this sets both.
+ */
+import { type SVGProps } from "react";
+declare const GalaxyAlchemyWordmarkSvg: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyAlchemyWordmarkSvg;
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+export declare const GALAXY_ALCHEMY_WORDMARK_VIEW_BOX: {
+    readonly width: 1210;
+    readonly height: 252;
+};

package/dist/brand/internal/svg/GalaxyAlchemyWordmarkSvg.js

@@ -0,0 +1,55 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/internal/svg/GalaxyAlchemyWordmarkSvg.tsx
+/**
+* @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-alchemy-wordmark.svg`.
+* Do not edit: change the SVG and run `pnpm assets`. Every fill is `currentColor` and the
+* root has no size; the public mark that renders this sets both.
+*/
+var GalaxyAlchemyWordmarkSvg = forwardRef(function GalaxyAlchemyWordmarkSvg(props, ref) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 1210 252",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M916.725 201.365H873.342C866.329 201.374 860.638 195.691 860.638 188.678V125.367C860.335 116.982 853.684 111.063 846.064 110.76C837.789 110.432 831.028 116.039 830.203 124.601C830.169 124.98 830.161 125.359 830.161 125.746V188.678C830.153 195.691 824.461 201.382 817.448 201.374H774.057C767.044 201.374 761.361 195.682 761.361 188.661V62.6878C761.37 55.6748 767.061 49.9919 774.074 49.9919H1016C1023.01 49.9919 1028.7 55.6832 1028.71 62.6962L1028.72 188.686C1028.72 195.699 1023.04 201.391 1016.02 201.391H972.627C965.614 201.391 959.931 195.699 959.931 188.686V126.116C960.049 117.756 953.651 111.501 946.166 110.828C938.151 110.103 931.433 114.911 929.716 122.858C929.53 123.709 929.454 124.584 929.454 125.451L929.438 188.678C929.438 195.691 923.755 201.374 916.742 201.374L916.725 201.365Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M1197.29 251.298L1054.64 251.332C1047.64 251.332 1041.95 245.658 1041.94 238.653L1041.91 214.103C1041.9 207.082 1047.58 201.382 1054.6 201.382H1127.38C1134.1 201.475 1139.12 197.812 1140.26 191.717C1141.33 185.967 1137.89 178.828 1131.2 177.573L1052.26 162.764C1046.25 161.636 1041.91 156.391 1041.91 150.279L1041.92 62.6962C1041.92 55.6832 1047.61 50.0004 1054.63 50.0004H1098.01C1105.02 50.0004 1110.71 55.6832 1110.71 62.7046V112.511C1111.05 121.612 1117.93 127.699 1126.36 127.623C1134.78 127.548 1141.27 120.871 1141.19 111.686L1141.22 62.7046C1141.22 55.6916 1146.91 50.0088 1153.91 50.0088H1197.3C1204.31 50.0088 1210 55.6916 1210 62.7046V238.619C1210 245.632 1204.31 251.315 1197.3 251.324L1197.29 251.298Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M554.102 201.382H510.719C503.706 201.382 498.023 195.691 498.023 188.678L497.99 124.997C497.99 123.464 497.737 121.932 497.173 120.509C494.622 114.069 488.594 110.297 481.817 110.895C474.021 111.585 467.774 117.546 467.521 126.032V188.678C467.521 195.691 461.83 201.382 454.817 201.382H411.619C404.606 201.374 398.924 195.691 398.924 188.678V12.7463C398.924 5.73332 404.615 0.0420837 411.628 0.0420837H454.826C461.839 0.0420837 467.521 5.71648 467.53 12.7295L467.547 33.6254C467.496 42.0949 473.036 48.5102 481.43 49.8656C482.011 49.9582 482.6 49.9835 483.189 49.9835H554.094C561.107 49.9835 566.798 55.6663 566.798 62.6877V188.678C566.798 195.691 561.107 201.382 554.094 201.382H554.102Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M659.811 156.618L735.397 156.635C742.41 156.635 748.101 162.326 748.092 169.339V188.678C748.084 195.691 742.393 201.374 735.38 201.374H592.712C585.699 201.374 580.007 195.682 580.007 188.669V62.6962C580.007 55.6832 585.69 49.992 592.712 49.992H735.38C742.393 49.9835 748.084 55.6663 748.084 62.6794V122.74C748.084 129.753 742.401 135.445 735.388 135.445H659.525C658.363 135.436 657.201 135.562 656.09 135.908C651.274 137.423 648.656 141.725 648.892 146.6C649.161 152.207 653.488 156.618 659.811 156.618ZM679.436 92.5583C679.436 84.1225 672.583 77.2863 664.13 77.2863C655.677 77.2863 648.824 84.1225 648.824 92.5583C648.824 100.994 655.677 107.83 664.13 107.83C672.583 107.83 679.436 100.994 679.436 92.5583Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M73.0584 201.146C32.9756 201.037 2.10318 170.308 0.208912 130.94C-1.11287 111.77 3.82066 93.6528 15.4894 78.305C29.9448 60.12 51.3879 50.1603 74.919 50.1182L155.27 49.9835C162.291 49.9751 167.991 55.6579 167.991 62.6878V188.669C167.991 195.699 162.291 201.391 155.261 201.374L73.05 201.146H73.0584ZM99.132 125.662C99.132 117.302 92.3379 110.524 83.961 110.524C75.5841 110.524 68.79 117.302 68.79 125.662C68.79 134.022 75.5841 140.799 83.961 140.799C92.3379 140.799 99.132 134.022 99.132 125.662Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M347.155 140.631L375.519 140.681C382.523 140.69 388.198 146.381 388.198 153.385V188.678C388.181 195.691 382.498 201.374 375.485 201.374H275.973C268.96 201.374 263.269 195.682 263.269 188.669V62.6878C263.269 55.6748 268.96 49.9835 275.973 49.9835H375.485C382.498 49.9835 388.181 55.6663 388.189 62.6793V97.9549C388.206 104.959 382.532 110.651 375.527 110.659L346.785 110.71C338.198 111.147 332.094 117.689 332.018 125.628C331.942 133.567 337.995 140.605 347.164 140.622L347.155 140.631Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M237.245 0H193.854C186.838 0 181.15 5.68789 181.15 12.7042V188.703C181.15 195.719 186.838 201.407 193.854 201.407H237.245C244.262 201.407 249.95 195.719 249.95 188.703V12.7042C249.95 5.68789 244.262 0 237.245 0Z",
+				fill: "currentColor"
+			})
+		]
+	});
+});
+GalaxyAlchemyWordmarkSvg.displayName = "GalaxyAlchemyWordmarkSvg";
+/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
+var GALAXY_ALCHEMY_WORDMARK_VIEW_BOX = {
+	width: 1210,
+	height: 252
+};
+//#endregion
+export { GALAXY_ALCHEMY_WORDMARK_VIEW_BOX, GalaxyAlchemyWordmarkSvg as default };