@cascivo/astro 0.0.0-stage → 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) cascivo contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,3 +1,79 @@
1
- # Temporary Holding Version
1
+ <!-- generated by scripts/readme/generate.ts — edit readme.body.md, not this file -->
2
2
 
3
- 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.
3
+ <div align="center">
4
+ <a href="https://cascivo.com"><img src="https://cascivo.com/logo-mark-img-accent.svg" width="72" height="72" alt="cascivo logo"></a>
5
+ <h1>@cascivo/astro</h1>
6
+ <p><strong>Astro integration — cascivo's CSS layer order, theme stylesheet and a view-transition-safe no-flash theme script on every page</strong></p>
7
+
8
+ [![npm](https://img.shields.io/npm/v/%40cascivo%2Fastro?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/astro)
9
+ [![downloads](https://img.shields.io/npm/dm/%40cascivo%2Fastro?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/astro)
10
+ [![license](https://img.shields.io/npm/l/%40cascivo%2Fastro?style=flat-square&color=0079bf)](https://github.com/cascivo/cascivo/blob/main/LICENSE)
11
+ ![types](https://img.shields.io/badge/types-included-0079bf?style=flat-square&logo=typescript&logoColor=white)
12
+
13
+ [npm](https://www.npmjs.com/package/@cascivo/astro) · [cascivo.com](https://cascivo.com) · [Docs](https://cascivo.com/docs) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo)
14
+ </div>
15
+
16
+ ---
17
+
18
+ The Astro integration for cascivo. One line in `astro.config` sets up the CSS layer
19
+ order, the theme stylesheet and a no-flash theme script on every page.
20
+
21
+ ## Usage
22
+
23
+ ```sh
24
+ npx astro add @cascivo/astro
25
+ ```
26
+
27
+ or add it by hand:
28
+
29
+ ```js
30
+ // astro.config.mjs
31
+ import { defineConfig } from 'astro/config'
32
+ import react from '@astrojs/react'
33
+ import cascivo from '@cascivo/astro'
34
+
35
+ export default defineConfig({
36
+ integrations: [
37
+ react(),
38
+ cascivo({ theme: '@cascivo/themes/midnight.css', themeScript: { defaultTheme: 'midnight' } }),
39
+ ],
40
+ })
41
+ ```
42
+
43
+ ## What it does
44
+
45
+ - Injects the layer order first on every page: `vendor`, then cascivo's canonical layers
46
+ (`DEFAULT_LAYERS`). Pass `layers` with a complete `@layer …;` statement to add your own slots
47
+ (a layer takes its position from its first appearance, so it must name every layer the page uses).
48
+ - Imports the theme stylesheet on every page (`theme`, default
49
+ `@cascivo/themes/light-dark.css`; `false` to import it yourself).
50
+ - Inlines the no-flash theme script in `<head>` and re-applies it after every
51
+ `<ClientRouter />` swap (`themeScript`; `false` to opt out). `themeScript` takes
52
+ `{ storageKey?, attribute?, defaultTheme? }`; an app on one custom theme sets `theme` and
53
+ `themeScript.defaultTheme` together.
54
+ - Keeps `@cascivo/*` packages in the Vite graph (`vite.resolve.noExternal`), so server-rendered
55
+ islands keep their CSS on `@cascivo/react` releases that predate the `astro-component` keyword.
56
+
57
+ ## Two rules for islands
58
+
59
+ - Compose compound components (`Tabs`, `Accordion`, `Popover`) in one `.tsx` file and hydrate that
60
+ island. Astro renders `.astro` children separately, so React context never reaches them.
61
+ - Never put a `client:*` directive on a `@cascivo/react` export imported straight into an `.astro`
62
+ file: it measured 326 KB of JS and 331 KB of CSS.
63
+
64
+ `npx cascivo create my-app --framework astro` emits an app with all of this wired. The adopter path
65
+ is verified by the Astro arm of `pnpm framework:check`.
66
+
67
+ Full guide: [docs/USING-WITH-ASTRO.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-ASTRO.md).
68
+
69
+ ## Install
70
+
71
+ ```sh
72
+ pnpm add @cascivo/astro
73
+ ```
74
+
75
+ ---
76
+
77
+ [cascivo.com](https://cascivo.com) · [Docs](https://cascivo.com/docs) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo) · AI agents: read [`llms.txt`](https://cascivo.com/llms.txt) (install steps + component index, plain text) or use [`@cascivo/mcp`](https://github.com/cascivo/cascivo/tree/main/packages/mcp) and [`registry.json`](https://github.com/cascivo/cascivo/blob/main/registry.json) · MIT
78
+
79
+ <div align="center"><a href="https://cascivo.com"><img src="https://cascivo.com/logo-mark-img.svg" width="28" height="28" alt="cascivo"></a></div>
@@ -0,0 +1,30 @@
1
+ import { AstroIntegration } from "astro";
2
+ //#region src/index.d.ts
3
+ export interface CascivoAstroOptions {
4
+ /** Full `@layer …;` order statement injected first on every page. Default: DEFAULT_LAYERS. */
5
+ layers?: string;
6
+ /** Theme stylesheet injected on every page. `false` to import it yourself. Default '@cascivo/themes/light-dark.css'. */
7
+ theme?: string | false;
8
+ /** Inline no-flash theme script. `false` to opt out. Defaults mirror ThemeProvider. */
9
+ themeScript?: false | {
10
+ storageKey?: string;
11
+ attribute?: string;
12
+ defaultTheme?: string;
13
+ };
14
+ }
15
+ /**
16
+ * `@layer vendor, ` + the names of the canonical statement in `@cascivo/tokens/layers.css`.
17
+ *
18
+ * A whole statement, not the tokens file: a layer takes its position from its first
19
+ * appearance, so if the canonical statement (which has no `vendor`) ran first, an app's later
20
+ * `@layer vendor, …` would append `vendor` ABOVE every cascivo layer and third-party CSS would
21
+ * win. An app with its own layer names passes the complete statement through `layers`.
22
+ */
23
+ export declare const DEFAULT_LAYERS: string;
24
+ /**
25
+ * Astro integration: the cascade-layer order, a theme stylesheet and a no-flash theme
26
+ * script on every page, so `astro.config` is the only file an adopter edits.
27
+ */
28
+ export default function cascivo(options?: CascivoAstroOptions): AstroIntegration;
29
+ //#endregion
30
+ //# sourceMappingURL=index.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"mappings":";;iBAQiB;;EAEf;;EAEA;;EAEA;IAAwB;IAAqB;IAAoB;;;;;;;;;;;qBAWtD;;;;;wBASW,QAAQ,UAAS,sBAA2B"}
package/dist/index.mjs ADDED
@@ -0,0 +1,2 @@
1
+ import{themePreloadScript as e}from"@cascivo/core/pure";const t=`@layer vendor, cascivo.reset, cascivo.base, cascivo.tokens, cascivo.component, cascivo.platform, cascivo.theme, cascivo.blocks, cascivo.override;`,n=`virtual:cascivo/layers.css`,r=`\0${n}`;function i(t={}){let i=t.layers??`@layer vendor, cascivo.reset, cascivo.base, cascivo.tokens, cascivo.component, cascivo.platform, cascivo.theme, cascivo.blocks, cascivo.override;`,a=t.theme??`@cascivo/themes/light-dark.css`,o=t.themeScript??{};return{name:`@cascivo/astro`,hooks:{"astro:config:setup"({updateConfig:t,injectScript:s}){t({vite:{resolve:{noExternal:[/^@cascivo\//]}}}),t({vite:{plugins:[{name:`cascivo:layers`,resolveId(e){return e===n?r:void 0},load(e){return e===r?i:void 0}}]}}),s(`page-ssr`,`import ${JSON.stringify(n)};`+(a===!1?``:`import ${JSON.stringify(a)};`)),o!==!1&&s(`head-inline`,e({...o,reapplyOn:`astro:after-swap`}))}}}}export{t as DEFAULT_LAYERS,i as default};
2
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","names":["DEFAULT_LAYERS","VIRTUAL_LAYERS","RESOLVED_LAYERS","cascivo","layers","options","theme","themeScript","updateConfig","id","injectScript","themePreloadScript"],"sources":["../src/index.ts"],"sourcesContent":["import type { AstroIntegration } from 'astro'\n// `/pure`, never the root entry: this runs in Astro's config process, and the root entry\n// loads the React runtime and the signals runtime at module scope.\nimport { themePreloadScript } from '@cascivo/core/pure'\n\n/** Inlined at build time from `packages/tokens/src/layers.css` (see vite.config.ts). */\ndeclare const __CASCIVO_DEFAULT_LAYERS__: string\n\nexport interface CascivoAstroOptions {\n /** Full `@layer …;` order statement injected first on every page. Default: DEFAULT_LAYERS. */\n layers?: string\n /** Theme stylesheet injected on every page. `false` to import it yourself. Default '@cascivo/themes/light-dark.css'. */\n theme?: string | false\n /** Inline no-flash theme script. `false` to opt out. Defaults mirror ThemeProvider. */\n themeScript?: false | { storageKey?: string; attribute?: string; defaultTheme?: string }\n}\n\n/**\n * `@layer vendor, ` + the names of the canonical statement in `@cascivo/tokens/layers.css`.\n *\n * A whole statement, not the tokens file: a layer takes its position from its first\n * appearance, so if the canonical statement (which has no `vendor`) ran first, an app's later\n * `@layer vendor, …` would append `vendor` ABOVE every cascivo layer and third-party CSS would\n * win. An app with its own layer names passes the complete statement through `layers`.\n */\nexport const DEFAULT_LAYERS: string = __CASCIVO_DEFAULT_LAYERS__\n\nconst VIRTUAL_LAYERS = 'virtual:cascivo/layers.css'\nconst RESOLVED_LAYERS = `\\0${VIRTUAL_LAYERS}`\n\n/**\n * Astro integration: the cascade-layer order, a theme stylesheet and a no-flash theme\n * script on every page, so `astro.config` is the only file an adopter edits.\n */\nexport default function cascivo(options: CascivoAstroOptions = {}): AstroIntegration {\n const layers = options.layers ?? DEFAULT_LAYERS\n const theme = options.theme ?? '@cascivo/themes/light-dark.css'\n const themeScript = options.themeScript ?? {}\n\n return {\n name: '@cascivo/astro',\n hooks: {\n 'astro:config:setup'({ updateConfig, injectScript }) {\n // Vite externalizes node_modules packages in the server build, and Astro collects a\n // page's CSS by walking the module graph, so an externalized @cascivo/react renders\n // islands unstyled. `@cascivo/react` releases that carry the `astro-component`\n // keyword are inlined anyway; this covers the ones before it. It must be `resolve.`,\n // not `ssr.`: Astro prerenders in its own Vite environment, which `ssr.*` misses.\n updateConfig({ vite: { resolve: { noExternal: [/^@cascivo\\//] } } })\n\n // The order statement as a module of its own, so it is the first CSS on the page:\n // a statement that lands after any cascivo stylesheet cannot reorder anything.\n updateConfig({\n vite: {\n plugins: [\n {\n name: 'cascivo:layers',\n resolveId(id: string) {\n return id === VIRTUAL_LAYERS ? RESOLVED_LAYERS : undefined\n },\n load(id: string) {\n return id === RESOLVED_LAYERS ? layers : undefined\n },\n },\n ],\n },\n })\n injectScript(\n 'page-ssr',\n `import ${JSON.stringify(VIRTUAL_LAYERS)};` +\n (theme === false ? '' : `import ${JSON.stringify(theme)};`),\n )\n\n // `head-inline` runs before first paint and is NOT re-executed by <ClientRouter>, so\n // its listener is added once. The listener matters: a soft navigation copies the\n // incoming page's server-rendered <html data-theme> over the persisted choice.\n if (themeScript !== false) {\n injectScript(\n 'head-inline',\n themePreloadScript({ ...themeScript, reapplyOn: 'astro:after-swap' }),\n )\n }\n },\n },\n }\n}\n"],"mappings":"wDAyBA,MAAaA,EAAA,oJAEPC,EAAiB,6BACjBC,EAAkB,KAAKD,IAM7B,SAAwBE,EAAQ,EAA+B,CAAC,EAAqB,CACnF,IAAMC,EAASC,EAAQ,QAAA,oJACjBC,EAAQD,EAAQ,OAAS,iCACzBE,EAAcF,EAAQ,aAAe,CAAC,EAE5C,MAAO,CACL,KAAM,iBACN,MAAO,CACL,qBAAqB,CAAE,eAAc,gBAAgB,CAMnDG,EAAa,CAAE,KAAM,CAAE,QAAS,CAAE,WAAY,CAAC,aAAa,CAAE,CAAE,CAAE,CAAC,EAInEA,EAAa,CACX,KAAM,CACJ,QAAS,CACP,CACE,KAAM,iBACN,UAAU,EAAY,CACpB,OAAOC,IAAOR,EAAiBC,EAAkB,IAAA,EACnD,EACA,KAAK,EAAY,CACf,OAAOO,IAAOP,EAAkBE,EAAS,IAAA,EAC3C,CACF,CACF,CACF,CACF,CAAC,EACDM,EACE,WACA,UAAU,KAAK,UAAUT,CAAc,EAAE,IACtCK,IAAU,GAAQ,GAAK,UAAU,KAAK,UAAUA,CAAK,EAAE,GAC5D,EAKIC,IAAgB,IAClBG,EACE,cACAC,EAAmB,CAAE,GAAGJ,EAAa,UAAW,kBAAmB,CAAC,CACtE,CAEJ,CACF,CACF,CACF"}
package/package.json CHANGED
@@ -1,6 +1,59 @@
1
1
  {
2
2
  "name": "@cascivo/astro",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
3
+ "version": "0.0.0",
4
+ "private": false,
5
+ "description": "Astro integration — cascivo's CSS layer order, theme stylesheet and a view-transition-safe no-flash theme script on every page",
6
+ "keywords": [
7
+ "astro",
8
+ "astro-integration",
9
+ "cascivo",
10
+ "css",
11
+ "design-system",
12
+ "withastro"
13
+ ],
14
+ "homepage": "https://github.com/cascivo/cascivo/tree/main/packages/astro#readme",
15
+ "bugs": "https://github.com/cascivo/cascivo/issues",
16
+ "license": "MIT",
17
+ "author": "urbanisierung",
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "git+https://github.com/cascivo/cascivo.git",
21
+ "directory": "packages/astro"
22
+ },
23
+ "files": [
24
+ "dist"
25
+ ],
26
+ "type": "module",
27
+ "types": "./dist/index.d.mts",
28
+ "exports": {
29
+ "./package.json": "./package.json",
30
+ ".": {
31
+ "types": "./dist/index.d.mts",
32
+ "import": "./dist/index.mjs",
33
+ "default": "./dist/index.mjs"
34
+ }
35
+ },
36
+ "publishConfig": {
37
+ "access": "public",
38
+ "provenance": true
39
+ },
40
+ "dependencies": {
41
+ "@cascivo/core": "^1.9.0"
42
+ },
43
+ "devDependencies": {
44
+ "@cascivo/themes": "1.0.3",
45
+ "@types/node": "^25",
46
+ "astro": "^7.1.4",
47
+ "typescript": "^5",
48
+ "vite-plus": "^1.0.0"
49
+ },
50
+ "peerDependencies": {
51
+ "@cascivo/themes": ">=1.0.0",
52
+ "astro": ">=7.0.0"
53
+ },
54
+ "scripts": {
55
+ "build": "vp pack --minify",
56
+ "check": "tsc --noEmit",
57
+ "test": "vp test"
58
+ }
6
59
  }
package/readme.body.md ADDED
@@ -0,0 +1,50 @@
1
+ The Astro integration for cascivo. One line in `astro.config` sets up the CSS layer
2
+ order, the theme stylesheet and a no-flash theme script on every page.
3
+
4
+ ## Usage
5
+
6
+ ```sh
7
+ npx astro add @cascivo/astro
8
+ ```
9
+
10
+ or add it by hand:
11
+
12
+ ```js
13
+ // astro.config.mjs
14
+ import { defineConfig } from 'astro/config'
15
+ import react from '@astrojs/react'
16
+ import cascivo from '@cascivo/astro'
17
+
18
+ export default defineConfig({
19
+ integrations: [
20
+ react(),
21
+ cascivo({ theme: '@cascivo/themes/midnight.css', themeScript: { defaultTheme: 'midnight' } }),
22
+ ],
23
+ })
24
+ ```
25
+
26
+ ## What it does
27
+
28
+ - Injects the layer order first on every page: `vendor`, then cascivo's canonical layers
29
+ (`DEFAULT_LAYERS`). Pass `layers` with a complete `@layer …;` statement to add your own slots
30
+ (a layer takes its position from its first appearance, so it must name every layer the page uses).
31
+ - Imports the theme stylesheet on every page (`theme`, default
32
+ `@cascivo/themes/light-dark.css`; `false` to import it yourself).
33
+ - Inlines the no-flash theme script in `<head>` and re-applies it after every
34
+ `<ClientRouter />` swap (`themeScript`; `false` to opt out). `themeScript` takes
35
+ `{ storageKey?, attribute?, defaultTheme? }`; an app on one custom theme sets `theme` and
36
+ `themeScript.defaultTheme` together.
37
+ - Keeps `@cascivo/*` packages in the Vite graph (`vite.resolve.noExternal`), so server-rendered
38
+ islands keep their CSS on `@cascivo/react` releases that predate the `astro-component` keyword.
39
+
40
+ ## Two rules for islands
41
+
42
+ - Compose compound components (`Tabs`, `Accordion`, `Popover`) in one `.tsx` file and hydrate that
43
+ island. Astro renders `.astro` children separately, so React context never reaches them.
44
+ - Never put a `client:*` directive on a `@cascivo/react` export imported straight into an `.astro`
45
+ file: it measured 326 KB of JS and 331 KB of CSS.
46
+
47
+ `npx cascivo create my-app --framework astro` emits an app with all of this wired. The adopter path
48
+ is verified by the Astro arm of `pnpm framework:check`.
49
+
50
+ Full guide: [docs/USING-WITH-ASTRO.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-ASTRO.md).