@webstudio-is/react-sdk 0.5.1 → 0.7.0

package/lib/css/schema.d.ts

@@ -1,6 +1,66 @@
 import { z } from "zod";
-export declare const UnitSchema: z.ZodUnion<[z.ZodEnum<["ch", "cm", "deg", "dpcm", "dpi", "dppx", "em", "ex", "fr", "grad", "Hz", "in", "kHz", "mm", "ms", "pc", "pt", "px", "Q", "rad", "rem", "s", "turn", "vh", "vmax", "vmin", "vw", "x", "%"]>, z.ZodLiteral<"number">]>;
-export declare const StyleValueSchema: z.ZodUnion<[z.ZodObject<{
+import { StyleProperty } from "./types";
+export declare const Unit: z.ZodUnion<[z.ZodEnum<["ch", "cm", "deg", "dpcm", "dpi", "dppx", "em", "ex", "fr", "grad", "Hz", "in", "kHz", "mm", "ms", "pc", "pt", "px", "Q", "rad", "rem", "s", "turn", "vh", "vmax", "vmin", "vw", "x", "%"]>, z.ZodLiteral<"number">]>;
+export declare type Unit = z.infer<typeof Unit>;
+export declare const UnitValue: z.ZodObject<{
+    type: z.ZodLiteral<"unit">;
+    unit: z.ZodUnion<[z.ZodEnum<["ch", "cm", "deg", "dpcm", "dpi", "dppx", "em", "ex", "fr", "grad", "Hz", "in", "kHz", "mm", "ms", "pc", "pt", "px", "Q", "rad", "rem", "s", "turn", "vh", "vmax", "vmin", "vw", "x", "%"]>, z.ZodLiteral<"number">]>;
+    value: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    unit: "number" | "px" | "%" | "ch" | "cm" | "deg" | "dpcm" | "dpi" | "dppx" | "em" | "ex" | "fr" | "grad" | "Hz" | "in" | "kHz" | "mm" | "ms" | "pc" | "pt" | "Q" | "rad" | "rem" | "s" | "turn" | "vh" | "vmax" | "vmin" | "vw" | "x";
+    value: number;
+    type: "unit";
+}, {
+    unit: "number" | "px" | "%" | "ch" | "cm" | "deg" | "dpcm" | "dpi" | "dppx" | "em" | "ex" | "fr" | "grad" | "Hz" | "in" | "kHz" | "mm" | "ms" | "pc" | "pt" | "Q" | "rad" | "rem" | "s" | "turn" | "vh" | "vmax" | "vmin" | "vw" | "x";
+    value: number;
+    type: "unit";
+}>;
+export declare type UnitValue = z.infer<typeof UnitValue>;
+export declare const KeywordValue: z.ZodObject<{
+    type: z.ZodLiteral<"keyword">;
+    value: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    value: string;
+    type: "keyword";
+}, {
+    value: string;
+    type: "keyword";
+}>;
+export declare type KeywordValue = z.infer<typeof KeywordValue>;
+export declare const FontFamilyValue: z.ZodObject<{
+    type: z.ZodLiteral<"fontFamily">;
+    value: z.ZodArray<z.ZodString, "many">;
+}, "strip", z.ZodTypeAny, {
+    value: string[];
+    type: "fontFamily";
+}, {
+    value: string[];
+    type: "fontFamily";
+}>;
+export declare type FontFamilyValue = z.infer<typeof FontFamilyValue>;
+export declare const InvalidValue: z.ZodObject<{
+    type: z.ZodLiteral<"invalid">;
+    value: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    value: string;
+    type: "invalid";
+}, {
+    value: string;
+    type: "invalid";
+}>;
+export declare type InvalidValue = z.infer<typeof InvalidValue>;
+export declare const UnsetValue: z.ZodObject<{
+    type: z.ZodLiteral<"unset">;
+    value: z.ZodLiteral<"">;
+}, "strip", z.ZodTypeAny, {
+    value: "";
+    type: "unset";
+}, {
+    value: "";
+    type: "unset";
+}>;
+export declare type UnsetValue = z.infer<typeof UnsetValue>;
+export declare const StyleValue: z.ZodUnion<[z.ZodObject<{
     type: z.ZodLiteral<"unit">;
     unit: z.ZodUnion<[z.ZodEnum<["ch", "cm", "deg", "dpcm", "dpi", "dppx", "em", "ex", "fr", "grad", "Hz", "in", "kHz", "mm", "ms", "pc", "pt", "px", "Q", "rad", "rem", "s", "turn", "vh", "vmax", "vmin", "vw", "x", "%"]>, z.ZodLiteral<"number">]>;
     value: z.ZodNumber;
@@ -30,8 +90,27 @@ export declare const StyleValueSchema: z.ZodUnion<[z.ZodObject<{
 }, {
     value: string;
     type: "invalid";
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"unset">;
+    value: z.ZodLiteral<"">;
+}, "strip", z.ZodTypeAny, {
+    value: "";
+    type: "unset";
+}, {
+    value: "";
+    type: "unset";
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"fontFamily">;
+    value: z.ZodArray<z.ZodString, "many">;
+}, "strip", z.ZodTypeAny, {
+    value: string[];
+    type: "fontFamily";
+}, {
+    value: string[];
+    type: "fontFamily";
 }>]>;
-export declare const StyleSchema: z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodObject<{
+export declare type StyleValue = z.infer<typeof StyleValue>;
+export declare const Style: z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodObject<{
     type: z.ZodLiteral<"unit">;
     unit: z.ZodUnion<[z.ZodEnum<["ch", "cm", "deg", "dpcm", "dpi", "dppx", "em", "ex", "fr", "grad", "Hz", "in", "kHz", "mm", "ms", "pc", "pt", "px", "Q", "rad", "rem", "s", "turn", "vh", "vmax", "vmin", "vw", "x", "%"]>, z.ZodLiteral<"number">]>;
     value: z.ZodNumber;
@@ -61,8 +140,29 @@ export declare const StyleSchema: z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodObje
 }, {
     value: string;
     type: "invalid";
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"unset">;
+    value: z.ZodLiteral<"">;
+}, "strip", z.ZodTypeAny, {
+    value: "";
+    type: "unset";
+}, {
+    value: "";
+    type: "unset";
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"fontFamily">;
+    value: z.ZodArray<z.ZodString, "many">;
+}, "strip", z.ZodTypeAny, {
+    value: string[];
+    type: "fontFamily";
+}, {
+    value: string[];
+    type: "fontFamily";
 }>]>>;
-export declare const CssRuleSchema: z.ZodObject<{
+export declare type Style = {
+    [property in StyleProperty]?: StyleValue;
+};
+export declare const CssRule: z.ZodObject<{
     style: z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodObject<{
         type: z.ZodLiteral<"unit">;
         unit: z.ZodUnion<[z.ZodEnum<["ch", "cm", "deg", "dpcm", "dpi", "dppx", "em", "ex", "fr", "grad", "Hz", "in", "kHz", "mm", "ms", "pc", "pt", "px", "Q", "rad", "rem", "s", "turn", "vh", "vmax", "vmin", "vw", "x", "%"]>, z.ZodLiteral<"number">]>;
@@ -93,6 +193,24 @@ export declare const CssRuleSchema: z.ZodObject<{
     }, {
         value: string;
         type: "invalid";
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"unset">;
+        value: z.ZodLiteral<"">;
+    }, "strip", z.ZodTypeAny, {
+        value: "";
+        type: "unset";
+    }, {
+        value: "";
+        type: "unset";
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"fontFamily">;
+        value: z.ZodArray<z.ZodString, "many">;
+    }, "strip", z.ZodTypeAny, {
+        value: string[];
+        type: "fontFamily";
+    }, {
+        value: string[];
+        type: "fontFamily";
     }>]>>;
     breakpoint: z.ZodString;
 }, "strip", z.ZodTypeAny, {
@@ -103,9 +221,15 @@ export declare const CssRuleSchema: z.ZodObject<{
     } | {
         value: string;
         type: "keyword";
+    } | {
+        value: string[];
+        type: "fontFamily";
     } | {
         value: string;
         type: "invalid";
+    } | {
+        value: "";
+        type: "unset";
     }>;
     breakpoint: string;
 }, {
@@ -116,36 +240,44 @@ export declare const CssRuleSchema: z.ZodObject<{
     } | {
         value: string;
         type: "keyword";
+    } | {
+        value: string[];
+        type: "fontFamily";
     } | {
         value: string;
         type: "invalid";
+    } | {
+        value: "";
+        type: "unset";
     }>;
     breakpoint: string;
 }>;
-export declare const BreakpointSchema: z.ZodObject<{
+export declare type CssRule = z.infer<typeof CssRule>;
+export declare const Breakpoint: z.ZodObject<{
     id: z.ZodString;
     label: z.ZodString;
     minWidth: z.ZodNumber;
 }, "strip", z.ZodTypeAny, {
+    minWidth: number;
     id: string;
     label: string;
-    minWidth: number;
 }, {
+    minWidth: number;
     id: string;
     label: string;
-    minWidth: number;
 }>;
-export declare const BreakpointsSchema: z.ZodArray<z.ZodObject<{
+export declare const Breakpoints: z.ZodArray<z.ZodObject<{
     id: z.ZodString;
     label: z.ZodString;
     minWidth: z.ZodNumber;
 }, "strip", z.ZodTypeAny, {
+    minWidth: number;
     id: string;
     label: string;
-    minWidth: number;
 }, {
+    minWidth: number;
     id: string;
     label: string;
-    minWidth: number;
 }>, "many">;
+export declare type Breakpoint = z.infer<typeof Breakpoint>;
 //# sourceMappingURL=schema.d.ts.map

package/lib/css/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/css/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,eAAO,MAAM,UAAU,8OAAgD,CAAC;AAqBxE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAI3B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAAyC,CAAC;AAElE,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGxB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;EAI3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;WAA4B,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/css/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,IAAI,8OAAgD,CAAC;AAElE,oBAAY,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC;AAExC,eAAO,MAAM,SAAS;;;;;;;;;;;;EAIpB,CAAC;AAEH,oBAAY,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC,CAAC;AAElD,eAAO,MAAM,YAAY;;;;;;;;;EAIvB,CAAC;AACH,oBAAY,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAExD,eAAO,MAAM,eAAe;;;;;;;;;EAG1B,CAAC;AACH,oBAAY,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC;AAI9D,eAAO,MAAM,YAAY;;;;;;;;;EAGvB,CAAC;AACH,oBAAY,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAExD,eAAO,MAAM,UAAU;;;;;;;;;EAGrB,CAAC;AACH,oBAAY,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC;AAEpD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMrB,CAAC;AAEH,oBAAY,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC;AAEpD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAAmC,CAAC;AAEtD,oBAAY,KAAK,GAAG;KACjB,QAAQ,IAAI,aAAa,CAAC,CAAC,EAAE,UAAU;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGlB,CAAC;AAEH,oBAAY,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,OAAO,CAAC,CAAC;AAE9C,eAAO,MAAM,UAAU;;;;;;;;;;;;EAIrB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;WAAsB,CAAC;AAE/C,oBAAY,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC"}

package/lib/css/schema.js

@@ -1,38 +1,48 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BreakpointsSchema = exports.BreakpointSchema = exports.CssRuleSchema = exports.StyleSchema = exports.StyleValueSchema = exports.UnitSchema = void 0;
+exports.Breakpoints = exports.Breakpoint = exports.CssRule = exports.Style = exports.StyleValue = exports.UnsetValue = exports.InvalidValue = exports.FontFamilyValue = exports.KeywordValue = exports.UnitValue = exports.Unit = void 0;
 const zod_1 = require("zod");
 const units_1 = require("./units");
-exports.UnitSchema = zod_1.z.union([zod_1.z.enum(units_1.units), zod_1.z.literal("number")]);
-const UnitValueSchema = zod_1.z.object({
+exports.Unit = zod_1.z.union([zod_1.z.enum(units_1.units), zod_1.z.literal("number")]);
+exports.UnitValue = zod_1.z.object({
     type: zod_1.z.literal("unit"),
-    unit: exports.UnitSchema,
+    unit: exports.Unit,
     value: zod_1.z.number(),
 });
-const KeywordValueSchema = zod_1.z.object({
+exports.KeywordValue = zod_1.z.object({
     type: zod_1.z.literal("keyword"),
     // @todo use exact type
     value: zod_1.z.string(),
 });
+exports.FontFamilyValue = zod_1.z.object({
+    type: zod_1.z.literal("fontFamily"),
+    value: zod_1.z.array(zod_1.z.string()),
+});
 // We want to be able to render the invalid value
 // and show it is invalid visually, without saving it to the db
-const InvalidValueSchema = zod_1.z.object({
+exports.InvalidValue = zod_1.z.object({
     type: zod_1.z.literal("invalid"),
     value: zod_1.z.string(),
 });
-exports.StyleValueSchema = zod_1.z.union([
-    UnitValueSchema,
-    KeywordValueSchema,
-    InvalidValueSchema,
+exports.UnsetValue = zod_1.z.object({
+    type: zod_1.z.literal("unset"),
+    value: zod_1.z.literal(""),
+});
+exports.StyleValue = zod_1.z.union([
+    exports.UnitValue,
+    exports.KeywordValue,
+    exports.InvalidValue,
+    exports.UnsetValue,
+    exports.FontFamilyValue,
 ]);
-exports.StyleSchema = zod_1.z.record(zod_1.z.string(), exports.StyleValueSchema);
-exports.CssRuleSchema = zod_1.z.object({
-    style: exports.StyleSchema,
+exports.Style = zod_1.z.record(zod_1.z.string(), exports.StyleValue);
+exports.CssRule = zod_1.z.object({
+    style: exports.Style,
     breakpoint: zod_1.z.string(),
 });
-exports.BreakpointSchema = zod_1.z.object({
+exports.Breakpoint = zod_1.z.object({
     id: zod_1.z.string(),
     label: zod_1.z.string(),
     minWidth: zod_1.z.number(),
 });
-exports.BreakpointsSchema = zod_1.z.array(exports.BreakpointSchema);
+exports.Breakpoints = zod_1.z.array(exports.Breakpoint);

package/lib/css/types.d.ts

@@ -1,15 +1,6 @@
-import { z } from "zod";
 import { properties } from "./properties";
-import { BreakpointSchema, CssRuleSchema, StyleValueSchema, UnitSchema } from "./schema";
 declare type Properties = typeof properties;
 export declare type StyleProperty = keyof Properties;
 export declare type AppliesTo = Properties[StyleProperty]["appliesTo"];
-export declare type Style = {
-    [property in StyleProperty]?: StyleValue;
-};
-export declare type CssRule = z.infer<typeof CssRuleSchema>;
-export declare type Unit = z.infer<typeof UnitSchema>;
-export declare type StyleValue = z.infer<typeof StyleValueSchema>;
-export declare type Breakpoint = z.infer<typeof BreakpointSchema>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/css/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/css/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,UAAU,EACX,MAAM,UAAU,CAAC;AAElB,aAAK,UAAU,GAAG,OAAO,UAAU,CAAC;AAEpC,oBAAY,aAAa,GAAG,MAAM,UAAU,CAAC;AAE7C,oBAAY,SAAS,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,CAAC;AAE/D,oBAAY,KAAK,GAAG;KACjB,QAAQ,IAAI,aAAa,CAAC,CAAC,EAAE,UAAU;CACzC,CAAC;AAEF,oBAAY,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,aAAa,CAAC,CAAC;AAEpD,oBAAY,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC;AAE9C,oBAAY,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE1D,oBAAY,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/css/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,aAAK,UAAU,GAAG,OAAO,UAAU,CAAC;AAEpC,oBAAY,aAAa,GAAG,MAAM,UAAU,CAAC;AAE7C,oBAAY,SAAS,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,CAAC"}

package/lib/css/units.js

@@ -31,5 +31,5 @@ exports.units = [
     "vmin",
     "vw",
     "x",
-    "%"
+    "%",
 ];

package/lib/db/instance.d.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import * as components from "../components";
-import { type CssRule } from "../css";
+import { CssRule } from "../css";
 export declare type BaseInstance = {
     id: string;
     component: keyof typeof components;
@@ -10,5 +10,5 @@ export declare type Instance = BaseInstance & {
     children: Array<Instance | string>;
 };
 export declare const toBaseInstance: (instance: Instance) => BaseInstance;
-export declare const InstanceSchema: z.ZodType<Instance, z.ZodTypeDef, Instance>;
+export declare const Instance: z.ZodType<Instance, z.ZodTypeDef, Instance>;
 //# sourceMappingURL=instance.d.ts.map

package/lib/db/instance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"instance.d.ts","sourceRoot":"","sources":["../../src/db/instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,UAAU,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAIrD,oBAAY,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,OAAO,UAAU,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CAC1B,CAAC;AAEF,oBAAY,QAAQ,GAAG,YAAY,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,aAAc,QAAQ,KAAG,YAMnD,CAAC;AAEF,eAAO,MAAM,cAAc,6CASH,CAAC"}
+{"version":3,"file":"instance.d.ts","sourceRoot":"","sources":["../../src/db/instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,UAAU,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIjC,oBAAY,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,OAAO,UAAU,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CAC1B,CAAC;AAEF,oBAAY,QAAQ,GAAG,YAAY,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,aAAc,QAAQ,KAAG,YAMnD,CAAC;AAEF,eAAO,MAAM,QAAQ,6CASG,CAAC"}

package/lib/db/instance.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InstanceSchema = exports.toBaseInstance = void 0;
+exports.Instance = exports.toBaseInstance = void 0;
 const zod_1 = require("zod");
 const css_1 = require("../css");
 const toBaseInstance = (instance) => {
@@ -11,11 +11,11 @@ const toBaseInstance = (instance) => {
     };
 };
 exports.toBaseInstance = toBaseInstance;
-exports.InstanceSchema = zod_1.z.lazy(() => zod_1.z.object({
+exports.Instance = zod_1.z.lazy(() => zod_1.z.object({
     id: zod_1.z.string(),
     component: zod_1.z.string(),
-    children: zod_1.z.array(zod_1.z.union([exports.InstanceSchema, zod_1.z.string()])),
-    cssRules: zod_1.z.array(css_1.CssRuleSchema),
+    children: zod_1.z.array(zod_1.z.union([exports.Instance, zod_1.z.string()])),
+    cssRules: zod_1.z.array(css_1.CssRule),
 })
 // @todo can't figure out how to make component to be z.enum(Object.keys(components))
 );

package/lib/index.d.ts

@@ -6,4 +6,5 @@ export * as componentsMeta from "./components/meta";
 export * from "./user-props";
 export * from "./pubsub";
 export * from "./db";
+export * from "./remix";
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,cAAc,MAAM,mBAAmB,CAAC;AACpD,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,cAAc,MAAM,mBAAmB,CAAC;AACpD,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -35,3 +35,4 @@ exports.componentsMeta = __importStar(require("./components/meta"));
 __exportStar(require("./user-props"), exports);
 __exportStar(require("./pubsub"), exports);
 __exportStar(require("./db"), exports);
+__exportStar(require("./remix"), exports);

package/lib/pubsub/create.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare const createPubsub: <PublishMap>() => {
+    /**
+     * To publish a postMessage event on the current window and parent window from the iframe.
+     */
+    publish<Type extends keyof PublishMap>(action: undefined extends PublishMap[Type] ? {
+        type: Type;
+        payload?: PublishMap[Type] | undefined;
+    } : {
+        type: Type;
+        payload: PublishMap[Type];
+    }): void;
+    /**
+     * To publish a postMessage event on the iframe and parent window from the parent window.
+     */
+    usePublish(): readonly [<Type_1 extends keyof PublishMap>(action: undefined extends PublishMap[Type_1] ? {
+        type: Type_1;
+        payload?: PublishMap[Type_1] | undefined;
+    } : {
+        type: Type_1;
+        payload: PublishMap[Type_1];
+    }) => void, import("react").MutableRefObject<HTMLIFrameElement | null>];
+    /**
+     * To subscribe a message event on the current window.
+     */
+    useSubscribe<Type_2 extends keyof PublishMap>(type: Type_2, onAction: (payload: PublishMap[Type_2]) => void): void;
+};
+//# sourceMappingURL=create.d.ts.map

package/lib/pubsub/create.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/pubsub/create.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;IA0BrB;;OAEG;;;;;;;;IAMH;;OAEG;;;;;;;;IAeH;;OAEG;2GAGwC,IAAI;CAUlD,CAAC"}

package/lib/pubsub/create.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPubsub = void 0;
+const mitt_1 = __importDefault(require("mitt"));
+const react_1 = require("react");
+const createPubsub = () => {
+    // `mitt` has a somewhat annoying overload for `*` type that makes it hard to wrap in a generic context
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const emitter = (0, mitt_1.default)();
+    if (typeof window === "object") {
+        window.addEventListener("message", (event) => {
+            // @todo this has no type safety built in, could be anything from any source.
+            // we could potentially maintain a list of valid event types at runtime
+            // at the very least we could add a brand property or something to our events
+            if (typeof event.data?.type === "string") {
+                emitter.emit(event.data.type, event.data.payload);
+            }
+        }, false);
+    }
+    return {
+        /**
+         * To publish a postMessage event on the current window and parent window from the iframe.
+         */
+        publish(action) {
+            window.parent.postMessage(action, "*");
+            window.postMessage(action, "*");
+        },
+        /**
+         * To publish a postMessage event on the iframe and parent window from the parent window.
+         */
+        usePublish() {
+            const iframeRef = (0, react_1.useRef)(null);
+            const publishCallback = (0, react_1.useCallback)((action) => {
+                const element = iframeRef.current;
+                if (element?.contentWindow == null)
+                    return;
+                element.contentWindow.postMessage(action, "*");
+                window.postMessage(action, "*");
+            }, [iframeRef]);
+            return [publishCallback, iframeRef];
+        },
+        /**
+         * To subscribe a message event on the current window.
+         */
+        useSubscribe(type, onAction) {
+            (0, react_1.useEffect)(() => {
+                emitter.on(type, onAction);
+                return () => {
+                    emitter.off(type, onAction);
+                };
+            }, [type, onAction]);
+        },
+    };
+};
+exports.createPubsub = createPubsub;

package/lib/pubsub/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./publish";
-export * from "./subscribe";
+export * from "./create";
 //# sourceMappingURL=index.d.ts.map

package/lib/pubsub/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pubsub/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pubsub/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/lib/pubsub/index.js

@@ -14,5 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./publish"), exports);
-__exportStar(require("./subscribe"), exports);
+__exportStar(require("./create"), exports);

package/lib/remix/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const CRITICAL_CSS_MARKER = "__CRITICAL_CSS__";
+//# sourceMappingURL=constants.d.ts.map

package/lib/remix/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/remix/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,qBAAqB,CAAC"}

package/lib/remix/constants.js

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

package/lib/remix/handle-request.server.d.ts

@@ -0,0 +1,3 @@
+import type { EntryContext } from "@remix-run/node";
+export declare const handleRequest: (request: Request, responseStatusCode: number, responseHeaders: Headers, remixContext: EntryContext) => Response;
+//# sourceMappingURL=handle-request.server.d.ts.map

package/lib/remix/handle-request.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle-request.server.d.ts","sourceRoot":"","sources":["../../src/remix/handle-request.server.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,eAAO,MAAM,aAAa,YACf,OAAO,sBACI,MAAM,mBACT,OAAO,gBACV,YAAY,aAY3B,CAAC"}

package/lib/remix/handle-request.server.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRequest = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const react_1 = require("@remix-run/react");
+const insert_critical_css_1 = require("./insert-critical-css");
+const handleRequest = (request, responseStatusCode, responseHeaders, remixContext) => {
+    const markup = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)(react_1.RemixServer, { context: remixContext, url: request.url }));
+    responseHeaders.set("Content-Type", "text/html");
+    return new Response("<!DOCTYPE html>" + (0, insert_critical_css_1.insertCriticalCss)(markup), {
+        status: responseStatusCode,
+        headers: responseHeaders,
+    });
+};
+exports.handleRequest = handleRequest;

package/lib/remix/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./handle-request.server";
+//# sourceMappingURL=index.d.ts.map

package/lib/remix/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/remix/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC"}

package/lib/remix/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./root"), exports);
+__exportStar(require("./handle-request.server"), exports);

package/lib/remix/insert-critical-css.d.ts

@@ -0,0 +1,2 @@
+export declare const insertCriticalCss: (markup: string) => string;
+//# sourceMappingURL=insert-critical-css.d.ts.map

package/lib/remix/insert-critical-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-critical-css.d.ts","sourceRoot":"","sources":["../../src/remix/insert-critical-css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,WAAY,MAAM,KAAG,MAElD,CAAC"}

package/lib/remix/insert-critical-css.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertCriticalCss = void 0;
+const stitches_1 = require("../stitches");
+const constants_1 = require("./constants");
+const insertCriticalCss = (markup) => {
+    return markup.replace(constants_1.CRITICAL_CSS_MARKER, `<style>${(0, stitches_1.flushCss)()}</style>`);
+};
+exports.insertCriticalCss = insertCriticalCss;

package/lib/remix/root.d.ts

@@ -0,0 +1,8 @@
+import { Outlet as DefaultOutlet } from "@remix-run/react";
+/**
+ * We are using Outlet prop from index layout when user renders site from a subdomain.
+ */
+export declare const Root: ({ Outlet, }: {
+    Outlet: typeof DefaultOutlet;
+}) => JSX.Element;
+//# sourceMappingURL=root.d.ts.map

package/lib/remix/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/remix/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGxE;;GAEG;AACH,eAAO,MAAM,IAAI;YAGP,oBAAoB;iBAgB7B,CAAC"}

package/lib/remix/root.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Root = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@remix-run/react");
+const constants_1 = require("./constants");
+/**
+ * We are using Outlet prop from index layout when user renders site from a subdomain.
+ */
+const Root = ({ Outlet = react_1.Outlet, }) => {
+    return ((0, jsx_runtime_1.jsxs)("html", { lang: "en", children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }), (0, jsx_runtime_1.jsx)("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), (0, jsx_runtime_1.jsx)(react_1.Meta, {}), (0, jsx_runtime_1.jsx)(react_1.Links, {}), typeof document === "undefined" ? constants_1.CRITICAL_CSS_MARKER : null] }), (0, jsx_runtime_1.jsx)(Outlet, {})] }));
+};
+exports.Root = Root;

package/lib/stitches/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./to-css";
-export * from "./css";
-export * from "./critical-css";
+export * from "./stitches";
 //# sourceMappingURL=index.d.ts.map

package/lib/stitches/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stitches/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stitches/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}

package/lib/stitches/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./to-css"), exports);
-__exportStar(require("./css"), exports);
-__exportStar(require("./critical-css"), exports);
+__exportStar(require("./stitches"), exports);