@webstudio-is/react-sdk 0.6.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,5 +6,5 @@ export * as componentsMeta from "./components/meta";
 export * from "./user-props";
 export * from "./pubsub";
 export * from "./db";
-export * from "./canvas";
+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;AACrB,cAAc,UAAU,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,4 +35,4 @@ exports.componentsMeta = __importStar(require("./components/meta"));
 __exportStar(require("./user-props"), exports);
 __exportStar(require("./pubsub"), exports);
 __exportStar(require("./db"), exports);
-__exportStar(require("./canvas"), exports);
+__exportStar(require("./remix"), 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/{canvas → remix}/index.js

@@ -14,4 +14,5 @@ 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("./canvas"), exports);
+__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/{canvas/canvas.d.ts → remix/root.d.ts}

@@ -5,4 +5,4 @@ import { Outlet as DefaultOutlet } from "@remix-run/react";
 export declare const Root: ({ Outlet, }: {
     Outlet: typeof DefaultOutlet;
 }) => JSX.Element;
-//# sourceMappingURL=canvas.d.ts.map
+//# 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/{canvas/canvas.js → remix/root.js}

@@ -3,11 +3,11 @@ 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 __1 = require("..");
+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, {}), (0, jsx_runtime_1.jsx)(__1.CriticalCss, {})] }), (0, jsx_runtime_1.jsx)(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);

package/lib/stitches/stitches.d.ts

@@ -0,0 +1,8 @@
+import { globalCss as globalCssImport, type CSS, css as createCss } from "@stitches/core";
+import type { Breakpoint } from "../css";
+export { type CSS };
+export declare const css: typeof createCss;
+export declare const globalCss: typeof globalCssImport;
+export declare const flushCss: () => any;
+export declare const setBreakpoints: (breakpoints: Array<Breakpoint>) => void;
+//# sourceMappingURL=stitches.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stitches.d.ts","sourceRoot":"","sources":["../../src/stitches/stitches.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,IAAI,eAAe,EAC5B,KAAK,GAAG,EACR,GAAG,IAAI,SAAS,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAQzC,OAAO,EAAE,KAAK,GAAG,EAAE,CAAC;AASpB,eAAO,MAAM,GAAG,EAAE,OAAO,SAExB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,OAAO,eAE9B,CAAC;AAEF,eAAO,MAAM,QAAQ,WAKpB,CAAC;AAEF,eAAO,MAAM,cAAc,gBAAiB,MAAM,UAAU,CAAC,SAO5D,CAAC"}

package/lib/stitches/{css.js → stitches.js}

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setBreakpoints = exports.getCssText = exports.globalCss = exports.css = exports.getCachedConfig = void 0;
+exports.setBreakpoints = exports.flushCss = exports.globalCss = exports.css = void 0;
 const core_1 = require("@stitches/core");
-Object.defineProperty(exports, "globalCss", { enumerable: true, get: function () { return core_1.globalCss; } });
 let media = {};
 // @todo needs fixing
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13,15 +12,21 @@ const getCachedConfig = () => {
     }
     return stitches;
 };
-exports.getCachedConfig = getCachedConfig;
 const css = (...args) => {
-    return (0, exports.getCachedConfig)().css(...args);
+    return getCachedConfig().css(...args);
 };
 exports.css = css;
-const getCssText = () => {
-    return (0, exports.getCachedConfig)().getCssText();
+const globalCss = (...args) => {
+    return getCachedConfig().globalCss(...args);
 };
-exports.getCssText = getCssText;
+exports.globalCss = globalCss;
+const flushCss = () => {
+    const config = getCachedConfig();
+    const css = config.getCssText();
+    config.reset();
+    return css;
+};
+exports.flushCss = flushCss;
 const setBreakpoints = (breakpoints) => {
     const nextMedia = {};
     for (const breakpoint of breakpoints) {

package/lib/stitches/to-css.d.ts

@@ -1,4 +1,4 @@
-import type { CSS } from "./css";
+import type { CSS } from "./stitches";
 import type { StyleValue, CssRule, Breakpoint } from "../css";
 export declare const toValue: (value: StyleValue) => string;
 /**

package/lib/stitches/to-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"to-css.d.ts","sourceRoot":"","sources":["../../src/stitches/to-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAiB,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAE7E,eAAO,MAAM,OAAO,UAAW,UAAU,KAAG,MAK3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,aACN,MAAM,OAAO,CAAC,eACX,MAAM,UAAU,CAAC,KAC7B,GAgCF,CAAC"}
+{"version":3,"file":"to-css.d.ts","sourceRoot":"","sources":["../../src/stitches/to-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,KAAK,EAAiB,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAG7E,eAAO,MAAM,OAAO,UAAW,UAAU,KAAG,MAa3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,aACN,MAAM,OAAO,CAAC,eACX,MAAM,UAAU,CAAC,KAC7B,GAgCF,CAAC"}

package/lib/stitches/to-css.js

@@ -1,10 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toCss = exports.toValue = void 0;
+const fonts_1 = require("@webstudio-is/fonts");
 const toValue = (value) => {
     if (value.type === "unit") {
         return value.value + (value.unit === "number" ? "" : value.unit);
     }
+    if (value.type === "fontFamily") {
+        const family = value.value[0];
+        const fallbacks = fonts_1.SYSTEM_FONTS.get(family);
+        if (Array.isArray(fallbacks)) {
+            return [...value.value, ...fallbacks].join(", ");
+        }
+        return [...value.value, fonts_1.DEFAULT_FONT_FALLBACK].join(", ");
+    }
     return value.value;
 };
 exports.toValue = toValue;

package/lib/stitches/to-css.test.js

@@ -8,7 +8,7 @@ const breakpoints = css_1.initialBreakpoints.map((breakpoint, index) => ({
     projectId: "projectId",
 }));
 describe("Convert WS CSS rules to stitches", () => {
-    test("basic", () => {
+    test("keyword", () => {
         const cssRules = [
             {
                 style: {
@@ -27,6 +27,25 @@ describe("Convert WS CSS rules to stitches", () => {
             },
         });
     });
+    test("fontFamily", () => {
+        const cssRules = [
+            {
+                style: {
+                    fontFamily: {
+                        type: "fontFamily",
+                        value: ["Courier New"],
+                    },
+                },
+                breakpoint: "0",
+            },
+        ];
+        const stitchesCss = (0, to_css_1.toCss)(cssRules, breakpoints);
+        expect(stitchesCss).toEqual({
+            "@0": {
+                fontFamily: "Courier New, monospace",
+            },
+        });
+    });
     test("sort order based on maxWidth in breakpoints", () => {
         const cssRules = [
             {