@aerogel/cli 0.0.0-next.444e75523f9ddc8b8de7cd36b333f476ef86a46c → 0.0.0-next.46a3020f90bb19fb98d8b9c75a7228de4fe76346

package/src/lib/utils/paths.ts

@@ -1,15 +1,23 @@
-import { resolve } from 'path';
+import { URL, fileURLToPath } from 'node:url';
 import { stringMatch } from '@noeldemartin/utils';
+import { resolve } from 'node:path';
 
-import File from '@/lib/File';
-import Log from '@/lib/Log';
+import File from '@aerogel/cli/lib/File';
+import Log from '@aerogel/cli/lib/Log';
 
 export function basePath(path: string = ''): string {
-    if (File.contains(resolve(__dirname, '../../../package.json'), '"name": "aerogel"')) {
-        return resolve(__dirname, '../', path);
+    if (
+        File.contains(
+            fileURLToPath(new URL(/* @vite-ignore */ '../../../package.json', import.meta.url)),
+            '"packages/create-aerogel"',
+        )
+    ) {
+        return resolve(fileURLToPath(new URL(/* @vite-ignore */ '../', import.meta.url)), path);
     }
 
-    const packageJson = File.read(resolve(__dirname, '../../../../package.json'));
+    const packageJson = File.read(
+        fileURLToPath(new URL(/* @vite-ignore */ '../../../../package.json', import.meta.url)),
+    );
     const matches = stringMatch<2>(packageJson ?? '', /"@aerogel\/core": "file:(.*)\/aerogel-core-[\d.]*\.tgz"/);
     const cliPath = matches?.[1] ?? Log.fail<string>('Could not determine base path');
 
@@ -30,5 +38,5 @@ export function packagePath(packageName: string): string {
 }
 
 export function templatePath(name: string): string {
-    return resolve(__dirname, `../templates/${name}`);
+    return fileURLToPath(new URL(/* @vite-ignore */ `../templates/${name}`, import.meta.url));
 }

package/src/plugins/Plugin.ts

@@ -1,13 +1,13 @@
 import { Node, SyntaxKind } from 'ts-morph';
 import type { ArrayLiteralExpression, ImportDeclarationStructure, OptionalKind, SourceFile } from 'ts-morph';
 
-import Log from '@/lib/Log';
-import Shell from '@/lib/Shell';
-import File from '@/lib/File';
-import { app, isLinkedLocalApp, isLocalApp } from '@/lib/utils/app';
-import { editFiles, findDescendant, when } from '@/lib/utils/edit';
-import { packNotFound, packagePackPath, packagePath } from '@/lib/utils/paths';
-import type { Editor } from '@/lib/Editor';
+import Log from '@aerogel/cli/lib/Log';
+import Shell from '@aerogel/cli/lib/Shell';
+import File from '@aerogel/cli/lib/File';
+import { app, isLinkedLocalApp, isLocalApp } from '@aerogel/cli/lib/utils/app';
+import { editFiles, findDescendant, when } from '@aerogel/cli/lib/utils/edit';
+import { packNotFound, packagePackPath, packagePath } from '@aerogel/cli/lib/utils/paths';
+import type { Editor } from '@aerogel/cli/lib/Editor';
 
 export default abstract class Plugin {
 
@@ -101,25 +101,6 @@ export default abstract class Plugin {
         });
     }
 
-    protected async updateTailwindConfig(editor: Editor, options: { content: string }): Promise<void> {
-        await Log.animate('Updating tailwind configuration', async () => {
-            const tailwindConfig = editor.requireSourceFile('tailwind.config.js');
-            const contentArray = this.getTailwindContentArray(tailwindConfig);
-
-            if (!contentArray) {
-                return Log.fail(`
-                    Could not find content array in tailwind config, please add the following manually:
-
-                    ${options.content}
-                `);
-            }
-
-            contentArray.addElement(options.content);
-
-            await editor.save(tailwindConfig);
-        });
-    }
-
     protected getBootstrapPluginsDeclaration(mainConfig: SourceFile): ArrayLiteralExpression | null {
         const bootstrapAppCall = findDescendant(mainConfig, {
             guard: Node.isCallExpression,

package/src/plugins/Solid.ts

@@ -1,10 +1,8 @@
-import File from '@/lib/File';
-import Log from '@/lib/Log';
-import Plugin from '@/plugins/Plugin';
-import Shell from '@/lib/Shell';
-import { isLinkedLocalApp } from '@/lib/utils/app';
-import { packagePath } from '@/lib/utils/paths';
-import type { Editor } from '@/lib/Editor';
+import File from '@aerogel/cli/lib/File';
+import Log from '@aerogel/cli/lib/Log';
+import Plugin from '@aerogel/cli/plugins/Plugin';
+import Shell from '@aerogel/cli/lib/Shell';
+import type { Editor } from '@aerogel/cli/lib/Editor';
 
 export class Solid extends Plugin {
 
@@ -12,21 +10,16 @@ export class Solid extends Plugin {
         super('solid');
     }
 
-    protected async updateFiles(editor: Editor): Promise<void> {
-        await this.updateTailwindConfig(editor, {
-            content: isLinkedLocalApp()
-                ? `'${packagePath('plugin-solid')}/dist/**/*.js'`
-                : '\'./node_modules/@aerogel/plugin-solid/dist/**/*.js\'',
-        });
-
+    protected override async updateFiles(editor: Editor): Promise<void> {
         await this.updateNpmScripts(editor);
         await this.updateGitIgnore();
         await super.updateFiles(editor);
     }
 
-    protected async installNpmDependencies(): Promise<void> {
+    protected override async installNpmDependencies(): Promise<void> {
         await Shell.run('npm install soukai-solid@next --save-exact');
-        await Shell.run('npm install @solid/community-server@7 --save');
+        await Shell.run('npm install @noeldemartin/solid-utils@next --save-exact');
+        await Shell.run('npm install @solid/community-server@7.1.6 --save-dev -E');
         await super.installNpmDependencies();
     }
 
@@ -50,17 +43,17 @@ export class Solid extends Plugin {
                 .replace(
                     '"cy:test": "start-server-and-test test:serve-app http-get://localhost:5001 cy:run",',
                     '"cy:test": "start-server-and-test ' +
-                        'test:serve-app http-get://localhost:5001 test:serve-pod http-get://localhost:4000 cy:run",',
+                        'test:serve-app http-get://localhost:5001 test:serve-pod http-get://localhost:3000 cy:run",',
                 )
                 .replace(
                     '"dev": "vite",',
                     '"dev": "vite",\n' +
-                        '"dev:serve-pod": "community-solid-server -c @css:config/file.json -p 4000 -f ./solid-data",',
+                        '"dev:serve-pod": "community-solid-server -c @css:config/file.json -f ./solid",',
                 )
                 .replace(
-                    '"test:serve-app": "vite --port 5001"',
-                    '"test:serve-app": "vite --port 5001",\n' +
-                        '"test:serve-pod": "community-solid-server -p 4000 -l warn"',
+                    '"test:serve-app": "vite --port 5001 --mode testing"',
+                    '"test:serve-app": "vite --port 5001 --mode testing",\n' +
+                        '"test:serve-pod": "community-solid-server -l warn"',
                 ),
         );
 
@@ -72,7 +65,7 @@ export class Solid extends Plugin {
 
         const gitignore = File.read('.gitignore') ?? '';
 
-        File.write('.gitignore', `${gitignore}/solid-data\n`);
+        File.write('.gitignore', `${gitignore}/solid\n`);
     }
 
 }

package/src/plugins/Soukai.ts

@@ -1,5 +1,5 @@
-import Plugin from '@/plugins/Plugin';
-import Shell from '@/lib/Shell';
+import Plugin from '@aerogel/cli/plugins/Plugin';
+import Shell from '@aerogel/cli/lib/Shell';
 
 export class Soukai extends Plugin {
 
@@ -7,12 +7,12 @@ export class Soukai extends Plugin {
         super('soukai');
     }
 
-    protected async installNpmDependencies(): Promise<void> {
+    protected override async installNpmDependencies(): Promise<void> {
         await Shell.run('npm install soukai@next --save-exact');
         await super.installNpmDependencies();
     }
 
-    protected getBootstrapConfig(): string {
+    protected override getBootstrapConfig(): string {
         return 'soukai({ models: import.meta.glob(\'@/models/*\', { eager: true }) })';
     }
 

package/src/testing/setup.ts

@@ -1,31 +1,36 @@
-import { beforeEach, vi } from 'vitest';
-import { resolve } from 'path';
-import { setTestingNamespace } from '@noeldemartin/utils';
-
-import File from '@/lib/File';
-import FileMock from '@/lib/File.mock';
-import Log from '@/lib/Log';
-import LogMock from '@/lib/Log.mock';
-import Shell from '@/lib/Shell';
-import ShellMock from '@/lib/Shell.mock';
-
-setTestingNamespace(vi);
-
-File.setMockInstance(FileMock);
-Log.setMockInstance(LogMock);
-Shell.setMockInstance(ShellMock);
+import { beforeAll, beforeEach, vi } from 'vitest';
+import { resolve } from 'node:path';
+import { setupFacadeMocks } from '@noeldemartin/testing';
+
+import ShellMock from '@aerogel/cli/lib/Shell.mock';
+import File from '@aerogel/cli/lib/File';
+import FileMock from '@aerogel/cli/lib/File.mock';
+import Log from '@aerogel/cli/lib/Log';
+import LogMock from '@aerogel/cli/lib/Log.mock';
+import Shell from '@aerogel/cli/lib/Shell';
+
+beforeAll(() => {
+    File.setMockFacade(FileMock);
+    Log.setMockFacade(LogMock);
+    Shell.setMockFacade(ShellMock);
+});
 
 beforeEach(() => {
-    FileMock.reset();
-    LogMock.reset();
-
     File.mock();
     Log.mock();
     Shell.mock();
 });
 
-vi.mock('@/lib/utils/app', async () => {
-    const original = (await vi.importActual('@/lib/utils/app')) as object;
+vi.mock('@noeldemartin/utils', async () => {
+    const original = (await vi.importActual('@noeldemartin/utils')) as object;
+
+    setupFacadeMocks();
+
+    return original;
+});
+
+vi.mock('@aerogel/cli/lib/utils/app', async () => {
+    const original = (await vi.importActual('@aerogel/cli/lib/utils/app')) as object;
 
     return {
         ...original,
@@ -34,8 +39,8 @@ vi.mock('@/lib/utils/app', async () => {
     };
 });
 
-vi.mock('@/lib/utils/edit', async () => {
-    const original = (await vi.importActual('@/lib/utils/edit')) as object;
+vi.mock('@aerogel/cli/lib/utils/edit', async () => {
+    const original = (await vi.importActual('@aerogel/cli/lib/utils/edit')) as object;
 
     return {
         ...original,
@@ -44,8 +49,8 @@ vi.mock('@/lib/utils/edit', async () => {
 });
 
 // TODO find out why these need to be mocked
-vi.mock('@/lib/utils/paths', async () => {
-    const original = (await vi.importActual('@/lib/utils/paths')) as object;
+vi.mock('@aerogel/cli/lib/utils/paths', async () => {
+    const original = (await vi.importActual('@aerogel/cli/lib/utils/paths')) as object;
 
     function basePath(path: string = '') {
         return resolve(__dirname, '../../', path);
@@ -66,9 +71,3 @@ vi.mock('@/lib/utils/paths', async () => {
         templatePath,
     };
 });
-
-vi.mock('mustache', async () => {
-    const mustache = (await vi.importActual('mustache')) as { default: unknown };
-
-    return mustache.default;
-});

package/templates/app/.github/workflows/ci.yml

@@ -6,8 +6,8 @@ jobs:
     ci:
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
               with:
                   node-version-file: '.nvmrc'
             - run: npm ci
@@ -16,13 +16,13 @@ jobs:
             - run: npm run test:ci
             - run: npm run cy:test-snapshots:ci
             - name: Upload Cypress screenshots
-              uses: actions/upload-artifact@v3
+              uses: actions/upload-artifact@v4
               if: ${{ failure() }}
               with:
                   name: cypress_screenshots
                   path: cypress/screenshots
             - name: Upload Cypress snapshots
-              uses: actions/upload-artifact@v3
+              uses: actions/upload-artifact@v4
               if: ${{ failure() }}
               with:
                   name: cypress_snapshots

package/templates/app/.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+v22.9.0

package/templates/app/.vscode/launch.json

@@ -3,6 +3,7 @@
     "configurations": [
         {
             "type": "node",
+            "runtimeVersion": "22.14.0",
             "request": "launch",
             "name": "Debug Current Test File",
             "autoAttachChildProcesses": true,

package/templates/app/cypress/cypress.config.ts

@@ -1,4 +1,4 @@
-import install from '@aerogel/cypress/dist/plugin';
+import { setupAerogelNodeEvents } from '@aerogel/cypress/config';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
@@ -9,8 +9,6 @@ export default defineConfig({
             runMode: 3,
             openMode: 0,
         },
-        setupNodeEvents(on) {
-            install(on);
-        },
+        setupNodeEvents: setupAerogelNodeEvents,
     },
 });

package/templates/app/cypress/support/e2e.ts

@@ -1,3 +1 @@
-import install from '@aerogel/cypress';
-
-install();
+import '@aerogel/cypress/support';

package/templates/app/cypress/tsconfig.json

@@ -1,12 +1,11 @@
 {
+    "extends": "@tsconfig/node22/tsconfig.json",
+    "include": ["**/*.ts"],
     "compilerOptions": {
-        "target": "es5",
-        "lib": ["es5", "dom"],
-        "types": ["cypress", "node"],
         "baseUrl": ".",
-        "paths": {
-            "@cy/*": ["./*"]
-        }
-    },
-    "include": ["**/*.ts"]
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "lib": ["DOM"],
+        "types": ["node", "cypress"]
+    }
 }

package/templates/app/index.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full w-full">
+<html lang="en" class="size-full">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{{ app.name }}</title>
         {{ socialMeta() }}
     </head>
-    <body class="h-full w-full text-base font-normal leading-tight text-gray-900 antialiased">
+    <body class="size-full text-base font-normal leading-tight text-gray-900 antialiased">
         <div id="app" class="loading h-full"></div>
         <script type="module" src="./src/main.ts"></script>
     </body>

package/templates/app/package.json

@@ -2,6 +2,7 @@
     "name": "<% app.slug %>",
     "version": "0.0.0",
     "private": true,
+    "type": "module",
     "scripts": {
         "build": "vite build",
         "cy:dev": "concurrently --kill-others \"npm run test:serve-app\" \"npm run cy:open\"",
@@ -11,23 +12,23 @@
         "cy:test-snapshots": "docker run -it -u `id -u ${whoami}` -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
         "cy:test-snapshots:ci": "docker run -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
         "dev": "vite",
-        "lint": "noeldemartin-lint src",
+        "lint": "noeldemartin-lint src cypress",
         "test": "vitest --run",
         "test:ci": "vitest --run --reporter verbose",
-        "test:serve-app": "vite --port 5001"
+        "test:serve-app": "vite --port 5001 --mode testing"
     },
     "dependencies": {
         "@aerogel/core": "<% &dependencies.aerogelCore %>",
         "@aerogel/plugin-i18n": "<% &dependencies.aerogelPluginI18n %>",
         "@aerogel/plugin-soukai": "<% &dependencies.aerogelPluginSoukai %>",
-        "@intlify/unplugin-vue-i18n": "^0.12.2",
+        "@intlify/unplugin-vue-i18n": "^6.0.5",
         "@noeldemartin/utils": "next",
-        "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/typography": "^0.5.9",
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
         "soukai": "next",
-        "tailwindcss": "^3.3.2",
-        "vue": "^3.3.0",
-        "vue-i18n": "9.3.0-beta.19"
+        "tailwindcss": "^4.1.1",
+        "vue": "^3.5.13",
+        "vue-i18n": "^11.1.2"
     },
     "devDependencies": {
         "@aerogel/cli": "<% &dependencies.aerogelCli %>",
@@ -37,20 +38,20 @@
         "@noeldemartin/eslint-config-vue": "next",
         "@noeldemartin/scripts": "next",
         "@total-typescript/ts-reset": "^0.4.2",
+        "@tsconfig/node22": "^22.0.1",
         "@types/node": "^20.3.1",
+        "@vue/tsconfig": "^0.7.0",
         "autoprefixer": "^10.4.14",
         "concurrently": "^8.2.0",
-        "cypress": "^12.17.0",
-        "eslint": "^8.40.0",
-        "prettier": "^2.8.8",
-        "prettier-eslint-cli": "^7.1.0",
-        "prettier-plugin-tailwindcss": "^0.2.8",
+        "cypress": "^14.2.0",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "start-server-and-test": "^2.0.0",
+        "typescript": "^5.8.2",
         "unplugin-icons": "^0.16.3",
         "unplugin-vue-components": "^0.24.1",
-        "vite": "^4.3.0",
-        "vitest": "^0.33.0",
-        "vue-tsc": "^1.8.15"
+        "vite": "^6.2.2",
+        "vitest": "^3.0.9",
+        "vue-tsc": "^2.2.8"
     },
     "eslintConfig": {
         "extends": [
@@ -58,9 +59,9 @@
         ]
     },
     "prettier": {
+        "printWidth": 120,
         "plugins": [
             "prettier-plugin-tailwindcss"
-        ],
-        "printWidth": 120
+        ]
     }
 }

package/templates/app/src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <AGAppLayout class="bg-blue-50">
-        <main class="flex flex-grow flex-col items-center justify-center">
+        <main class="flex grow flex-col items-center justify-center">
             <h1 class="text-4xl font-semibold">
                 {{ $t('home.title') }}
             </h1>

package/templates/app/src/assets/css/main.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@import '@aerogel/core';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';

package/templates/app/src/main.ts

@@ -2,12 +2,12 @@ import i18n from '@aerogel/plugin-i18n';
 import soukai from '@aerogel/plugin-soukai';
 import { bootstrap } from '@aerogel/core';
 
-import './assets/css/styles.css';
+import './assets/css/main.css';
 import App from './App.vue';
 
 bootstrap(App, {
     plugins: [
         i18n({ messages: import.meta.glob('@/lang/*.yaml') }),
-        soukai({ models: import.meta.glob('@/models/*', { eager: true }) }),
+        soukai({ models: import.meta.glob(['@/models/*', '!**/*.test.ts'], { eager: true }) }),
     ],
 });

package/templates/app/tsconfig.json

@@ -1,16 +1,9 @@
 {
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
     "compilerOptions": {
-        "target": "esnext",
-        "module": "esnext",
-        "moduleResolution": "node",
-        "strict": true,
-        "jsx": "preserve",
-        "noUncheckedIndexedAccess": true,
-        "skipLibCheck": true,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
-        "lib": ["esnext", "dom"],
         "baseUrl": ".",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
         "paths": {
             "@/*": ["./src/*"]
         }

package/templates/app/vite.config.ts

@@ -1,20 +1,22 @@
+import { URL, fileURLToPath } from 'node:url';
+
 import Aerogel, { AerogelResolver } from '@aerogel/vite';
 import Components from 'unplugin-vue-components/vite';
 import I18n from '@intlify/unplugin-vue-i18n/vite';
 import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
 import { defineConfig } from 'vitest/config';
-import { resolve } from 'path';
 
 export default defineConfig({
-    publicDir: resolve(__dirname, './src/assets/public/'),
+    build: { sourcemap: true },
+    publicDir: fileURLToPath(new URL('./src/assets/public/', import.meta.url)),
     plugins: [
         Aerogel({ name: '<% app.name %>' }),
         Components({
             dts: false,
             resolvers: [AerogelResolver(), IconsResolver()],
         }),
-        I18n({ include: resolve(__dirname, './src/lang/**/*.yaml') }),
+        I18n({ include: fileURLToPath(new URL('./src/lang/**/*.yaml', import.meta.url)) }),
         Icons({
             iconCustomizer(_, __, props) {
                 props['aria-hidden'] = 'true';
@@ -23,7 +25,7 @@ export default defineConfig({
     ],
     resolve: {
         alias: {
-            '@': resolve(__dirname, './src'),
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
         },
     },
 });

package/templates/component-button/[component.name].vue

@@ -1,7 +1,7 @@
 <template>
-    <AGHeadlessButton :class="variantClasses" :disabled="disabled">
+    <HeadlessButton :class="variantClasses" :disabled="disabled">
         <slot />
-    </AGHeadlessButton>
+    </HeadlessButton>
 </template>
 
 <script setup lang="ts">

package/templates/component-checkbox/[component.name].vue

@@ -0,0 +1,34 @@
+<template>
+    <AGHeadlessInput
+        ref="$input"
+        :name="name"
+        :class="className"
+        :label="label"
+    >
+        <AGHeadlessInputInput
+            v-bind="attrs"
+            type="checkbox"
+        />
+        <div v-if="$slots.default">
+            <AGHeadlessInputLabel>
+                <slot />
+            </AGHeadlessInputLabel>
+            <AGHeadlessInputError />
+        </div>
+    </AGHeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { AGHeadlessInputLabel, componentRef, stringProp, useInputAttrs } from '@aerogel/core';
+import type { IAGHeadlessInput } from '@aerogel/core';
+
+defineOptions({ inheritAttrs: false });
+defineProps({
+    name: stringProp(),
+    label: stringProp(),
+    inputClass: stringProp(''),
+});
+
+const $input = componentRef<IAGHeadlessInput>();
+const [attrs, className] = useInputAttrs();
+</script>

package/templates/component-checkbox-story/[component.name].story.vue

@@ -0,0 +1,63 @@
+<template>
+    <Story group="base" :layout="{ type: 'grid' }">
+        <Variant title="Playground">
+            <AGForm :form="form" class="m-1">
+                <<% component.name %> name="accept" :form="form">
+                    {{ label }}
+                </<% component.name %>>
+            </AGForm>
+
+            <template #controls>
+                <HstText v-model="label" title="Label" />
+            </template>
+        </Variant>
+
+        <Variant title="Default">
+            <<% component.name %> class="m-1">
+                Accept Terms & Conditions
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Hover">
+            <<% component.name %> class="m-1" input-class=":hover">
+                Accept Terms & Conditions
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Focus">
+            <<% component.name %> class="m-1" input-class=":focus :focus-visible">
+                Accept Terms & Conditions
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Error">
+            <AGForm :form="errorForm" class="m-1">
+                <<% component.name %> name="accept">
+                    Accept Terms & Conditions
+                </<% component.name %>>
+            </AGForm>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { requiredBooleanInput, useForm } from '@aerogel/core';
+import { ref } from 'vue';
+
+const form = useForm({ accept: requiredBooleanInput(true) });
+const errorForm = useForm({ accept: requiredBooleanInput() });
+const label = ref('Accept Terms & Conditions');
+
+form.submit();
+errorForm.submit();
+</script>
+
+<style>
+.story-<% component.slug %> {
+    grid-template-columns: repeat(2, 300px) !important;
+}
+
+.story-<% component.slug %> .variant-playground {
+    grid-column: 1 / -1;
+}
+</style>