@kokimoki/kit 1.8.0 → 1.8.2

package/README.md

@@ -15,7 +15,7 @@ Add the plugin to your `vite.config.ts`:
 ```typescript
 import { defineConfig } from "vite";
 import { kokimokiKitPlugin } from "@kokimoki/kit";
-import { z } from "@kokimoki/kit";
+import { z } from "@kokimoki/app";
 
 export default defineConfig({
   plugins: [

package/dist/api.js

@@ -4,7 +4,12 @@
  * Shared between @kokimoki/cli and @kokimoki/kit
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDeployUrl = exports.createBuild = exports.getConceptOrganization = exports.getOrganization = exports.createConcept = exports.DEFAULT_ENDPOINT = void 0;
+exports.DEFAULT_ENDPOINT = void 0;
+exports.createConcept = createConcept;
+exports.getOrganization = getOrganization;
+exports.getConceptOrganization = getConceptOrganization;
+exports.createBuild = createBuild;
+exports.getDeployUrl = getDeployUrl;
 exports.DEFAULT_ENDPOINT = "https://api.kokimoki.com";
 /**
  * Make a request to the Kokimoki API
@@ -34,7 +39,6 @@ async function createConcept(options, request) {
         body: JSON.stringify(request),
     });
 }
-exports.createConcept = createConcept;
 /**
  * Get organization details via the Kokimoki API
  * Used for authentication validation
@@ -42,7 +46,6 @@ exports.createConcept = createConcept;
 async function getOrganization(endpoint, apiKey) {
     return kokimokiApiRequest("/auth", { endpoint, apiKey }, { method: "GET" });
 }
-exports.getOrganization = getOrganization;
 /**
  * Get the organization that owns a concept (by concept ID)
  */
@@ -60,7 +63,6 @@ async function getConceptOrganization(endpoint, conceptId) {
     }
     return await res.json();
 }
-exports.getConceptOrganization = getConceptOrganization;
 /**
  * Create a new build via the Kokimoki API
  */
@@ -73,7 +75,6 @@ async function createBuild(options, request, cliVersion) {
         body: JSON.stringify(request),
     });
 }
-exports.createBuild = createBuild;
 /**
  * Get the deploy URL for a build
  */
@@ -92,4 +93,3 @@ async function getDeployUrl(endpoint, apiKey, buildId) {
     }
     return await res.json();
 }
-exports.getDeployUrl = getDeployUrl;

package/dist/credentials.js

@@ -7,7 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.writeCredentials = exports.readCredentials = exports.getCredentialsPath = void 0;
+exports.getCredentialsPath = getCredentialsPath;
+exports.readCredentials = readCredentials;
+exports.writeCredentials = writeCredentials;
 const promises_1 = __importDefault(require("fs/promises"));
 const os_1 = require("os");
 const path_1 = __importDefault(require("path"));
@@ -17,7 +19,6 @@ const path_1 = __importDefault(require("path"));
 function getCredentialsPath() {
     return path_1.default.join((0, os_1.homedir)(), ".kokimoki");
 }
-exports.getCredentialsPath = getCredentialsPath;
 /**
  * Read credentials from the ~/.kokimoki file
  */
@@ -34,7 +35,6 @@ async function readCredentials() {
         throw e;
     }
 }
-exports.readCredentials = readCredentials;
 /**
  * Write credentials to the ~/.kokimoki file
  */
@@ -42,4 +42,3 @@ async function writeCredentials(credentials) {
     const credentialsPath = getCredentialsPath();
     await promises_1.default.writeFile(credentialsPath, JSON.stringify(credentials, null, 2));
 }
-exports.writeCredentials = writeCredentials;

package/dist/dev-app.js

@@ -3,9 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOrCreateDevApp = exports.writeStoresHash = exports.readStoresHash = exports.computeStoresHash = exports.setDevAppTranslation = exports.setDevAppI18n = exports.deleteAppId = void 0;
-const crypto_1 = __importDefault(require("crypto"));
+exports.deleteAppId = deleteAppId;
+exports.setDevAppI18n = setDevAppI18n;
+exports.setDevAppTranslation = setDevAppTranslation;
+exports.computeStoresHash = computeStoresHash;
+exports.readStoresHash = readStoresHash;
+exports.writeStoresHash = writeStoresHash;
+exports.getOrCreateDevApp = getOrCreateDevApp;
 const bson_objectid_1 = __importDefault(require("bson-objectid"));
+const crypto_1 = __importDefault(require("crypto"));
 const promises_1 = __importDefault(require("fs/promises"));
 const path_1 = __importDefault(require("path"));
 const api_1 = require("./api");
@@ -102,7 +108,6 @@ async function deleteAppId() {
         }
     }
 }
-exports.deleteAppId = deleteAppId;
 /**
  * Set i18n metadata for a dev app
  */
@@ -121,7 +126,6 @@ async function setDevAppI18n(endpoint, apiKey, appId, i18nMeta) {
         throw new Error(`Failed to set dev app i18n: ${res.status} ${errorText}`);
     }
 }
-exports.setDevAppI18n = setDevAppI18n;
 /**
  * Set translations for a specific language and namespace in a dev app
  */
@@ -140,7 +144,6 @@ async function setDevAppTranslation(endpoint, apiKey, appId, lng, namespace, tra
         throw new Error(`Failed to set dev app translation: ${res.status} ${errorText}`);
     }
 }
-exports.setDevAppTranslation = setDevAppTranslation;
 /**
  * Compute a hash of the stores configuration
  */
@@ -148,7 +151,6 @@ function computeStoresHash(stores) {
     const content = JSON.stringify(stores ?? []);
     return crypto_1.default.createHash("sha256").update(content).digest("hex").slice(0, 16);
 }
-exports.computeStoresHash = computeStoresHash;
 /**
  * Read the stored stores hash from .kokimoki/stores-hash
  */
@@ -164,7 +166,6 @@ async function readStoresHash() {
         throw e;
     }
 }
-exports.readStoresHash = readStoresHash;
 /**
  * Write the stores hash to .kokimoki/stores-hash
  */
@@ -172,7 +173,6 @@ async function writeStoresHash(hash) {
     await ensureKokimokiDir();
     await promises_1.default.writeFile(path_1.default.join(KOKIMOKI_DIR, STORES_HASH_FILE), hash);
 }
-exports.writeStoresHash = writeStoresHash;
 /**
  * Get or create a dev app for local development.
  *
@@ -269,4 +269,3 @@ async function getOrCreateDevApp(config) {
         };
     }
 }
-exports.getOrCreateDevApp = getOrCreateDevApp;

package/dist/dev-frame/render-dev-frame.js

@@ -3,7 +3,7 @@
  * Renders the dev frame HTML page - a multi-window view for development
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderDevFrame = void 0;
+exports.renderDevFrame = renderDevFrame;
 const styles_1 = require("./styles");
 /**
  * Generate URL for a dev frame iframe
@@ -186,4 +186,3 @@ function renderDevFrame(config) {
 </body>
 </html>`;
 }
-exports.renderDevFrame = renderDevFrame;

package/dist/dev-i18n.js

@@ -3,7 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.syncI18nFile = exports.syncAllI18nToDevApp = exports.getI18nMeta = exports.loadI18nFromPath = void 0;
+exports.loadI18nFromPath = loadI18nFromPath;
+exports.getI18nMeta = getI18nMeta;
+exports.syncAllI18nToDevApp = syncAllI18nToDevApp;
+exports.syncI18nFile = syncI18nFile;
 const promises_1 = __importDefault(require("fs/promises"));
 const path_1 = __importDefault(require("path"));
 const dev_app_1 = require("./dev-app");
@@ -38,7 +41,6 @@ async function loadI18nFromPath(i18nPath) {
     }
     return resources;
 }
-exports.loadI18nFromPath = loadI18nFromPath;
 /**
  * Scan an i18n folder and return i18n metadata.
  * Expected structure: `{i18nPath}/{lng}/{namespace}.json`
@@ -92,7 +94,6 @@ async function getI18nMeta(i18nPath, primaryLng = "en") {
         languages,
     };
 }
-exports.getI18nMeta = getI18nMeta;
 /**
  * Sync primary language i18n files to the dev app build directory (initial sync).
  * Only uploads primaryLng since that's what AI translations use as source.
@@ -134,7 +135,6 @@ async function syncAllI18nToDevApp(devAppInfo, i18nResources, primaryLng = "en")
         console.warn(`[kokimoki-kit] Synced i18n: ${syncedFiles.join(", ")}`);
     }
 }
-exports.syncAllI18nToDevApp = syncAllI18nToDevApp;
 /**
  * Sync a single i18n file to the dev app build directory.
  * Only syncs if the file is for the primary language.
@@ -162,4 +162,3 @@ async function syncI18nFile(devAppInfo, i18nPath, changedFilePath, primaryLng =
         console.warn(`[kokimoki-kit] Failed to sync i18n ${lng}/${ns}:`, e instanceof Error ? e.message : e);
     }
 }
-exports.syncI18nFile = syncI18nFile;

package/dist/dev-overlays.js

@@ -3,7 +3,9 @@
  * Development overlay HTML templates for kokimoki-kit plugin
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderStoresChangedPage = exports.renderErrorPage = exports.renderLoadingPage = void 0;
+exports.renderLoadingPage = renderLoadingPage;
+exports.renderErrorPage = renderErrorPage;
+exports.renderStoresChangedPage = renderStoresChangedPage;
 const pageBaseStyles = `
   color: white;
   display: flex;
@@ -109,7 +111,6 @@ function renderLoadingPage() {
 </body>
 </html>`;
 }
-exports.renderLoadingPage = renderLoadingPage;
 /**
  * Generate error page HTML for dev app errors (full page)
  */
@@ -175,7 +176,6 @@ function renderErrorPage(error) {
 </body>
 </html>`;
 }
-exports.renderErrorPage = renderErrorPage;
 /**
  * Generate stores changed warning page HTML (full page, not overlay)
  */
@@ -298,4 +298,3 @@ function renderStoresChangedPage(canReset) {
 </body>
 </html>`;
 }
-exports.renderStoresChangedPage = renderStoresChangedPage;

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export * from "./dev-app";
 export * from "./dev-frame";
 export * from "./kokimoki-kit-plugin";
 export * from "./preprocess-style";
-export * from "./zod";
 export * from "./schemas/app-meta-schema";
 export * from "./api";
 export * from "./credentials";

package/dist/index.js

@@ -18,8 +18,6 @@ __exportStar(require("./dev-app"), exports);
 __exportStar(require("./dev-frame"), exports);
 __exportStar(require("./kokimoki-kit-plugin"), exports);
 __exportStar(require("./preprocess-style"), exports);
-// Re-export Zod utilities for schema definition
-__exportStar(require("./zod"), exports);
 // App Meta schema for built-in store
 __exportStar(require("./schemas/app-meta-schema"), exports);
 // Shared utilities (used by both kit and cli)

package/dist/kokimoki-kit-plugin.d.ts

@@ -28,6 +28,7 @@ export interface KokimokiKitConfig {
         pattern: string;
         schema: ZodType;
         local?: boolean;
+        isTransferable?: boolean;
     }[];
     /** API endpoint for kokimoki services. Defaults to https://api.kokimoki.com */
     endpoint?: string;

package/dist/kokimoki-kit-plugin.js

@@ -15,18 +15,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.kokimokiKitPlugin = exports.getI18nMeta = void 0;
+exports.getI18nMeta = void 0;
+exports.kokimokiKitPlugin = kokimokiKitPlugin;
 const promises_1 = __importDefault(require("fs/promises"));
 const node_html_parser_1 = require("node-html-parser");
 const path_1 = __importDefault(require("path"));
@@ -52,6 +63,7 @@ const BUILT_IN_APP_META_STORE = {
     pattern: app_meta_schema_1.APP_META_STORE_NAME,
     schema: app_meta_schema_1.appMetaStoreSchema,
     local: false,
+    isTransferable: true,
 };
 function kokimokiKitPlugin(config) {
     // Combine user stores with built-in stores
@@ -407,6 +419,7 @@ function kokimokiKitPlugin(config) {
                 pattern: store.pattern,
                 local: store.local,
                 schema: v4_1.z.toJSONSchema(store.schema),
+                isTransferable: store.isTransferable ?? false,
             }));
             this.emitFile({
                 type: "asset",
@@ -637,4 +650,3 @@ function kokimokiKitPlugin(config) {
         },
     };
 }
-exports.kokimokiKitPlugin = kokimokiKitPlugin;

package/dist/preprocess-style.js

@@ -3,7 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.preprocessStyle = exports.generatePalette = exports.generateA11yOnColor = exports.destringRgb = exports.handleStringColor = exports.calculateRatio = exports.getLuminance = exports.hexToTailwindRgbString = exports.revertReplaceForColorPickers = exports.rgbToHex = exports.hexToRgb = void 0;
+exports.hexToRgb = hexToRgb;
+exports.rgbToHex = rgbToHex;
+exports.revertReplaceForColorPickers = revertReplaceForColorPickers;
+exports.hexToTailwindRgbString = hexToTailwindRgbString;
+exports.getLuminance = getLuminance;
+exports.calculateRatio = calculateRatio;
+exports.handleStringColor = handleStringColor;
+exports.destringRgb = destringRgb;
+exports.generateA11yOnColor = generateA11yOnColor;
+exports.generatePalette = generatePalette;
+exports.preprocessStyle = preprocessStyle;
 const colorjs_io_1 = __importDefault(require("colorjs.io"));
 const colornames_1 = __importDefault(require("colornames"));
 // List of rgb tuple variable names (possibly temporary system to support color picker for these variables)
@@ -103,12 +113,10 @@ function hexToRgb(hex) {
         b: parseInt(b, 16),
     };
 }
-exports.hexToRgb = hexToRgb;
 function rgbToHex(r, g, b) {
     const toHex = (c) => `0${c.toString(16)}`.slice(-2);
     return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
-exports.rgbToHex = rgbToHex;
 // export function replaceForColorPickers(code: string) {
 //   return code.replace(
 //     /--([a-z0-9-]+):\s*(\d+)\s+(\d+)\s+(\d+);/gi,
@@ -145,7 +153,6 @@ function revertReplaceForColorPickers(code) {
         return match;
     });
 }
-exports.revertReplaceForColorPickers = revertReplaceForColorPickers;
 function lighten(hex, intensity) {
     const color = hexToRgb(`#${hex}`);
     if (!color)
@@ -172,7 +179,6 @@ function hexToTailwindRgbString(hex) {
     const [, r, g, b] = colorParts;
     return `${parseInt(r, 16)} ${parseInt(g, 16)} ${parseInt(b, 16)}`;
 }
-exports.hexToTailwindRgbString = hexToTailwindRgbString;
 function getLuminance(r, g, b) {
     const { _r, _g, _b } = typeof r === "object"
         ? { _r: r.r, _g: r.g, _b: r.b }
@@ -186,7 +192,6 @@ function getLuminance(r, g, b) {
     });
     return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
 }
-exports.getLuminance = getLuminance;
 function calculateRatio(luminance1, luminance2) {
     const lum1 = typeof luminance1 === "string"
         ? getLuminance(handleStringColor(luminance1))
@@ -200,7 +205,6 @@ function calculateRatio(luminance1, luminance2) {
         ? (lum2 + 0.05) / (lum1 + 0.05)
         : (lum1 + 0.05) / (lum2 + 0.05);
 }
-exports.calculateRatio = calculateRatio;
 function handleStringColor(colorString, returnType = "rgb") {
     // if it's a css variable
     if (colorString.includes("--")) {
@@ -224,7 +228,6 @@ function handleStringColor(colorString, returnType = "rgb") {
     }
     return colorString;
 }
-exports.handleStringColor = handleStringColor;
 function cssColorToHex(colorString) {
     if (colorString.includes("#"))
         return colorString;
@@ -251,13 +254,11 @@ function destringRgb(rgbString) {
         b: parseInt(rgb[3], 10),
     };
 }
-exports.destringRgb = destringRgb;
 function generateA11yOnColor(hex) {
     const black = calculateRatio(hex, "#000000");
     const white = calculateRatio(hex, "#FFFFFF");
     return black < white ? "0 0 0" : "255 255 255";
 }
-exports.generateA11yOnColor = generateA11yOnColor;
 function generatePalette(baseColor) {
     const hexValidation = new RegExp(/^#[0-9a-f]{6}$/i);
     if (!hexValidation.test(baseColor))
@@ -299,7 +300,6 @@ function generatePalette(baseColor) {
     });
     return response;
 }
-exports.generatePalette = generatePalette;
 function preprocessGfcThemeBlock(code) {
     // Generate map of defined css variables
     const cssVariableMap = {};
@@ -376,4 +376,3 @@ function preprocessStyle(code) {
         }
     });
 }
-exports.preprocessStyle = preprocessStyle;

package/dist/production-loading-screen.js

@@ -4,7 +4,8 @@
  * This screen is injected into production builds and removed when km:ready is received.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeExistingLoadingScreen = exports.loadingScreenElement = exports.loadingScreenScript = exports.loadingScreenStyles = void 0;
+exports.loadingScreenElement = exports.loadingScreenScript = exports.loadingScreenStyles = void 0;
+exports.removeExistingLoadingScreen = removeExistingLoadingScreen;
 /**
  * Loading screen styles
  */
@@ -120,4 +121,3 @@ function removeExistingLoadingScreen(html) {
         .replace(/<div[^>]*id=["']km-loading["'][^>]*>[\s\S]*?<\/div>/gi, "")
         .replace(/<style[^>]*id=["']km-loading-style["'][^>]*>[\s\S]*?<\/style>/gi, "");
 }
-exports.removeExistingLoadingScreen = removeExistingLoadingScreen;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const KOKIMOKI_KIT_VERSION = "1.8.0";
+export declare const KOKIMOKI_KIT_VERSION = "1.8.2";

package/dist/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KOKIMOKI_KIT_VERSION = void 0;
-exports.KOKIMOKI_KIT_VERSION = "1.8.0";
+exports.KOKIMOKI_KIT_VERSION = "1.8.2";

package/docs/kokimoki-kit.instructions.md

@@ -15,77 +15,94 @@ npm install @kokimoki/kit
 
 ## Plugin Configuration
 
-Add the plugin to your `vite.config.ts`:
+Create a `kokimoki.config.ts` file in your project root to define your Kokimoki Kit configuration:
 
 ```typescript
-import { defineConfig } from "vite";
-import { kokimokiKitPlugin } from "@kokimoki/kit";
-import { z } from "@kokimoki/kit";
+import { z } from "@kokimoki/app";
+
+export const kokimokiConfig: KokimokiKitConfig = {
+  // Required: Your concept ID from Kokimoki
+  conceptId: "your-concept-id",
+
+  // Required: Deploy configurations
+  deployCodes: [
+    {
+      name: "default",
+      description: "Default game mode",
+      clientContext: { mode: "standard" },
+    },
+    {
+      name: "tournament",
+      description: "Tournament mode with stricter rules",
+      clientContext: { mode: "tournament", maxPlayers: 100 },
+    },
+  ],
 
-export default defineConfig({
-  plugins: [
-    kokimokiKitPlugin({
-      // Required: Your concept ID from Kokimoki
-      conceptId: "your-concept-id",
-
-      // Required: Deploy configurations
-      deployCodes: [
-        {
-          name: "default",
-          description: "Default game mode",
-          clientContext: { mode: "standard" },
-        },
-        {
-          name: "tournament",
-          description: "Tournament mode with stricter rules",
-          clientContext: { mode: "tournament", maxPlayers: 100 },
-        },
-      ],
-
-      // Optional: Project config schema (validated in admin panel)
+  /**
+   * Store schemas for validation
+   * marking stores as transferable allows their content to be used
+   * when creating new apps based on this one.
+   *
+   * For example, game configuration can contain content and settings
+   * that can be reused when setting up a new game instance. Dynamic
+   * game state, on the other hand, should not be transferable.
+   */
+  stores: [
+    {
+      pattern: "config",
+      schema: z.object({
+        mode: z.enum(["standard", "tournament"]),
+        duration: z.number().min(1).describe("Game duration in minutes"),
+      }),
+      isTransferable: true, // This store content can be used to create a new app with the same content
+    },
+    {
+      pattern: "game",
+      schema: z.object({
+        status: z.enum(["waiting", "playing", "finished"]),
+        round: z.number(),
+      }),
+      isTransferable: false, // Dynamic game state should not be marked as transferable
+    },
+    {
+      pattern: "player-*",
       schema: z.object({
-        title: z.string(),
-        maxPlayers: z.number().min(2).max(100),
-        timeLimit: z.number().optional(),
+        name: z.string(),
+        score: z.number(),
       }),
+      local: true, // Local store (per-client)
+      isTransferable: false, // Local stores cannot be transferable
+    },
+  ],
 
-      // Optional: Store schemas for validation
-      stores: [
-        {
-          pattern: "game",
-          schema: z.object({
-            status: z.enum(["waiting", "playing", "finished"]),
-            round: z.number(),
-          }),
-        },
-        {
-          pattern: "player-*",
-          schema: z.object({
-            name: z.string(),
-            score: z.number(),
-          }),
-          local: true, // Local store (per-client)
-        },
-      ],
-
-      // Optional: i18n configuration
-      i18nPath: "./src/i18n",
-      i18nPrimaryLng: "en", // Source language for AI translations
-
-      // Optional: Custom API endpoint
-      endpoint: "https://api.kokimoki.com",
-      host: "y-wss.kokimoki.com",
-
-      // Optional: Dev view layout (see Dev Frame section)
-      devView: [
-        [{ label: "host", clientContext: { mode: "host" } }],
-        [
-          { label: "player1", clientContext: { mode: "player" } },
-          { label: "player2", clientContext: { mode: "player" } },
-        ],
-      ],
-    }),
+  // Optional: i18n configuration
+  i18nPath: "./src/i18n",
+  i18nPrimaryLng: "en", // Source language for AI translations
+
+  // Optional: Custom API endpoint
+  endpoint: "https://api.kokimoki.com",
+  host: "y-wss.kokimoki.com",
+
+  // Optional: Dev view layout (see Dev Frame section)
+  devView: [
+    [{ label: "host", clientContext: { mode: "host" } }],
+    [
+      { label: "player1", clientContext: { mode: "player" } },
+      { label: "player2", clientContext: { mode: "player" } },
+    ],
   ],
+};
+```
+
+Add the plugin to your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from "vite";
+import { kokimokiKitPlugin } from "@kokimoki/kit";
+import { kokimokiConfig } from "./kokimoki.config";
+
+export default defineConfig({
+  plugins: [kokimokiKitPlugin(kokimokiConfig)],
 });
 ```
 
@@ -100,17 +117,17 @@ export default defineConfig({
 
 ### Optional Options
 
-| Option                     | Type             | Description                                        |
-| -------------------------- | ---------------- | -------------------------------------------------- |
-| `schema`                   | `ZodType`        | Zod schema for project configuration               |
-| `stores`                   | `array`          | Store definitions with patterns and schemas        |
-| `i18nPath`                 | `string`         | Path to i18n folder (e.g., `./src/i18n`)           |
-| `i18nPrimaryLng`           | `string`         | Source language code (default: `"en"`)             |
-| `endpoint`                 | `string`         | API endpoint (default: `https://api.kokimoki.com`) |
-| `host`                     | `string`         | WebSocket host (default: `y-wss.kokimoki.com`)     |
-| `devView`                  | `array \| false` | Dev frame layout or `false` to disable             |
-| `defaultAppMeta`           | `object`         | Default meta tags for SEO and social sharing       |
-| `defaultProjectStylePath`  | `string`         | Path to default project style file                 |
+| Option                    | Type             | Description                                        |
+| ------------------------- | ---------------- | -------------------------------------------------- |
+| `schema`                  | `ZodType`        | Zod schema for project configuration               |
+| `stores`                  | `array`          | Store definitions with patterns and schemas        |
+| `i18nPath`                | `string`         | Path to i18n folder (e.g., `./src/i18n`)           |
+| `i18nPrimaryLng`          | `string`         | Source language code (default: `"en"`)             |
+| `endpoint`                | `string`         | API endpoint (default: `https://api.kokimoki.com`) |
+| `host`                    | `string`         | WebSocket host (default: `y-wss.kokimoki.com`)     |
+| `devView`                 | `array \| false` | Dev frame layout or `false` to disable             |
+| `defaultAppMeta`          | `object`         | Default meta tags for SEO and social sharing       |
+| `defaultProjectStylePath` | `string`         | Path to default project style file                 |
 
 ## App Meta
 
@@ -135,15 +152,15 @@ kokimokiKitPlugin({
 
 ### Fields
 
-| Field           | Description                                          |
-| --------------- | ---------------------------------------------------- |
-| `lang`          | HTML `lang` attribute (e.g., `"en"`, `"de"`)         |
-| `title`         | Document title (browser tab)                         |
-| `description`   | Meta description for SEO                             |
-| `ogTitle`       | Open Graph title (defaults to `title` if not set)    |
-| `ogDescription` | Open Graph description (defaults to `description`)   |
+| Field           | Description                                                   |
+| --------------- | ------------------------------------------------------------- |
+| `lang`          | HTML `lang` attribute (e.g., `"en"`, `"de"`)                  |
+| `title`         | Document title (browser tab)                                  |
+| `description`   | Meta description for SEO                                      |
+| `ogTitle`       | Open Graph title (defaults to `title` if not set)             |
+| `ogDescription` | Open Graph description (defaults to `description`)            |
 | `ogImage`       | Open Graph image URL (use relative path like `/og-image.png`) |
-| `favicon`       | Favicon URL (use relative path like `/favicon.png`)  |
+| `favicon`       | Favicon URL (use relative path like `/favicon.png`)           |
 
 ### Asset Path Resolution
 
@@ -218,6 +235,8 @@ kokimokiKitPlugin({
 Define schemas to validate store state during development:
 
 ```typescript
+import { z } from "@kokimoki/app";
+
 stores: [
   // Global store - shared across all clients
   {
@@ -295,19 +314,6 @@ kokimokiKitPlugin({
 - Changes are synced to the dev app in real-time
 - No need to restart the dev server
 
-## Zod Re-export
-
-The kit re-exports Zod for convenience:
-
-```typescript
-import { z } from "@kokimoki/kit";
-
-const mySchema = z.object({
-  name: z.string(),
-  count: z.number(),
-});
-```
-
 ## Project Files
 
 ### .kokimoki Directory

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kokimoki/kit",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,13 +12,17 @@
   "scripts": {
     "test": "ts-mocha  src/**/*.spec.ts --exit",
     "prebuild": "node -p \"'export const KOKIMOKI_KIT_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/version.ts",
-    "build": "tsc"
+    "build": "tsc",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
   },
   "author": "Loquiz OÜ",
   "license": "Apache-2.0",
   "devDependencies": {
+    "eslint-config": "*",
     "@types/colornames": "^1.1.4",
     "@types/expect": "^24.3.2",
+    "eslint": "^9.39.1",
     "mocha": "^11.1.0",
     "ts-mocha": "^10.0.0"
   },

package/dist/schema-builder.d.ts

@@ -1,110 +0,0 @@
-export interface FieldOptions {
-  label?: string;
-}
-export declare abstract class Field<T> {
-  readonly options: FieldOptions;
-  constructor(options: FieldOptions);
-  abstract get value(): T;
-  abstract get schema(): any;
-}
-export declare class BooleanField extends Field<boolean> {
-  value: boolean;
-  constructor(value: boolean, options?: FieldOptions);
-  get schema(): {
-    type: string;
-    default: boolean;
-  };
-}
-export declare class ConstField<T extends string> extends Field<
-  string extends T ? never : T
-> {
-  value: string extends T ? never : T;
-  constructor(value: string extends T ? never : T, options?: FieldOptions);
-  get schema(): {
-    const: string extends T ? never : T;
-  };
-}
-export declare class ImageField extends Field<string> {
-  value: string;
-  constructor(value: string, options?: FieldOptions);
-  get schema(): {
-    type: string;
-    default: string;
-  };
-}
-export declare class TextField extends Field<string> {
-  value: string;
-  constructor(value: string, options?: FieldOptions);
-  get schema(): {
-    type: string;
-    default: string;
-  };
-}
-export declare class EnumField<T extends Record<string, string>> extends Field<
-  keyof T
-> {
-  enumValues: T;
-  value: keyof T;
-  constructor(enumValues: T, value: keyof T, options?: FieldOptions);
-  get schema(): {
-    enum: string[];
-  };
-}
-export declare class IntegerField extends Field<number> {
-  value: number;
-  constructor(value: number, options?: FieldOptions);
-  get schema(): {
-    type: string;
-    default: number;
-  };
-}
-export declare class FloatField extends Field<number> {
-  value: number;
-  constructor(value: number, options?: FieldOptions);
-  get schema(): {
-    type: string;
-    default: number;
-  };
-}
-export declare class FormGroup<
-  T extends Record<string, Field<any>>,
-  O extends Record<string, Field<any>>,
-> extends Field<
-  {
-    [key in keyof T]: T[key]["value"];
-  } & Partial<{
-    [key in keyof O]: O[key]["value"];
-  }>
-> {
-  requiredFields: T;
-  optionalFields: O;
-  constructor(requiredFields: T, optionalFields?: O, options?: FieldOptions);
-  get value(): {
-    [key in keyof T]: T[key]["value"];
-  } & Partial<{
-    [key in keyof O]: O[key]["value"];
-  }>;
-  get schema(): {
-    type: string;
-    properties: any;
-    required: string[];
-  };
-}
-export declare class FormArray<T> extends Field<T[]> {
-  private factory;
-  value: Field<T>["value"][];
-  constructor(
-    factory: () => Field<T>,
-    value: Field<T>["value"][],
-    options?: FieldOptions,
-  );
-  get schema(): {
-    type: string;
-    items: any;
-    default: T[];
-  };
-}
-export declare class Form<
-  R extends Record<string, Field<any>>,
-  O extends Record<string, Field<any>>,
-> extends FormGroup<R, O> {}

package/dist/schema-builder.js

@@ -1,183 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Form =
-  exports.FormArray =
-  exports.FormGroup =
-  exports.FloatField =
-  exports.IntegerField =
-  exports.EnumField =
-  exports.TextField =
-  exports.ImageField =
-  exports.ConstField =
-  exports.BooleanField =
-  exports.Field =
-    void 0;
-const defaultFieldOptions = {};
-class Field {
-  options;
-  constructor(options) {
-    this.options = options;
-  }
-}
-exports.Field = Field;
-class BooleanField extends Field {
-  value;
-  constructor(value, options = defaultFieldOptions) {
-    super(options);
-    this.value = value;
-  }
-  get schema() {
-    return {
-      type: "boolean",
-      default: this.value,
-    };
-  }
-}
-exports.BooleanField = BooleanField;
-class ConstField extends Field {
-  value;
-  constructor(value, options = defaultFieldOptions) {
-    super(options);
-    this.value = value;
-  }
-  get schema() {
-    return {
-      const: this.value,
-    };
-  }
-}
-exports.ConstField = ConstField;
-class ImageField extends Field {
-  value;
-  constructor(value, options = defaultFieldOptions) {
-    super(options);
-    this.value = value;
-  }
-  get schema() {
-    return {
-      type: "string",
-      default: this.value,
-    };
-  }
-}
-exports.ImageField = ImageField;
-class TextField extends Field {
-  value;
-  constructor(value, options = defaultFieldOptions) {
-    super(options);
-    this.value = value;
-  }
-  get schema() {
-    return {
-      type: "string",
-      default: this.value,
-    };
-  }
-}
-exports.TextField = TextField;
-class EnumField extends Field {
-  enumValues;
-  value;
-  constructor(enumValues, value, options = defaultFieldOptions) {
-    super(options);
-    this.enumValues = enumValues;
-    this.value = value;
-  }
-  get schema() {
-    return {
-      enum: Object.keys(this.enumValues),
-    };
-  }
-}
-exports.EnumField = EnumField;
-class IntegerField extends Field {
-  value;
-  constructor(value, options = defaultFieldOptions) {
-    super(options);
-    this.value = value;
-  }
-  get schema() {
-    return {
-      type: "integer",
-      default: this.value,
-    };
-  }
-}
-exports.IntegerField = IntegerField;
-class FloatField extends Field {
-  value;
-  constructor(value, options = defaultFieldOptions) {
-    super(options);
-    this.value = value;
-  }
-  get schema() {
-    return {
-      type: "number",
-      default: this.value,
-    };
-  }
-}
-exports.FloatField = FloatField;
-class FormGroup extends Field {
-  requiredFields;
-  optionalFields;
-  constructor(
-    requiredFields,
-    optionalFields = {},
-    options = defaultFieldOptions,
-  ) {
-    super(options);
-    this.requiredFields = requiredFields;
-    this.optionalFields = optionalFields;
-  }
-  get value() {
-    const value = Object.entries(this.requiredFields).reduce(
-      (acc, [key, field]) => {
-        acc[key] = field.value;
-        return acc;
-      },
-      {},
-    );
-    Object.entries(this.optionalFields).forEach(([key, field]) => {
-      if (field.value !== undefined) {
-        value[key] = field.value;
-      }
-    });
-    return value;
-  }
-  get schema() {
-    const properties = {};
-    Object.entries(this.requiredFields).forEach(([key, field]) => {
-      properties[key] = field.schema;
-    });
-    Object.entries(this.optionalFields).forEach(([key, field]) => {
-      properties[key] = field.schema;
-    });
-    return {
-      type: "object",
-      properties,
-      required: Object.keys(this.requiredFields),
-    };
-  }
-}
-exports.FormGroup = FormGroup;
-class FormArray extends Field {
-  factory;
-  value;
-  constructor(factory, value, options = defaultFieldOptions) {
-    super(options);
-    this.factory = factory;
-    this.value = value;
-  }
-  get schema() {
-    const field = this.factory();
-    return {
-      type: "array",
-      items: field.schema,
-      default: this.value,
-    };
-  }
-}
-exports.FormArray = FormArray;
-class Form extends FormGroup {}
-exports.Form = Form;