storybook-astro 0.1.0

package/dist/renderer/index.d.ts

@@ -0,0 +1,21 @@
+export { r as render, a as renderToCanvas } from '../render-BR-BGSWL.js';
+
+/**
+ * Default decorators for Astro Storybook
+ *
+ * These decorators are automatically applied to all stories.
+ */
+declare const decorators: unknown[];
+
+/**
+ * Astro Storybook Renderer
+ *
+ * This module is the renderer entry point for Storybook.
+ * It exports the render functions that Storybook uses to display components.
+ */
+
+declare const parameters: {
+    renderer: string;
+};
+
+export { decorators, parameters };

package/dist/renderer/index.js

@@ -0,0 +1,211 @@
+import { simulatePageLoad, simulateDOMContentLoaded } from 'storybook/internal/preview-api';
+
+// src/renderer/render.ts
+
+// node_modules/ts-dedent/esm/index.js
+function dedent(templ) {
+  var values = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    values[_i - 1] = arguments[_i];
+  }
+  var strings = Array.from(typeof templ === "string" ? [templ] : templ);
+  strings[strings.length - 1] = strings[strings.length - 1].replace(/\r?\n([\t ]*)$/, "");
+  var indentLengths = strings.reduce(function(arr, str) {
+    var matches = str.match(/\n([\t ]+|(?!\s).)/g);
+    if (matches) {
+      return arr.concat(matches.map(function(match) {
+        var _a, _b;
+        return (_b = (_a = match.match(/[\t ]/g)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+      }));
+    }
+    return arr;
+  }, []);
+  if (indentLengths.length) {
+    var pattern_1 = new RegExp("\n[	 ]{" + Math.min.apply(Math, indentLengths) + "}", "g");
+    strings = strings.map(function(str) {
+      return str.replace(pattern_1, "\n");
+    });
+  }
+  strings[0] = strings[0].replace(/^\r?\n/, "");
+  var string = strings[0];
+  values.forEach(function(value, i) {
+    var endentations = string.match(/(?:^|\n)( *)$/);
+    var endentation = endentations ? endentations[1] : "";
+    var indentedValue = value;
+    if (typeof value === "string" && value.includes("\n")) {
+      indentedValue = String(value).split("\n").map(function(str, i2) {
+        return i2 === 0 ? str : "" + endentation + str;
+      }).join("\n");
+    }
+    string += indentedValue + strings[i + 1];
+  });
+  return string;
+}
+
+// src/renderer/render.ts
+var pendingRequests = /* @__PURE__ */ new Map();
+var isInitialized = false;
+function initialize() {
+  if (isInitialized) return;
+  isInitialized = true;
+  if (import.meta.hot) {
+    import.meta.hot.on("astro:render:response", (data) => {
+      const pending = pendingRequests.get(data.id);
+      if (pending) {
+        clearTimeout(pending.timeoutId);
+        pendingRequests.delete(data.id);
+        pending.resolve(data);
+      }
+    });
+    import.meta.hot.on("astro:component:update", () => {
+      window.dispatchEvent(new CustomEvent("storybook-astro:hmr"));
+    });
+  }
+}
+function render(_args, context) {
+  const { id, component } = context;
+  if (!component) {
+    throw new Error(
+      `Unable to render story ${id} as the component annotation is missing from the default export`
+    );
+  }
+  if (typeof component === "string") {
+    return component;
+  }
+  if (component instanceof HTMLElement) {
+    return component.cloneNode(true);
+  }
+  if (typeof component === "function" && "isAstroComponentFactory" in component) {
+    return component;
+  }
+  if (typeof component === "function") {
+    return component;
+  }
+  console.warn(dedent`
+    Storybook Astro renderer received an unexpected component type.
+    Received: ${typeof component}
+  `);
+  return component;
+}
+async function renderToCanvas(ctx, canvasElement) {
+  initialize();
+  const { storyFn, showMain, showError, forceRemount, storyContext } = ctx;
+  const { name, title } = storyContext;
+  const element = storyFn();
+  showMain();
+  if (isAstroComponent(element)) {
+    await renderAstroComponent(element, storyContext, canvasElement);
+    return;
+  }
+  if (typeof element === "string") {
+    canvasElement.innerHTML = element;
+    simulatePageLoad(canvasElement);
+    return;
+  }
+  if (element instanceof Node) {
+    if (canvasElement.firstChild === element && !forceRemount) {
+      return;
+    }
+    canvasElement.innerHTML = "";
+    canvasElement.appendChild(element);
+    simulateDOMContentLoaded();
+    return;
+  }
+  showError({
+    title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${title}".`,
+    description: dedent`
+      Did you forget to return the HTML snippet from the story?
+      Use "() => <your snippet or node>" or when defining the story.
+    `
+  });
+}
+function isAstroComponent(element) {
+  return element !== null && typeof element === "function" && "isAstroComponentFactory" in element && element.isAstroComponentFactory === true;
+}
+async function renderAstroComponent(component, storyContext, canvasElement) {
+  const { args } = storyContext;
+  const moduleId = component.moduleId;
+  if (!moduleId) {
+    throw new Error("Astro component is missing moduleId. Make sure the component was imported correctly.");
+  }
+  const { slots = {}, ...props } = args;
+  try {
+    const response = await sendRenderRequest({
+      component: moduleId,
+      args: props,
+      slots
+    });
+    canvasElement.innerHTML = response.html;
+    executeScripts(canvasElement);
+    applyDynamicStyles();
+    simulatePageLoad(canvasElement);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    canvasElement.innerHTML = `
+      <div style="color: #dc2626; background: #fef2f2; padding: 16px; border-radius: 8px; font-family: system-ui;">
+        <strong>Failed to render Astro component</strong>
+        <pre style="margin: 8px 0 0; white-space: pre-wrap;">${escapeHtml(message)}</pre>
+      </div>
+    `;
+  }
+}
+async function sendRenderRequest(data) {
+  const id = crypto.randomUUID();
+  const timeoutMs = 1e4;
+  return new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      pendingRequests.delete(id);
+      reject(new Error(`Render request timed out after ${timeoutMs}ms`));
+    }, timeoutMs);
+    pendingRequests.set(id, { resolve, reject, timeoutId });
+    if (import.meta.hot) {
+      import.meta.hot.send("astro:render:request", { ...data, id });
+    } else {
+      clearTimeout(timeoutId);
+      pendingRequests.delete(id);
+      reject(new Error("HMR not available - cannot communicate with server"));
+    }
+  });
+}
+function executeScripts(container) {
+  const scripts = container.querySelectorAll("script");
+  scripts.forEach((oldScript) => {
+    const newScript = document.createElement("script");
+    Array.from(oldScript.attributes).forEach((attr) => {
+      newScript.setAttribute(attr.name, attr.value);
+    });
+    newScript.textContent = oldScript.textContent;
+    oldScript.parentNode?.replaceChild(newScript, oldScript);
+  });
+}
+function applyDynamicStyles() {
+  const styleTags = document.querySelectorAll("style[data-vite-dev-id]");
+  styleTags.forEach((style) => {
+    const content = style.textContent || "";
+    if (content.includes("__vite__updateStyle")) {
+      const script = document.createElement("script");
+      script.type = "module";
+      script.textContent = content.replace(/import\.meta\.hot\.accept\(/g, "import.meta.hot?.accept(").replace(/import\.meta\.hot\.prune\(/g, "import.meta.hot?.prune(");
+      document.head.appendChild(script);
+      document.head.removeChild(script);
+    }
+  });
+}
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// src/renderer/decorators.ts
+var decorators = [];
+var decorators_default = decorators;
+
+// src/renderer/index.ts
+var parameters = {
+  renderer: "astro"
+};
+
+export { decorators_default as decorators, parameters, render, renderToCanvas };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/renderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../node_modules/ts-dedent/src/index.ts","../../src/renderer/render.ts","../../src/renderer/decorators.ts","../../src/renderer/index.ts"],"names":["i"],"mappings":"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","file":"index.js","sourcesContent":["export function dedent(\n  templ: TemplateStringsArray | string,\n  ...values: unknown[]\n): string {\n  let strings = Array.from(typeof templ === 'string' ? [templ] : templ);\n\n  // 1. Remove trailing whitespace.\n  strings[strings.length - 1] = strings[strings.length - 1].replace(\n    /\\r?\\n([\\t ]*)$/,\n    '',\n  );\n\n  // 2. Find all line breaks to determine the highest common indentation level.\n  const indentLengths = strings.reduce((arr, str) => {\n    const matches = str.match(/\\n([\\t ]+|(?!\\s).)/g);\n    if (matches) {\n      return arr.concat(\n        matches.map((match) => match.match(/[\\t ]/g)?.length ?? 0),\n      );\n    }\n    return arr;\n  }, <number[]>[]);\n\n  // 3. Remove the common indentation from all strings.\n  if (indentLengths.length) {\n    const pattern = new RegExp(`\\n[\\t ]{${Math.min(...indentLengths)}}`, 'g');\n\n    strings = strings.map((str) => str.replace(pattern, '\\n'));\n  }\n\n  // 4. Remove leading whitespace.\n  strings[0] = strings[0].replace(/^\\r?\\n/, '');\n\n  // 5. Perform interpolation.\n  let string = strings[0];\n\n  values.forEach((value, i) => {\n    // 5.1 Read current indentation level\n    const endentations = string.match(/(?:^|\\n)( *)$/)\n    const endentation = endentations ? endentations[1] : ''\n    let indentedValue = value\n    // 5.2 Add indentation to values with multiline strings\n    if (typeof value === 'string' && value.includes('\\n')) {\n      indentedValue = String(value)\n        .split('\\n')\n        .map((str, i) => {\n          return i === 0 ? str : `${endentation}${str}`\n        })\n        .join('\\n');\n    }\n\n    string += indentedValue + strings[i + 1];\n  });\n\n  return string;\n}\n\nexport default dedent;\n","/**\n * Astro Component Renderer for Storybook\n * \n * This module handles rendering Astro components in the Storybook canvas.\n * It communicates with the server via WebSocket to use the Container API.\n */\n\nimport { simulateDOMContentLoaded, simulatePageLoad } from 'storybook/internal/preview-api';\nimport { dedent } from 'ts-dedent';\nimport type { RenderResponseMessage, RenderPromise } from '../types/index.js';\n\n// Map of pending render requests\nconst pendingRequests = new Map<string, RenderPromise>();\n\n// Flag to track if we've initialized the WebSocket listeners\nlet isInitialized = false;\n\n/**\n * Initialize WebSocket listeners for render responses\n */\nfunction initialize() {\n  if (isInitialized) return;\n  isInitialized = true;\n  \n  // Listen for render responses from the server\n  if (import.meta.hot) {\n    import.meta.hot.on('astro:render:response', (data: RenderResponseMessage['data']) => {\n      const pending = pendingRequests.get(data.id);\n      if (pending) {\n        clearTimeout(pending.timeoutId);\n        pendingRequests.delete(data.id);\n        pending.resolve(data);\n      }\n    });\n    \n    // Listen for component updates (HMR)\n    import.meta.hot.on('astro:component:update', () => {\n      // Trigger re-render by sending a custom event\n      window.dispatchEvent(new CustomEvent('storybook-astro:hmr'));\n    });\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyArgs = Record<string, any>;\n\ninterface StoryContext {\n  id: string;\n  name: string;\n  title: string;\n  component?: unknown;\n  args: AnyArgs;\n}\n\ninterface RenderContextLike {\n  storyFn: () => unknown;\n  showMain: () => void;\n  showError: (error: { title: string; description: string }) => void;\n  forceRemount: boolean;\n  storyContext: StoryContext;\n}\n\n/**\n * Main render function - creates the story element\n * This is called by Storybook to get the renderable content\n */\nexport function render(_args: AnyArgs, context: StoryContext): unknown {\n  const { id, component } = context;\n  \n  if (!component) {\n    throw new Error(\n      `Unable to render story ${id} as the component annotation is missing from the default export`\n    );\n  }\n  \n  // If component is a string (raw HTML), return it directly\n  if (typeof component === 'string') {\n    return component;\n  }\n  \n  // If component is already an HTML element, clone it\n  if (component instanceof HTMLElement) {\n    return component.cloneNode(true) as HTMLElement;\n  }\n  \n  // Check if this is an Astro component (has the factory marker)\n  if (typeof component === 'function' && 'isAstroComponentFactory' in component) {\n    return component;\n  }\n  \n  // For other function components, try to render them\n  if (typeof component === 'function') {\n    return component;\n  }\n  \n  console.warn(dedent`\n    Storybook Astro renderer received an unexpected component type.\n    Received: ${typeof component}\n  `);\n  \n  return component;\n}\n\n/**\n * Render story to the canvas element\n * This is the main entry point called by Storybook\n */\nexport async function renderToCanvas(\n  ctx: RenderContextLike,\n  canvasElement: HTMLElement\n): Promise<void> {\n  initialize();\n  \n  const { storyFn, showMain, showError, forceRemount, storyContext } = ctx;\n  const { name, title } = storyContext;\n  \n  const element = storyFn();\n  \n  showMain();\n  \n  // Check if this is an Astro component\n  if (isAstroComponent(element)) {\n    await renderAstroComponent(element, storyContext, canvasElement);\n    return;\n  }\n  \n  // Handle string content\n  if (typeof element === 'string') {\n    canvasElement.innerHTML = element;\n    simulatePageLoad(canvasElement);\n    return;\n  }\n  \n  // Handle DOM nodes\n  if (element instanceof Node) {\n    if (canvasElement.firstChild === element && !forceRemount) {\n      return;\n    }\n    \n    canvasElement.innerHTML = '';\n    canvasElement.appendChild(element);\n    simulateDOMContentLoaded();\n    return;\n  }\n  \n  // Unknown element type\n  showError({\n    title: `Expecting an HTML snippet or DOM node from the story: \"${name}\" of \"${title}\".`,\n    description: dedent`\n      Did you forget to return the HTML snippet from the story?\n      Use \"() => <your snippet or node>\" or when defining the story.\n    `,\n  });\n}\n\n/**\n * Check if an element is an Astro component factory\n */\nfunction isAstroComponent(element: unknown): element is AstroComponentLike {\n  return (\n    element !== null &&\n    typeof element === 'function' &&\n    'isAstroComponentFactory' in element &&\n    (element as AstroComponentLike).isAstroComponentFactory === true\n  );\n}\n\ninterface AstroComponentLike {\n  isAstroComponentFactory: true;\n  moduleId?: string;\n}\n\n/**\n * Render an Astro component by sending a request to the server\n */\nasync function renderAstroComponent(\n  component: AstroComponentLike,\n  storyContext: StoryContext,\n  canvasElement: HTMLElement\n): Promise<void> {\n  const { args } = storyContext;\n  \n  // Get module ID from component\n  const moduleId = component.moduleId;\n  if (!moduleId) {\n    throw new Error('Astro component is missing moduleId. Make sure the component was imported correctly.');\n  }\n  \n  // Separate slots from regular args\n  const { slots = {}, ...props } = args as { slots?: Record<string, string>; [key: string]: unknown };\n  \n  try {\n    // Request render from server\n    const response = await sendRenderRequest({\n      component: moduleId,\n      args: props,\n      slots,\n    });\n    \n    // Update canvas with rendered HTML\n    canvasElement.innerHTML = response.html;\n    \n    // Execute any inline scripts\n    executeScripts(canvasElement);\n    \n    // Apply styles that may have been injected\n    applyDynamicStyles();\n    \n    // Simulate page load for any scripts that depend on it\n    simulatePageLoad(canvasElement);\n  } catch (error) {\n    const message = error instanceof Error ? error.message : 'Unknown error';\n    canvasElement.innerHTML = `\n      <div style=\"color: #dc2626; background: #fef2f2; padding: 16px; border-radius: 8px; font-family: system-ui;\">\n        <strong>Failed to render Astro component</strong>\n        <pre style=\"margin: 8px 0 0; white-space: pre-wrap;\">${escapeHtml(message)}</pre>\n      </div>\n    `;\n  }\n}\n\n/**\n * Send a render request to the server via WebSocket\n */\nasync function sendRenderRequest(data: {\n  component: string;\n  args?: Record<string, unknown>;\n  slots?: Record<string, string>;\n}): Promise<RenderResponseMessage['data']> {\n  const id = crypto.randomUUID();\n  const timeoutMs = 10000;\n  \n  return new Promise((resolve, reject) => {\n    const timeoutId = setTimeout(() => {\n      pendingRequests.delete(id);\n      reject(new Error(`Render request timed out after ${timeoutMs}ms`));\n    }, timeoutMs);\n    \n    pendingRequests.set(id, { resolve, reject, timeoutId });\n    \n    if (import.meta.hot) {\n      import.meta.hot.send('astro:render:request', { ...data, id });\n    } else {\n      clearTimeout(timeoutId);\n      pendingRequests.delete(id);\n      reject(new Error('HMR not available - cannot communicate with server'));\n    }\n  });\n}\n\n/**\n * Execute script tags that were rendered in the component\n */\nfunction executeScripts(container: HTMLElement): void {\n  const scripts = container.querySelectorAll('script');\n  \n  scripts.forEach((oldScript) => {\n    const newScript = document.createElement('script');\n    \n    // Copy attributes\n    Array.from(oldScript.attributes).forEach((attr) => {\n      newScript.setAttribute(attr.name, attr.value);\n    });\n    \n    // Copy content\n    newScript.textContent = oldScript.textContent;\n    \n    // Replace in DOM to execute\n    oldScript.parentNode?.replaceChild(newScript, oldScript);\n  });\n}\n\n/**\n * Apply any dynamic styles that were added via Vite\n */\nfunction applyDynamicStyles(): void {\n  // Find style tags that need to be processed\n  const styleTags = document.querySelectorAll('style[data-vite-dev-id]');\n  \n  styleTags.forEach((style) => {\n    const content = style.textContent || '';\n    \n    // Check if this style needs to be executed as a module\n    if (content.includes('__vite__updateStyle')) {\n      const script = document.createElement('script');\n      script.type = 'module';\n      script.textContent = content\n        .replace(/import\\.meta\\.hot\\.accept\\(/g, 'import.meta.hot?.accept(')\n        .replace(/import\\.meta\\.hot\\.prune\\(/g, 'import.meta.hot?.prune(');\n      \n      document.head.appendChild(script);\n      document.head.removeChild(script);\n    }\n  });\n}\n\n/**\n * Escape HTML special characters\n */\nfunction escapeHtml(text: string): string {\n  const div = document.createElement('div');\n  div.textContent = text;\n  return div.innerHTML;\n}\n","/**\n * Default decorators for Astro Storybook\n * \n * These decorators are automatically applied to all stories.\n */\n\n// Default decorators array (empty for now, can be extended)\nconst decorators: unknown[] = [];\n\nexport default decorators;\n","/**\n * Astro Storybook Renderer\n * \n * This module is the renderer entry point for Storybook.\n * It exports the render functions that Storybook uses to display components.\n */\n\n// Export render functions - required by Storybook\nexport { render, renderToCanvas } from './render.js';\n\n// Export parameters\nexport const parameters = {\n  renderer: 'astro',\n};\n\n// Export decorators\nexport { default as decorators } from './decorators.js';\n"]}

package/dist/sourceTransformer-CsgaPbY9.d.cts

@@ -0,0 +1,38 @@
+/**
+ * Source code transformer for Astro components in Storybook docs
+ *
+ * Transforms story args into proper Astro component syntax for display
+ * in the "Show code" panel.
+ */
+interface StoryContext {
+    id: string;
+    name: string;
+    title: string;
+    component?: {
+        displayName?: string;
+        name?: string;
+        __docgenInfo?: {
+            displayName?: string;
+        };
+    } & ((...args: unknown[]) => unknown);
+    args: Record<string, unknown>;
+    parameters?: {
+        docs?: {
+            source?: {
+                code?: string;
+                language?: string;
+                excludeDecorators?: boolean;
+            };
+        };
+    };
+}
+/**
+ * Transform story source code to Astro syntax
+ *
+ * @param code - The original source code (usually just args object)
+ * @param context - The story context with component and args info
+ * @returns Formatted Astro component code
+ */
+declare function transformSource(code: string, context: StoryContext): string;
+
+export { transformSource as t };

package/dist/sourceTransformer-CsgaPbY9.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Source code transformer for Astro components in Storybook docs
+ *
+ * Transforms story args into proper Astro component syntax for display
+ * in the "Show code" panel.
+ */
+interface StoryContext {
+    id: string;
+    name: string;
+    title: string;
+    component?: {
+        displayName?: string;
+        name?: string;
+        __docgenInfo?: {
+            displayName?: string;
+        };
+    } & ((...args: unknown[]) => unknown);
+    args: Record<string, unknown>;
+    parameters?: {
+        docs?: {
+            source?: {
+                code?: string;
+                language?: string;
+                excludeDecorators?: boolean;
+            };
+        };
+    };
+}
+/**
+ * Transform story source code to Astro syntax
+ *
+ * @param code - The original source code (usually just args object)
+ * @param context - The story context with component and args info
+ * @returns Formatted Astro component code
+ */
+declare function transformSource(code: string, context: StoryContext): string;
+
+export { transformSource as t };

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "storybook-astro",
+  "version": "0.1.0",
+  "description": "Storybook framework for Astro components - render .astro files directly in Storybook",
+  "keywords": [
+    "storybook",
+    "astro",
+    "astro-integration",
+    "storybook-framework",
+    "component-library",
+    "design-system"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Ryan Hughes",
+    "email": "ryan@heyoodle.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thinkoodle/storybook-astro"
+  },
+  "homepage": "https://github.com/thinkoodle/storybook-astro#readme",
+  "bugs": {
+    "url": "https://github.com/thinkoodle/storybook-astro/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "import": "./dist/preset.js",
+      "require": "./dist/preset.cjs"
+    },
+    "./renderer": {
+      "types": "./dist/renderer/index.d.ts",
+      "import": "./dist/renderer/index.js",
+      "require": "./dist/renderer/index.cjs"
+    },
+    "./renderer/entry-preview": {
+      "types": "./dist/renderer/entry-preview.d.ts",
+      "import": "./dist/renderer/entry-preview.js",
+      "require": "./dist/renderer/entry-preview.cjs"
+    },
+    "./renderer/entry-preview.mjs": {
+      "types": "./dist/renderer/entry-preview.d.ts",
+      "import": "./dist/renderer/entry-preview.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@storybook/builder-vite": "^8.4.0 || ^10.0.0",
+    "ts-dedent": "^2.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "astro": "^5.0.0",
+    "storybook": "^10.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^6.0.0"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0 || ^5.0.0",
+    "storybook": "^8.0.0 || ^10.0.0",
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "astro": {
+      "optional": false
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "storybook": {
+    "displayName": "Astro",
+    "icon": "https://raw.githubusercontent.com/withastro/astro/main/assets/brand/logo.svg",
+    "unsupportedFrameworks": []
+  }
+}