npm - @arkstack/inertia - Versions diffs - 0.15.5 → 0.16.1 - Mend

@arkstack/inertia 0.15.5 → 0.16.1

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.

Files changed (17) hide show

package/dist/index.d.ts +17 -28
package/dist/index.js +14 -55
package/dist/setup.js +96 -0
package/dist/tags-C-fCNM8D.js +38 -0
package/package.json +5 -5
package/stubs/config/app.css.stub +343 -0
package/stubs/react/resources/js/Pages/Index.tsx.stub +120 -0
package/stubs/react/resources/js/app.tsx.stub +14 -0
package/stubs/react/vite.config.ts.stub +11 -0
package/stubs/shared/resources/js/vite-env.d.ts.stub +1 -0
package/stubs/svelte/resources/js/Pages/Index.svelte.stub +136 -0
package/stubs/svelte/resources/js/app.ts.stub +13 -0
package/stubs/svelte/vite.config.ts.stub +11 -0
package/stubs/views/app.edge.stub +17 -2
package/stubs/vue/resources/js/Pages/Index.vue.stub +146 -0
package/stubs/vue/resources/js/app.ts.stub +15 -0
package/stubs/vue/vite.config.ts.stub +11 -0

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { Response } from "@arkstack/http";
-import { ViewFactory } from "@arkstack/view";
 //#region src/types.d.ts
 /**
@@ -11,8 +10,8 @@ import { ViewFactory } from "@arkstack/view";
 type PageProps = Record<string, unknown>;
 /**
  * The page object Inertia exchanges with the client. It is serialized to JSON for
- * Inertia XHR visits and embedded in the root template's `data-page` attribute on
- * the initial full-page visit.
+ * Inertia XHR visits and embedded in the root template's `data-page` script
+ * element on the initial full-page visit.
  *
  * @see https://inertiajs.com/the-protocol
  */
@@ -38,13 +37,13 @@ interface InertiaPage {
 interface InertiaConfig {
   /**
    * The root Edge template that wraps the SPA and renders the `data-page`
-   * element. Defaults to `app`. When the view does not exist a minimal
-   * built-in template is used.
+   * script element and mount div. Defaults to `app`. When the view does not
+   * exist a minimal built-in template is used.
    */
   root_view: string;
   /**
-   * The id of the root DOM element the client mounts onto (the element that
-   * carries the `data-page` attribute). Defaults to `app`.
+   * The id of the root DOM element the client mounts onto (and the `data-page`
+   * value on the JSON script element). Defaults to `app`.
    */
   root_id: string;
   /**
@@ -248,8 +247,15 @@ declare const resolveProps: (component: string, props: PageProps, request: Inert
 /** Escape a string for safe inclusion in a double-quoted HTML attribute. */
 declare const escapeHtmlAttribute: (value: string) => string;
 /**
- * Build the root mount element carrying the serialized page object in its
- * `data-page` attribute — the element the Inertia client adapter hydrates.
+ * Build the elements the Inertia client adapter hydrates: the (empty) mount
+ * `<div id="…">` plus the JSON `<script type="application/json" data-page="…">`
+ * carrying the serialized page object.
+ *
+ * The client reads the initial page from the JSON script element
+ * (`script[data-page][type="application/json"]`), not from a `data-page`
+ * attribute on the mount div. Forward slashes are escaped to `\/` so an embedded
+ * `</script>` in the page payload cannot terminate the script element early
+ * (`\/` remains a valid JSON escape for `/`).
  */
 declare const renderDataPage: (page: InertiaPage, rootId: string) => string;
 /** Minimal built-in root document used when the configured root view is absent. */
@@ -265,23 +271,6 @@ declare const builtInTemplate: (mount: string, head?: string) => string;
  */
 declare const renderRootHtml: (page: InertiaPage, config: InertiaConfig) => Promise<string>;
 //#endregion
-//#region src/tags.d.ts
-/**
- * Register the `@inertia` and `@inertiaHead` Edge tags on a view factory.
- *
- * - `@inertia` renders the root mount element (`<div data-page="…">`), or the
- *   server-rendered markup when SSR is enabled.
- * - `@inertiaHead` renders the SSR head tags (empty without SSR).
- *
- * Both read the values the adapter passes to the root template, so they replace
- * the equivalent `{{{ inertia }}}` / `{{{ inertiaHead }}}` interpolations.
- * Idempotent per factory.
- *
- * @param factory
- * @returns
- */
-declare const registerInertiaTags: (factory: ViewFactory) => void;
-//#endregion
 //#region src/ssr.d.ts
 /** The default address the Inertia SSR server listens on. */
 declare const DEFAULT_SSR_URL = "http://127.0.0.1:13714/render";
@@ -289,7 +278,7 @@ declare const DEFAULT_SSR_URL = "http://127.0.0.1:13714/render";
 interface SsrResponse {
   /** HTML strings to inject into the document `<head>` (title, meta, style). */
   head: string[];
-  /** The rendered `<div id="app" data-page="…">…</div>` mount element. */
+  /** The rendered mount markup (JSON `<script data-page>` + server-rendered `<div>`). */
   body: string;
 }
 /**
@@ -392,4 +381,4 @@ declare const SEE_OTHER_METHODS: Set<string>;
  */
 declare const shouldUpgradeRedirect: (method: string, status: number) => boolean;
 //#endregion
-export { AlwaysProp, type AlwaysPropContract, DEFAULT_SSR_BUNDLE, DEFAULT_SSR_URL, DeferProp, type DeferPropContract, Inertia, type InertiaConfig, type InertiaPage, type InertiaPropWrapper, type InertiaRequest, type InertiaStore, LazyProp, type LazyPropContract, type PageProps, SEE_OTHER_METHODS, type SsrProcessController, type SsrResponse, type SuperviseOptions, builtInTemplate, configure, currentStore, defaultConfig, escapeHtmlAttribute, flushShared, inertia, inertiaConfig, isAlwaysProp, isDeferProp, isLazyProp, isPropWrapper, registerInertiaTags, renderDataPage, renderRootHtml, renderViaSsr, resetConfig, resolveProps, resolveSsrBundle, resolveVersion, runInertia, setVersion, shareData, sharedData, shouldUpgradeRedirect, superviseProcess };
+export { AlwaysProp, type AlwaysPropContract, DEFAULT_SSR_BUNDLE, DEFAULT_SSR_URL, DeferProp, type DeferPropContract, Inertia, type InertiaConfig, type InertiaPage, type InertiaPropWrapper, type InertiaRequest, type InertiaStore, LazyProp, type LazyPropContract, type PageProps, SEE_OTHER_METHODS, type SsrProcessController, type SsrResponse, type SuperviseOptions, builtInTemplate, configure, currentStore, defaultConfig, escapeHtmlAttribute, flushShared, inertia, inertiaConfig, isAlwaysProp, isDeferProp, isLazyProp, isPropWrapper, renderDataPage, renderRootHtml, renderViaSsr, resetConfig, resolveProps, resolveSsrBundle, resolveVersion, runInertia, setVersion, shareData, sharedData, shouldUpgradeRedirect, superviseProcess };

package/dist/index.js CHANGED Viewed

@@ -1,18 +1,6 @@
 import { a as defaultConfig, c as resolveVersion, i as configure, l as setVersion, n as resolveSsrBundle, o as inertiaConfig, r as superviseProcess, s as resetConfig, t as DEFAULT_SSR_BUNDLE } from "./ssr-process-Cz4b8S_f.js";
 import { AsyncLocalStorage } from "node:async_hooks";
 import { Response } from "@arkstack/http";
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-//#endregion
 //#region src/props.ts
 /**
 * A prop that is excluded from the initial page load and only resolved when the
@@ -160,11 +148,18 @@ const escapeHtmlAttribute = (value) => {
 	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 };
 /**
-* Build the root mount element carrying the serialized page object in its
-* `data-page` attribute — the element the Inertia client adapter hydrates.
+* Build the elements the Inertia client adapter hydrates: the (empty) mount
+* `<div id="…">` plus the JSON `<script type="application/json" data-page="…">`
+* carrying the serialized page object.
+*
+* The client reads the initial page from the JSON script element
+* (`script[data-page][type="application/json"]`), not from a `data-page`
+* attribute on the mount div. Forward slashes are escaped to `\/` so an embedded
+* `<\/script>` in the page payload cannot terminate the script element early
+* (`\/` remains a valid JSON escape for `/`).
 */
 const renderDataPage = (page, rootId) => {
-	return `<div id="${rootId}" data-page="${escapeHtmlAttribute(JSON.stringify(page))}"></div>`;
+	return `<script data-page="${rootId}" type="application/json">${JSON.stringify(page).replace(/\//g, "\\/")}<\/script><div id="${rootId}"></div>`;
 };
 /** Minimal built-in root document used when the configured root view is absent. */
 const builtInTemplate = (mount, head = "") => {
@@ -203,7 +198,7 @@ const renderRootHtml = async (page, config) => {
 	}
 	try {
 		const { view } = await import("@arkstack/view");
-		const { registerInertiaTags } = await Promise.resolve().then(() => tags_exports);
+		const { registerInertiaTags } = await import("./tags-C-fCNM8D.js");
 		const factory = view();
 		registerInertiaTags(factory);
 		if (factory.exists(config.root_view)) return await view(config.root_view, {
@@ -313,6 +308,8 @@ var Inertia = class Inertia {
 		const request = Inertia.request();
 		const config = inertiaConfig();
 		const version = await resolveVersion();
+		const appName = globalThis.config?.("app.name");
+		if (appName !== void 0 && Inertia.shared().appName === void 0) Inertia.share("appName", appName);
 		if (isInertiaRequest(request) && request.method === "GET" && (request.header("x-inertia-version") ?? "") !== version) return Inertia.conflict(request.url);
 		const { props: resolved, deferredProps } = await resolveProps(component, {
 			...sharedData(),
@@ -406,42 +403,4 @@ function inertia(component, props = {}) {
 	return Inertia.render(component, props);
 }
 //#endregion
-//#region src/tags.ts
-var tags_exports = /* @__PURE__ */ __exportAll({ registerInertiaTags: () => registerInertiaTags });
-/** Factories that already have the Inertia tags registered. */
-const registered = /* @__PURE__ */ new WeakSet();
-/**
-* Build an Edge tag compiler that outputs a template data variable raw (falling
-* back to an empty string when it is absent).
-*
-* @param name
-* @returns
-*/
-const outputVariable = (name) => {
-	return (parser, buffer, token) => {
-		const ast = parser.utils.transformAst(parser.utils.generateAST(`${name} || ""`, token.loc, token.filename), token.filename, parser);
-		buffer.outputExpression(parser.utils.stringify(ast), token.filename, token.loc.start.line, false);
-	};
-};
-/**
-* Register the `@inertia` and `@inertiaHead` Edge tags on a view factory.
-*
-* - `@inertia` renders the root mount element (`<div data-page="…">`), or the
-*   server-rendered markup when SSR is enabled.
-* - `@inertiaHead` renders the SSR head tags (empty without SSR).
-*
-* Both read the values the adapter passes to the root template, so they replace
-* the equivalent `{{{ inertia }}}` / `{{{ inertiaHead }}}` interpolations.
-* Idempotent per factory.
-*
-* @param factory
-* @returns
-*/
-const registerInertiaTags = (factory) => {
-	if (registered.has(factory)) return;
-	registered.add(factory);
-	factory.tag("inertia", false, false, outputVariable("inertia"));
-	factory.tag("inertiaHead", false, false, outputVariable("inertiaHead"));
-};
-//#endregion
-export { AlwaysProp, DEFAULT_SSR_BUNDLE, DEFAULT_SSR_URL, DeferProp, Inertia, LazyProp, SEE_OTHER_METHODS, builtInTemplate, configure, currentStore, defaultConfig, escapeHtmlAttribute, flushShared, inertia, inertiaConfig, isAlwaysProp, isDeferProp, isLazyProp, isPropWrapper, registerInertiaTags, renderDataPage, renderRootHtml, renderViaSsr, resetConfig, resolveProps, resolveSsrBundle, resolveVersion, runInertia, setVersion, shareData, sharedData, shouldUpgradeRedirect, superviseProcess };
+export { AlwaysProp, DEFAULT_SSR_BUNDLE, DEFAULT_SSR_URL, DeferProp, Inertia, LazyProp, SEE_OTHER_METHODS, builtInTemplate, configure, currentStore, defaultConfig, escapeHtmlAttribute, flushShared, inertia, inertiaConfig, isAlwaysProp, isDeferProp, isLazyProp, isPropWrapper, renderDataPage, renderRootHtml, renderViaSsr, resetConfig, resolveProps, resolveSsrBundle, resolveVersion, runInertia, setVersion, shareData, sharedData, shouldUpgradeRedirect, superviseProcess };

package/dist/setup.js CHANGED Viewed

@@ -16,6 +16,9 @@ Publisher.publishes({
 	entries: [{
 		from: join(root, "stubs/config/inertia.ts.stub"),
 		to: "src/config/inertia.ts"
+	}, {
+		from: join(root, "stubs/config/app.css.stub"),
+		to: "resources/css/app.css"
 	}]
 });
 Publisher.publishes({
@@ -26,5 +29,98 @@ Publisher.publishes({
 		to: "src/resources/views/app.edge"
 	}]
 });
+Publisher.publishes({
+	package: "@arkstack/inertia",
+	tag: "inertia-react",
+	entries: [
+		{
+			from: join(root, "stubs/react/resources/js/app.tsx.stub"),
+			to: "resources/js/app.tsx"
+		},
+		{
+			from: join(root, "stubs/react/vite.config.ts.stub"),
+			to: "vite.config.ts"
+		},
+		{
+			from: join(root, "stubs/react/resources/js/Pages/Index.tsx.stub"),
+			to: "resources/js/Pages/Index.tsx"
+		},
+		{
+			from: join(root, "stubs/shared/resources/js/vite-env.d.ts.stub"),
+			to: "resources/js/vite-env.d.ts"
+		}
+	]
+});
+Publisher.publishes({
+	package: "@arkstack/inertia",
+	tag: "inertia-svelte",
+	entries: [
+		{
+			from: join(root, "stubs/svelte/resources/js/app.ts.stub"),
+			to: "resources/js/app.ts"
+		},
+		{
+			from: join(root, "stubs/svelte/vite.config.ts.stub"),
+			to: "vite.config.ts"
+		},
+		{
+			from: join(root, "stubs/svelte/resources/js/Pages/Index.svelte.stub"),
+			to: "resources/js/Pages/Index.svelte"
+		},
+		{
+			from: join(root, "stubs/shared/resources/js/vite-env.d.ts.stub"),
+			to: "resources/js/vite-env.d.ts"
+		}
+	]
+});
+Publisher.publishes({
+	package: "@arkstack/inertia",
+	tag: "inertia-vue",
+	entries: [
+		{
+			from: join(root, "stubs/vue/resources/js/app.ts.stub"),
+			to: "resources/js/app.ts"
+		},
+		{
+			from: join(root, "stubs/vue/vite.config.ts.stub"),
+			to: "vite.config.ts"
+		},
+		{
+			from: join(root, "stubs/vue/resources/js/Pages/Index.vue.stub"),
+			to: "resources/js/Pages/Index.vue"
+		},
+		{
+			from: join(root, "stubs/shared/resources/js/vite-env.d.ts.stub"),
+			to: "resources/js/vite-env.d.ts"
+		}
+	]
+});
+Publisher.confirm({
+	package: "@arkstack/inertia",
+	message: "What front-end framework are you using with Inertia?",
+	options: [
+		{
+			name: "React",
+			value: "inertia-react"
+		},
+		{
+			name: "Svelte",
+			value: "inertia-svelte"
+		},
+		{
+			name: "Vue",
+			value: "inertia-vue"
+		}
+	],
+	callback: (tag, stub) => {
+		const exts = {
+			"inertia-react": "tsx",
+			"inertia-svelte": "ts",
+			"inertia-vue": "ts"
+		};
+		const reactRefresh = tag === "inertia-react" ? "@viteReactRefresh\n    " : "";
+		return stub.replaceAll("{{ext}}", exts[tag] ?? "ts").replaceAll("{{reactRefresh}}", reactRefresh);
+	}
+});
 //#endregion
 export {};

package/dist/tags-C-fCNM8D.js ADDED Viewed

@@ -0,0 +1,38 @@
+//#region src/tags.ts
+/** Factories that already have the Inertia tags registered. */
+const registered = /* @__PURE__ */ new WeakSet();
+/**
+* Build an Edge tag compiler that outputs a template data variable raw (falling
+* back to an empty string when it is absent).
+*
+* @param name
+* @returns
+*/
+const outputVariable = (name) => {
+	return (parser, buffer, token) => {
+		const ast = parser.utils.transformAst(parser.utils.generateAST(`${name} || ""`, token.loc, token.filename), token.filename, parser);
+		buffer.outputExpression(parser.utils.stringify(ast), token.filename, token.loc.start.line, false);
+	};
+};
+/**
+* Register the `@inertia` and `@inertiaHead` Edge tags on a view factory.
+*
+* - `@inertia` renders the root mount element (the JSON `<script data-page="…">`
+*   plus the mount `<div>`), or the server-rendered markup when SSR is enabled.
+* - `@inertiaHead` renders the SSR head tags (empty without SSR).
+*
+* Both read the values the adapter passes to the root template, so they replace
+* the equivalent `{{{ inertia }}}` / `{{{ inertiaHead }}}` interpolations.
+* Idempotent per factory.
+*
+* @param factory
+* @returns
+*/
+const registerInertiaTags = (factory) => {
+	if (registered.has(factory)) return;
+	registered.add(factory);
+	factory.tag("inertia", false, false, outputVariable("inertia"));
+	factory.tag("inertiaHead", false, false, outputVariable("inertiaHead"));
+};
+//#endregion
+export { registerInertiaTags };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@arkstack/inertia",
-  "version": "0.15.5",
+  "version": "0.16.1",
   "type": "module",
   "description": "InertiaJS server-side adapter for Arkstack, building the modern monolith with server-driven SPAs.",
   "homepage": "https://arkstack.toneflix.net/guide/inertia",
@@ -33,13 +33,13 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@arkstack/common": "^0.15.5"
+    "@arkstack/common": "^0.16.1"
   },
   "peerDependencies": {
     "@h3ravel/musket": "^2.2.1",
-    "@arkstack/contract": "^0.15.5",
-    "@arkstack/view": "^0.15.5",
-    "@arkstack/http": "^0.15.5"
+    "@arkstack/contract": "^0.16.1",
+    "@arkstack/http": "^0.16.1",
+    "@arkstack/view": "^0.16.1"
   },
   "peerDependenciesMeta": {
     "@arkstack/view": {

package/stubs/config/app.css.stub ADDED Viewed

@@ -0,0 +1,343 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+/* ── Dark theme (default) ── */
+:root {
+    --gold-light: #f0c040;
+    --gold-mid: #c9960c;
+    --gold-dark: #8a6400;
+    --bg: #0b0c0e;
+    --bg-card: #111317;
+    --bg-snippet: #0d0f12;
+    --border: rgba(201, 150, 12, 0.18);
+    --text: #f5f0e8;
+    --muted: #7a7567;
+    --radius: 10px;
+    --card-hover: #161820;
+    --kw: #8a9ad6;
+    --fn: #e8c56a;
+    --str: #88c99a;
+    --cm: #4a5060;
+    --code-base: #d4b86a;
+}
+/* ── Light theme ── */
+[data-theme="light"] {
+    --gold-light: #a06800;
+    --gold-mid: #8a5a00;
+    --gold-dark: #6b4400;
+    --bg: #f5f3ef;
+    --bg-card: #ffffff;
+    --bg-snippet: #f0ede8;
+    --border: rgba(160, 104, 0, 0.16);
+    --text: #1a1714;
+    --muted: #9a9080;
+    --card-hover: #f9f7f3;
+    --kw: #5460a0;
+    --fn: #8a6000;
+    --str: #2e7d52;
+    --cm: #aaa090;
+    --code-base: #7a5c20;
+}
+/* ── OS preference fallback (no JS) ── */
+@media (prefers-color-scheme: light) {
+    :root:not([data-theme="dark"]) {
+    --gold-light: #a06800;
+    --gold-mid: #8a5a00;
+    --gold-dark: #6b4400;
+    --bg: #f5f3ef;
+    --bg-card: #ffffff;
+    --bg-snippet: #f0ede8;
+    --border: rgba(160, 104, 0, 0.16);
+    --text: #1a1714;
+    --muted: #9a9080;
+    --card-hover: #f9f7f3;
+    --kw: #5460a0;
+    --fn: #8a6000;
+    --str: #2e7d52;
+    --cm: #aaa090;
+    --code-base: #7a5c20;
+    }
+}
+html,
+body {
+    min-height: 100vh;
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'DM Mono', monospace;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 1rem;
+    transition: background 0.25s, color 0.25s;
+}
+.page {
+    max-width: 580px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+/* ── Top bar ── */
+.topbar {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2.8rem;
+}
+/* ── Brand block ── */
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+}
+.logo-wrap {
+    position: relative;
+    flex-shrink: 0;
+}
+.logo-wrap img {
+    width: 55px;
+    height: 55px;
+    display: block;
+    filter: drop-shadow(0 0 18px rgba(201, 150, 12, 0.35));
+    animation: floatLogo 4s ease-in-out infinite;
+}
+.halo {
+    position: absolute;
+    inset: -14px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(201, 150, 12, 0.1) 0%, transparent 70%);
+    pointer-events: none;
+    animation: pulse 4s ease-in-out infinite;
+}
+@keyframes floatLogo {
+    0%,
+    100% {
+    transform: translateY(0);
+    }
+    50% {
+    transform: translateY(-5px);
+    }
+}
+@keyframes pulse {
+    0%,
+    100% {
+    opacity: 0.5;
+    transform: scale(1);
+    }
+    50% {
+    opacity: 1;
+    transform: scale(1.08);
+    }
+}
+.brand-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.wordmark {
+    font-family: 'Syne', sans-serif;
+    font-size: 2.5rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    color: var(--text);
+    line-height: 1;
+}
+.wordmark span {
+    color: var(--gold-light);
+}
+.tagline {
+    font-size: 0.75rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--muted);
+    line-height: 1;
+}
+/* ── Status pill ── */
+.status-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(201, 150, 12, 0.06);
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    padding: 6px 16px 6px 10px;
+    font-size: 0.72rem;
+    letter-spacing: 0.06em;
+    color: var(--gold-light);
+    margin-top: 1rem;
+    margin-bottom: 2.8rem;
+    transition: border-color 0.25s;
+}
+.dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #4caf74;
+    box-shadow: 0 0 6px #4caf74;
+    animation: blink 2s ease-in-out infinite;
+}
+@keyframes blink {
+    0%,
+    100% {
+    opacity: 1;
+    }
+    50% {
+    opacity: 0.4;
+    }
+}
+/* ── Divider ── */
+.divider {
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--border), transparent);
+    margin-bottom: 2.8rem;
+}
+/* ── Feature cards ── */
+.cards {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 12px;
+    margin-bottom: 2.4rem;
+}
+.card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.1rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    transition: border-color 0.2s, background 0.2s;
+}
+.card:hover {
+    border-color: var(--gold-mid);
+    background: var(--card-hover);
+}
+.card-icon {
+    font-size: 1.1rem;
+    margin-bottom: 4px;
+    opacity: 0.85;
+    width: 20px;
+}
+.card-title {
+    font-family: 'Syne', sans-serif;
+    font-weight: 700;
+    font-size: 0.82rem;
+    color: var(--text);
+}
+.card-desc {
+    font-size: 0.68rem;
+    color: var(--muted);
+    line-height: 1.5;
+}
+/* ── Code snippet ── */
+.snippet {
+    width: 100%;
+    background: var(--bg-snippet);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.1rem 1.25rem;
+    margin-bottom: 2.4rem;
+    position: relative;
+    overflow: hidden;
+    transition: background 0.25s, border-color 0.25s;
+}
+.snippet::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
+}
+.snippet-label {
+    font-size: 0.65rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--muted);
+    margin-bottom: 0.7rem;
+}
+.snippet code {
+    font-family: 'DM Mono', monospace;
+    font-size: 0.78rem;
+    color: var(--code-base);
+    display: block;
+    line-height: 1.9;
+}
+.kw {
+    color: var(--kw);
+}
+.fn {
+    color: var(--fn);
+}
+.str {
+    color: var(--str);
+}
+.cm {
+    color: var(--cm);
+}
+/* ── Footer ── */
+.footer {
+    font-size: 0.65rem;
+    color: var(--muted);
+    text-align: center;
+    letter-spacing: 0.06em;
+    line-height: 2;
+}
+.footer a {
+    color: var(--gold-mid);
+    text-decoration: none;
+}
+.footer a:hover {
+    color: var(--gold-light);
+}

package/stubs/react/resources/js/Pages/Index.tsx.stub ADDED Viewed

@@ -0,0 +1,120 @@
+export default function Index({
+  message,
+  appName,
+  title,
+}: {
+  appName: string;
+  title: string;
+  message: string;
+}) {
+  const root = document.documentElement
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  root.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
+  return (
+    <div className="page">
+      <div className="brand">
+        <div className="logo-wrap">
+          <div className="halo"></div>
+          <img
+            src="https://arkstack.toneflix.net/logo.png"
+            alt="Arkstack logo"
+          />
+        </div>
+        <div className="brand-text">
+          <h1 className="wordmark">
+            Ark<span>stack</span>
+          </h1>
+          <p className="tagline">
+            Node.js Framework &mdash; Runtime Agnostic
+          </p>
+        </div>
+      </div>
+      <div className="status-row">
+        <div className="dot"></div>
+        {message}
+      </div>
+      <div className="divider"></div>
+      <div className="cards">
+        <div className="card">
+          <div className="card-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M13 10H20L11 23V14H4L13 1V10Z"></path>
+            </svg>
+          </div>
+          <div className="card-title">Fast by default</div>
+          <div className="card-desc">
+            Zero-bloat core. Ships only what you need.
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M13 18V20H19V22H13C11.8954 22 11 21.1046 11 20V18H8C5.79086 18 4 16.2091 4 14V10H20V14C20 16.2091 18.2091 18 16 18H13ZM16 6H19C19.5523 6 20 6.44772 20 7V9H4V7C4 6.44772 4.44772 6 5 6H8V2H10V6H14V2H16V6ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5Z"></path>
+            </svg>
+          </div>
+          <div className="card-title">Adapters</div>
+          <div className="card-desc">
+            Express, Fastify, Hono, Koa — swap runtimes freely.
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864Z"></path>
+            </svg>
+          </div>
+          <div className="card-title">Structured</div>
+          <div className="card-desc">Modular conventions for Node.js.</div>
+        </div>
+      </div>
+      <div className="snippet">
+        <div className="snippet-label">get started</div>
+        <code>
+          <span className="cm">// src/routes/api.ts</span>
+          <br />
+          <span className="kw">import</span> {'{ Router }'}{' '}
+          <span className="kw">from</span>{' '}
+          <span className="str">'@arkstack/driver-express'</span>
+          <br />
+          <br />
+          Router.<span className="fn">get</span>(
+          <span className="str">'/'</span>, () =&gt; {'{'}
+          <br />
+          &nbsp;&nbsp;<span className="kw">return</span> {'{'} status:{' '}
+          <span className="str">'ok'</span> {'}'}
+          <br />
+          {'}'})
+        </code>
+      </div>
+      <p className="footer">
+        <a href="https://arkstack.toneflix.net/">Docs</a>{' '}
+        &nbsp;&middot;&nbsp;
+        <a href="https://github.com/arkstack-hq/arkstack">GitHub</a>{' '}
+        &nbsp;&middot;&nbsp;
+        <a href="https://discord.gg/jmQybxKQ7R">Discord</a>
+        <br />
+        Arkstack &copy; {new Date().getFullYear()} &mdash; By Toneflix
+        Technologies
+      </p>
+    </div>
+  )
+}

package/stubs/react/resources/js/app.tsx.stub ADDED Viewed

@@ -0,0 +1,14 @@
+import { createInertiaApp } from '@inertiajs/react';
+import { createRoot } from 'react-dom/client';
+import type { ComponentType } from 'react';
+createInertiaApp({
+  resolve: (name) => {
+    const pages = import.meta.glob<{ default: ComponentType }>('./Pages/**/*.tsx', { eager: true });
+    return pages[`./Pages/${name}.tsx`];
+  },
+  setup({ el, App, props }) {
+    createRoot(el).render(<App {...props} />);
+  },
+});

package/stubs/react/vite.config.ts.stub ADDED Viewed

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({
+    plugins: [react()],
+    build: {
+        manifest: true,
+        outDir: 'public/build',
+        rolldownOptions: { input: 'resources/js/app.tsx' },
+    },
+})

package/stubs/shared/resources/js/vite-env.d.ts.stub ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

package/stubs/svelte/resources/js/Pages/Index.svelte.stub ADDED Viewed

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  export let appName: string
+  export let title: string
+  export let message: string
+  const currentYear = new Date().getFullYear()
+  onMount(() => {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    document.documentElement.setAttribute(
+      'data-theme',
+      prefersDark ? 'dark' : 'light',
+    )
+  })
+</script>
+<div class="page">
+  <div class="brand">
+    <div class="logo-wrap">
+      <div class="halo"></div>
+      <img
+        src="https://arkstack.toneflix.net/logo.png"
+        alt="Arkstack logo"
+      />
+    </div>
+    <div class="brand-text">
+      <h1 class="wordmark">
+        Ark<span>stack</span>
+      </h1>
+      <p class="tagline">
+        Node.js Framework &mdash; Runtime Agnostic
+      </p>
+    </div>
+  </div>
+  <div class="status-row">
+    <div class="dot"></div>
+    {message}
+  </div>
+  <div class="divider"></div>
+  <div class="cards">
+    <div class="card">
+      <div class="card-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M13 10H20L11 23V14H4L13 1V10Z" />
+        </svg>
+      </div>
+      <div class="card-title">Fast by default</div>
+      <div class="card-desc">
+        Zero-bloat core. Ships only what you need.
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M13 18V20H19V22H13C11.8954 22 11 21.1046 11 20V18H8C5.79086 18 4 16.2091 4 14V10H20V14C20 16.2091 18.2091 18 16 18H13ZM16 6H19C19.5523 6 20 6.44772 20 7V9H4V7C4 6.44772 4.44772 6 5 6H8V2H10V6H14V2H16V6ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5Z" />
+        </svg>
+      </div>
+      <div class="card-title">Adapters</div>
+      <div class="card-desc">
+        Express, Fastify, Hono, Koa — swap runtimes freely.
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864Z" />
+        </svg>
+      </div>
+      <div class="card-title">Structured</div>
+      <div class="card-desc">
+        Modular conventions for Node.js.
+      </div>
+    </div>
+  </div>
+  <div class="snippet">
+    <div class="snippet-label">
+      get started
+    </div>
+    <code>
+      <span class="cm">// src/routes/api.ts</span>
+      <br />
+      <span class="kw">import</span> {'{ Router }'}
+      <span class="kw"> from </span>
+      <span class="str">'@arkstack/driver-express'</span>
+      <br />
+      <br />
+      Router.<span class="fn">get</span>(<span class="str">'/'</span>, () =&gt; {'{'}
+      <br />
+      &nbsp;&nbsp;<span class="kw">return</span> {'{'} status:
+      <span class="str">'ok'</span> {'}'}
+      <br />
+      {'}'})
+    </code>
+  </div>
+  <p class="footer">
+    <a href="https://arkstack.toneflix.net/">Docs</a>
+    &nbsp;&middot;&nbsp;
+    <a href="https://github.com/arkstack-hq/arkstack">GitHub</a>
+    &nbsp;&middot;&nbsp;
+    <a href="https://discord.gg/jmQybxKQ7R">Discord</a>
+    <br />
+    Arkstack &copy; {currentYear} &mdash; By Toneflix Technologies
+  </p>
+</div>

package/stubs/svelte/resources/js/app.ts.stub ADDED Viewed

@@ -0,0 +1,13 @@
+import { createInertiaApp } from '@inertiajs/svelte'
+import { mount } from 'svelte'
+createInertiaApp({
+  resolve: (name) => {
+    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true });
+    return pages[`./Pages/${name}.svelte`];
+  },
+  setup({ el, App, props }) {
+    mount(App, { target: el, props });
+  },
+})

package/stubs/svelte/vite.config.ts.stub ADDED Viewed

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+export default defineConfig({
+  plugins: [svelte()],
+  build: {
+    manifest: true,
+    outDir: 'public/build',
+    rolldownOptions: { input: 'resources/js/app.ts' },
+  },
+})

package/stubs/views/app.edge.stub CHANGED Viewed

@@ -1,12 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>
+      {appName} - {title}
+    </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossOrigin="use-credentials"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
     @inertiaHead
-    @vite('resources/js/app.ts')
-</head>
+    {{reactRefresh}}@vite(['resources/js/app.{{ext}}', 'resources/css/app.css'])
+</head>
 <body>
     @inertia
 </body>
 </html>

package/stubs/vue/resources/js/Pages/Index.vue.stub ADDED Viewed

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+defineProps<{
+  appName: string
+  title: string
+  message: string
+}>()
+onMounted(() => {
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  document.documentElement.setAttribute(
+    'data-theme',
+    prefersDark ? 'dark' : 'light',
+  )
+})
+const currentYear = new Date().getFullYear()
+</script>
+<template>
+  <div class="page">
+    <div class="brand">
+      <div class="logo-wrap">
+        <div class="halo" />
+        <img
+          src="https://arkstack.toneflix.net/logo.png"
+          alt="Arkstack logo"
+        />
+      </div>
+      <div class="brand-text">
+        <h1 class="wordmark">
+          Ark<span>stack</span>
+        </h1>
+        <p class="tagline">
+          Node.js Framework &mdash; Runtime Agnostic
+        </p>
+      </div>
+    </div>
+    <div class="status-row">
+      <div class="dot" />
+      {{ message }}
+    </div>
+    <div class="divider" />
+    <div class="cards">
+      <div class="card">
+        <div class="card-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M13 10H20L11 23V14H4L13 1V10Z" />
+          </svg>
+        </div>
+        <div class="card-title">
+          Fast by default
+        </div>
+        <div class="card-desc">
+          Zero-bloat core. Ships only what you need.
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M13 18V20H19V22H13C11.8954 22 11 21.1046 11 20V18H8C5.79086 18 4 16.2091 4 14V10H20V14C20 16.2091 18.2091 18 16 18H13ZM16 6H19C19.5523 6 20 6.44772 20 7V9H4V7C4 6.44772 4.44772 6 5 6H8V2H10V6H14V2H16V6ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5Z" />
+          </svg>
+        </div>
+        <div class="card-title">
+          Adapters
+        </div>
+        <div class="card-desc">
+          Express, Fastify, Hono, Koa — swap runtimes freely.
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864Z" />
+          </svg>
+        </div>
+        <div class="card-title">
+          Structured
+        </div>
+        <div class="card-desc">
+          Modular conventions for Node.js.
+        </div>
+      </div>
+    </div>
+    <div class="snippet">
+      <div class="snippet-label">
+        get started
+      </div>
+      <code>
+        <span class="cm">// src/routes/api.ts</span>
+        <br />
+        <span class="kw">import</span> { Router }
+        <span class="kw"> from </span>
+        <span class="str">'@arkstack/driver-express'</span>
+        <br />
+        <br />
+        Router.<span class="fn">get</span>(<span class="str">'/'</span>, () =&gt; {
+        <br />
+        &nbsp;&nbsp;<span class="kw">return</span> { status:
+        <span class="str">'ok'</span> }
+        <br />
+        })
+      </code>
+    </div>
+    <p class="footer">
+      <a href="https://arkstack.toneflix.net/">Docs</a>
+      &nbsp;&middot;&nbsp;
+      <a href="https://github.com/arkstack-hq/arkstack">GitHub</a>
+      &nbsp;&middot;&nbsp;
+      <a href="https://discord.gg/jmQybxKQ7R">Discord</a>
+      <br />
+      Arkstack &copy; {{ currentYear }} &mdash; By Toneflix Technologies
+    </p>
+  </div>
+</template>

package/stubs/vue/resources/js/app.ts.stub ADDED Viewed

@@ -0,0 +1,15 @@
+import { createApp, h } from 'vue'
+import { createInertiaApp } from '@inertiajs/vue3'
+createInertiaApp({
+  resolve: (name) => {
+    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
+    return pages[`./Pages/${name}.vue`];
+  },
+  setup({ el, App, props, plugin }) {
+    createApp({ render: () => h(App, props) })
+      .use(plugin)
+      .mount(el);
+  },
+})

package/stubs/vue/vite.config.ts.stub ADDED Viewed

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    manifest: true,
+    outDir: 'public/build',
+    rolldownOptions: { input: 'resources/js/app.ts' },
+  },
+})