@knapsack/rendering-utils 4.69.11--canary.4820.6c04f2a.0

package/.eslintignore

@@ -0,0 +1 @@
+dist

package/.eslintrc.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: [
+    '@knapsack/eslint-config-starter',
+    '@knapsack/eslint-config-starter/esm',
+  ],
+  parserOptions: { tsconfigRootDir: __dirname },
+  ignorePatterns: [],
+  rules: {},
+};

package/.lintstagedrc.mjs

@@ -0,0 +1,11 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+import defaultConfig from '../../.lintstagedrc.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default {
+  '*.{ts,tsx,js,jsx,cjs,mjs}': `cd ${__dirname} && ./node_modules/.bin/eslint`,
+  ...defaultConfig,
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @knapsack/rendering-utils@4.69.10 build /home/runner/work/app-monorepo/app-monorepo/libs/rendering-utils
+> tsc
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,4 @@
+
+> @knapsack/rendering-utils@4.69.10 lint /home/runner/work/app-monorepo/app-monorepo/libs/rendering-utils
+> eslint ./
+

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './rendering.js';
+export * from './slot-layout-options-utils.js';
+export * from './theming.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './rendering.js';
+export * from './slot-layout-options-utils.js';
+export * from './theming.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,cAAc,CAAC"}

package/dist/rendering.d.ts

@@ -0,0 +1,23 @@
+import type { KsAppClientData, KsAppClientDataNoMeta, RenderDataDemo, ContentStateForRendering } from '@knapsack/types';
+export declare function getContentStateFromAppClientData({ patterns, demosById, }: {
+    patterns: KsAppClientDataNoMeta['patternsState']['patterns'];
+    demosById: KsAppClientDataNoMeta['db']['demos']['byId'];
+}): ContentStateForRendering;
+/**
+ * What we're going to here is look at all the slots data and grab
+ * the ACTUAL demo data we have locally here instead of just sending up the
+ * demoId - b/c that could be wrong on the server due to changes that were made
+ * in the UI to that demo that is in a slot for the demo we're currently rendering.
+ * A good example is if the Button was changed and we are now rendering a Card
+ * that uses the Button.
+ */
+export declare function inlineDemoData({ demosById, demo, collectionsParentKey, }: {
+    demosById: KsAppClientData['db']['demos']['byId'];
+    demo: Extract<RenderDataDemo, {
+        type: 'data';
+    }>;
+    collectionsParentKey: string;
+}): Extract<RenderDataDemo, {
+    type: 'data';
+}>;
+//# sourceMappingURL=rendering.d.ts.map

package/dist/rendering.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rendering.d.ts","sourceRoot":"","sources":["../src/rendering.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,wBAAwB,EACzB,MAAM,iBAAiB,CAAC;AAGzB,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7D,SAAS,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;CACzD,GAAG,wBAAwB,CAgC3B;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,IAAI,EACJ,oBAAoB,GACrB,EAAE;IACD,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;IAClD,IAAI,EAAE,OAAO,CAAC,cAAc,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;CAC9B,GAAG,OAAO,CAAC,cAAc,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAkC5C"}

package/dist/rendering.js

@@ -0,0 +1,75 @@
+import { isEmpty, produce } from '@knapsack/utils';
+import { convertSlotOptions } from './slot-layout-options-utils.js';
+export function getContentStateFromAppClientData({ patterns, demosById, }) {
+    return {
+        patterns: Object.values(patterns).reduce((acc, pattern) => {
+            var _a, _b;
+            acc[pattern.id] = {
+                id: pattern.id,
+                templateDemos: ((_a = pattern.templates) === null || _a === void 0 ? void 0 : _a.flatMap((t) => {
+                    return t.demoIds
+                        .map((demoId) => {
+                        const demo = demosById[demoId];
+                        return {
+                            ...demo,
+                            templateId: t.id,
+                            templateLanguageId: t.templateLanguageId,
+                        };
+                    })
+                        .filter((d) => d.type === 'template');
+                })) || [],
+                templates: ((_b = pattern.templates) === null || _b === void 0 ? void 0 : _b.map(({ id, alias, path, templateLanguageId, spec }) => ({
+                    id,
+                    alias,
+                    path,
+                    templateLanguageId,
+                    spec,
+                }))) || [],
+            };
+            return acc;
+        }, {}),
+    };
+}
+/**
+ * What we're going to here is look at all the slots data and grab
+ * the ACTUAL demo data we have locally here instead of just sending up the
+ * demoId - b/c that could be wrong on the server due to changes that were made
+ * in the UI to that demo that is in a slot for the demo we're currently rendering.
+ * A good example is if the Button was changed and we are now rendering a Card
+ * that uses the Button.
+ */
+export function inlineDemoData({ demosById, demo, collectionsParentKey, }) {
+    if (Object.keys(demo.data.slots || {}).length === 0)
+        return demo;
+    return produce(demo, (draft) => {
+        Object.entries(draft.data.slots || {}).forEach(([slotName, slottedDatas]) => {
+            var _a;
+            var _b;
+            const slotOptions = (_a = draft.data.slotsOptions) === null || _a === void 0 ? void 0 : _a[slotName];
+            if (!isEmpty(slotOptions)) {
+                (_b = draft.data).slotsOptionsComputed || (_b.slotsOptionsComputed = {});
+                draft.data.slotsOptionsComputed[slotName] = convertSlotOptions({
+                    slotOptions,
+                    collectionsParentKey,
+                });
+            }
+            slottedDatas.forEach((slottedData) => {
+                if (slottedData.type !== 'template-demo')
+                    return;
+                const slottedDemo = demosById[slottedData.demoId];
+                if (!slottedDemo) {
+                    throw new Error(`slottedDemo, ${slottedData.demoId} not found in ${draft.id}`);
+                }
+                if (slottedDemo.type === 'data') {
+                    // recursively grab the data of the sub-components of our sub-components
+                    slottedData.demo = inlineDemoData({
+                        demosById,
+                        demo: slottedDemo,
+                        collectionsParentKey,
+                    });
+                }
+            });
+        });
+    });
+}
+//# sourceMappingURL=rendering.js.map

package/dist/rendering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rendering.js","sourceRoot":"","sources":["../src/rendering.ts"],"names":[],"mappings":"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"}

package/dist/slot-layout-options-utils.d.ts

@@ -0,0 +1,6 @@
+import type { SlotOptions, SlotOptionsComputed } from '@knapsack/types';
+export declare function convertSlotOptions({ slotOptions: { cssClasses, wrappingElementName, ...slotOptions }, collectionsParentKey, }: {
+    slotOptions: SlotOptions;
+    collectionsParentKey: string;
+}): SlotOptionsComputed;
+//# sourceMappingURL=slot-layout-options-utils.d.ts.map

package/dist/slot-layout-options-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-layout-options-utils.d.ts","sourceRoot":"","sources":["../src/slot-layout-options-utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,WAAW,EACX,mBAAmB,EAEpB,MAAM,iBAAiB,CAAC;AAkBzB,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EAAE,EAAE,UAAe,EAAE,mBAA2B,EAAE,GAAG,WAAW,EAAE,EAC7E,oBAAoC,GACrC,EAAE;IACD,WAAW,EAAE,WAAW,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;CAC9B,GAAG,mBAAmB,CAqJtB"}

package/dist/slot-layout-options-utils.js

@@ -0,0 +1,156 @@
+import { cssVarName, keys } from '@knapsack/utils';
+import { themeDefinitionToAttributes } from './theming.js';
+/**
+ * Helper function to convert a `TokenSrcValueInfo` to a string value.
+ */
+const tokenSrcValueInfoToValue = (tokenSrcValueInfo) => {
+    return tokenSrcValueInfo.kind === 'static'
+        ? tokenSrcValueInfo.value
+        : `var(${cssVarName(tokenSrcValueInfo.referencedTokenId)})`;
+};
+export function convertSlotOptions({ slotOptions: { cssClasses = [], wrappingElementName = 'div', ...slotOptions }, collectionsParentKey = 'collections', }) {
+    return keys(slotOptions).reduce((acc, id) => {
+        switch (id) {
+            case 'gap': {
+                const tokenSrcValueInfo = slotOptions[id];
+                if (!tokenSrcValueInfo)
+                    return acc;
+                acc.styles.display = 'flex';
+                acc.styles.gap = tokenSrcValueInfoToValue(tokenSrcValueInfo.value);
+                break;
+            }
+            case 'align': {
+                const option = slotOptions[id];
+                if (!option)
+                    return acc;
+                acc.styles.display = 'flex';
+                switch (option.value) {
+                    case 'top-left': {
+                        acc.styles.alignItems = 'start';
+                        acc.styles.justifyContent = 'start';
+                        break;
+                    }
+                    case 'top-center': {
+                        acc.styles.alignItems = 'start';
+                        acc.styles.justifyContent = 'center';
+                        break;
+                    }
+                    case 'top-right': {
+                        acc.styles.alignItems = 'start';
+                        acc.styles.justifyContent = 'end';
+                        break;
+                    }
+                    case 'right': {
+                        acc.styles.alignItems = 'center';
+                        acc.styles.justifyContent = 'end';
+                        break;
+                    }
+                    case 'bottom-right': {
+                        acc.styles.alignItems = 'end';
+                        acc.styles.justifyContent = 'end';
+                        break;
+                    }
+                    case 'bottom-center': {
+                        acc.styles.alignItems = 'end';
+                        acc.styles.justifyContent = 'center';
+                        break;
+                    }
+                    case 'bottom-left': {
+                        acc.styles.alignItems = 'end';
+                        acc.styles.justifyContent = 'start';
+                        break;
+                    }
+                    case 'center': {
+                        acc.styles.alignItems = 'center';
+                        acc.styles.justifyContent = 'center';
+                        break;
+                    }
+                    case 'left': {
+                        acc.styles.alignItems = 'center';
+                        acc.styles.justifyContent = 'start';
+                        break;
+                    }
+                    default: {
+                        const _exhaustiveCheck = option.value;
+                    }
+                }
+                break;
+            }
+            case 'layout': {
+                const option = slotOptions[id];
+                if (!option)
+                    return acc;
+                acc.styles.display = 'flex';
+                acc.styles.width = '100%';
+                switch (option.value) {
+                    case 'horizontal': {
+                        acc.styles.flexFlow = 'row';
+                        break;
+                    }
+                    case 'vertical': {
+                        acc.styles.flexFlow = 'column';
+                        break;
+                    }
+                    case 'wrap': {
+                        acc.styles.flexFlow = 'wrap';
+                        break;
+                    }
+                    default: {
+                        const _exhaustiveCheck = option.value;
+                    }
+                }
+                break;
+            }
+            case 'paddingHorizontal': {
+                const tokenSrcValueInfo = slotOptions[id];
+                if (!tokenSrcValueInfo)
+                    return acc;
+                const [paddingLeft, paddingRight] = tokenSrcValueInfo.value;
+                // Left
+                if (paddingLeft === null || paddingLeft === void 0 ? void 0 : paddingLeft.kind) {
+                    acc.styles.paddingLeft = tokenSrcValueInfoToValue(paddingLeft);
+                }
+                // Right
+                if (paddingRight === null || paddingRight === void 0 ? void 0 : paddingRight.kind) {
+                    acc.styles.paddingRight = tokenSrcValueInfoToValue(paddingRight);
+                }
+                break;
+            }
+            case 'paddingVertical': {
+                const tokenSrcValueInfo = slotOptions[id];
+                if (!tokenSrcValueInfo)
+                    return acc;
+                const [paddingTop, paddingBottom] = tokenSrcValueInfo.value;
+                // Top
+                if (paddingTop === null || paddingTop === void 0 ? void 0 : paddingTop.kind) {
+                    acc.styles.paddingTop = tokenSrcValueInfoToValue(paddingTop);
+                }
+                // Bottom
+                if (paddingBottom === null || paddingBottom === void 0 ? void 0 : paddingBottom.kind) {
+                    acc.styles.paddingBottom = tokenSrcValueInfoToValue(paddingBottom);
+                }
+                break;
+            }
+            case 'theme': {
+                const themeDef = slotOptions[id];
+                if (!themeDef)
+                    return acc;
+                acc.attributes = themeDefinitionToAttributes({
+                    collectionsParentKey,
+                    themeDefinition: themeDef,
+                });
+                break;
+            }
+            default: {
+                const _exhaustiveCheck = id;
+            }
+        }
+        return acc;
+    }, {
+        wrappingElementName,
+        cssClasses,
+        attributes: {},
+        styles: {},
+    });
+}
+//# sourceMappingURL=slot-layout-options-utils.js.map

package/dist/slot-layout-options-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-layout-options-utils.js","sourceRoot":"","sources":["../src/slot-layout-options-utils.ts"],"names":[],"mappings":"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"}

package/dist/theming.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeDefinition } from '@knapsack/types';
+export declare const themeDefinitionToAttributes: ({ collectionsParentKey, themeDefinition, }: {
+    collectionsParentKey: string;
+    themeDefinition: ThemeDefinition;
+}) => {
+    [k: string]: string;
+};
+//# sourceMappingURL=theming.d.ts.map

package/dist/theming.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../src/theming.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,eAAO,MAAM,2BAA2B,+CAGrC;IACD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,eAAe,CAAC;CAClC;;CAcA,CAAC"}

package/dist/theming.js

@@ -0,0 +1,15 @@
+import { kebabCase } from '@knapsack/utils';
+export const themeDefinitionToAttributes = ({ collectionsParentKey, themeDefinition = {}, }) => {
+    // No collectionsParentKey means *they have not configured collections*
+    if (!collectionsParentKey)
+        return {};
+    return Object.fromEntries(Object.entries(themeDefinition)
+        .filter(([_, modeId]) => !!modeId)
+        .map(([collectionId, modeId]) => {
+        return [
+            kebabCase(`data-${collectionsParentKey}-${collectionId}`),
+            modeId,
+        ];
+    }));
+};
+//# sourceMappingURL=theming.js.map

package/dist/theming.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming.js","sourceRoot":"","sources":["../src/theming.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,oBAAoB,EACpB,eAAe,GAAG,EAAE,GAIrB,EAAE,EAAE;IACH,uEAAuE;IACvE,IAAI,CAAC,oBAAoB;QAAE,OAAO,EAAE,CAAC;IAErC,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;SAC5B,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;SACjC,GAAG,CAAC,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,EAAE,EAAE;QAC9B,OAAO;YACL,SAAS,CAAC,QAAQ,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzD,MAAM;SACP,CAAC;IACJ,CAAC,CAAC,CACL,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@knapsack/rendering-utils",
+  "description": "",
+  "version": "4.69.11--canary.4820.6c04f2a.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package": "./package.json",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf ./dist",
+    "lint": "eslint ./"
+  },
+  "dependencies": {
+    "@knapsack/utils": "4.69.11--canary.4820.6c04f2a.0"
+  },
+  "devDependencies": {
+    "@knapsack/eslint-config-starter": "4.69.11--canary.4820.6c04f2a.0",
+    "@knapsack/prettier-config": "4.69.11--canary.4820.6c04f2a.0",
+    "@knapsack/types": "4.69.11--canary.4820.6c04f2a.0",
+    "@knapsack/typescript-config-starter": "4.69.11--canary.4820.6c04f2a.0",
+    "eslint": "^8.57.0",
+    "typescript": "^5.5.4"
+  },
+  "license": "GPL-2.0-or-later",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "url": "https://github.com/knapsack-labs/app-monorepo",
+    "directory": "libs/rendering-utils",
+    "type": "git"
+  },
+  "gitHead": "6c04f2a066b6dfde853781a65b2c6e43a3a29f2f"
+}

package/readme.md

@@ -0,0 +1 @@
+

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './rendering.js';
+export * from './slot-layout-options-utils.js';
+export * from './theming.js';

package/src/rendering.ts

@@ -0,0 +1,100 @@
+import { isEmpty, produce } from '@knapsack/utils';
+import type {
+  KsAppClientData,
+  KsAppClientDataNoMeta,
+  RenderDataDemo,
+  ContentStateForRendering,
+} from '@knapsack/types';
+import { convertSlotOptions } from './slot-layout-options-utils.js';
+
+export function getContentStateFromAppClientData({
+  patterns,
+  demosById,
+}: {
+  patterns: KsAppClientDataNoMeta['patternsState']['patterns'];
+  demosById: KsAppClientDataNoMeta['db']['demos']['byId'];
+}): ContentStateForRendering {
+  return {
+    patterns: Object.values(patterns).reduce((acc, pattern) => {
+      acc[pattern.id] = {
+        id: pattern.id,
+        templateDemos:
+          pattern.templates?.flatMap((t) => {
+            return t.demoIds
+              .map((demoId) => {
+                const demo = demosById[demoId];
+                return {
+                  ...demo,
+                  templateId: t.id,
+                  templateLanguageId: t.templateLanguageId,
+                };
+              })
+              .filter((d) => d.type === 'template');
+          }) || [],
+        templates:
+          pattern.templates?.map(
+            ({ id, alias, path, templateLanguageId, spec }) => ({
+              id,
+              alias,
+              path,
+              templateLanguageId,
+              spec,
+            }),
+          ) || [],
+      };
+      return acc;
+    }, {} as ContentStateForRendering['patterns']),
+  };
+}
+
+/**
+ * What we're going to here is look at all the slots data and grab
+ * the ACTUAL demo data we have locally here instead of just sending up the
+ * demoId - b/c that could be wrong on the server due to changes that were made
+ * in the UI to that demo that is in a slot for the demo we're currently rendering.
+ * A good example is if the Button was changed and we are now rendering a Card
+ * that uses the Button.
+ */
+export function inlineDemoData({
+  demosById,
+  demo,
+  collectionsParentKey,
+}: {
+  demosById: KsAppClientData['db']['demos']['byId'];
+  demo: Extract<RenderDataDemo, { type: 'data' }>;
+  collectionsParentKey: string;
+}): Extract<RenderDataDemo, { type: 'data' }> {
+  if (Object.keys(demo.data.slots || {}).length === 0) return demo;
+  return produce(demo, (draft) => {
+    Object.entries(draft.data.slots || {}).forEach(
+      ([slotName, slottedDatas]) => {
+        const slotOptions = draft.data.slotsOptions?.[slotName];
+        if (!isEmpty(slotOptions)) {
+          draft.data.slotsOptionsComputed ||= {};
+          draft.data.slotsOptionsComputed[slotName] = convertSlotOptions({
+            slotOptions,
+            collectionsParentKey,
+          });
+        }
+        slottedDatas.forEach((slottedData) => {
+          if (slottedData.type !== 'template-demo') return;
+          const slottedDemo = demosById[slottedData.demoId];
+          if (!slottedDemo) {
+            throw new Error(
+              `slottedDemo, ${slottedData.demoId} not found in ${draft.id}`,
+            );
+          }
+
+          if (slottedDemo.type === 'data') {
+            // recursively grab the data of the sub-components of our sub-components
+            slottedData.demo = inlineDemoData({
+              demosById,
+              demo: slottedDemo,
+              collectionsParentKey,
+            });
+          }
+        });
+      },
+    );
+  });
+}

package/src/slot-layout-options-utils.ts

@@ -0,0 +1,179 @@
+import { cssVarName, keys } from '@knapsack/utils';
+import type {
+  SlotOptions,
+  SlotOptionsComputed,
+  TokenSrcValueInfo,
+} from '@knapsack/types';
+import { themeDefinitionToAttributes } from './theming.js';
+
+type TokensWithStringStaticVal = Extract<
+  TokenSrcValueInfo,
+  { kind: 'static'; value: string }
+>;
+/**
+ * Helper function to convert a `TokenSrcValueInfo` to a string value.
+ */
+const tokenSrcValueInfoToValue = (
+  tokenSrcValueInfo: TokenSrcValueInfo<TokensWithStringStaticVal['type']>,
+): string => {
+  return tokenSrcValueInfo.kind === 'static'
+    ? tokenSrcValueInfo.value
+    : `var(${cssVarName(tokenSrcValueInfo.referencedTokenId)})`;
+};
+
+export function convertSlotOptions({
+  slotOptions: { cssClasses = [], wrappingElementName = 'div', ...slotOptions },
+  collectionsParentKey = 'collections',
+}: {
+  slotOptions: SlotOptions;
+  collectionsParentKey: string;
+}): SlotOptionsComputed {
+  return keys(slotOptions).reduce<SlotOptionsComputed>(
+    (acc, id) => {
+      switch (id) {
+        case 'gap': {
+          const tokenSrcValueInfo = slotOptions[id];
+          if (!tokenSrcValueInfo) return acc;
+          acc.styles.display = 'flex';
+          acc.styles.gap = tokenSrcValueInfoToValue(tokenSrcValueInfo.value);
+
+          break;
+        }
+        case 'align': {
+          const option = slotOptions[id];
+          if (!option) return acc;
+          acc.styles.display = 'flex';
+          switch (option.value) {
+            case 'top-left': {
+              acc.styles.alignItems = 'start';
+              acc.styles.justifyContent = 'start';
+              break;
+            }
+            case 'top-center': {
+              acc.styles.alignItems = 'start';
+              acc.styles.justifyContent = 'center';
+              break;
+            }
+            case 'top-right': {
+              acc.styles.alignItems = 'start';
+              acc.styles.justifyContent = 'end';
+              break;
+            }
+            case 'right': {
+              acc.styles.alignItems = 'center';
+              acc.styles.justifyContent = 'end';
+              break;
+            }
+            case 'bottom-right': {
+              acc.styles.alignItems = 'end';
+              acc.styles.justifyContent = 'end';
+              break;
+            }
+            case 'bottom-center': {
+              acc.styles.alignItems = 'end';
+              acc.styles.justifyContent = 'center';
+              break;
+            }
+            case 'bottom-left': {
+              acc.styles.alignItems = 'end';
+              acc.styles.justifyContent = 'start';
+              break;
+            }
+            case 'center': {
+              acc.styles.alignItems = 'center';
+              acc.styles.justifyContent = 'center';
+              break;
+            }
+            case 'left': {
+              acc.styles.alignItems = 'center';
+              acc.styles.justifyContent = 'start';
+              break;
+            }
+            default: {
+              const _exhaustiveCheck: never = option.value;
+            }
+          }
+
+          break;
+        }
+        case 'layout': {
+          const option = slotOptions[id];
+          if (!option) return acc;
+          acc.styles.display = 'flex';
+          acc.styles.width = '100%';
+          switch (option.value) {
+            case 'horizontal': {
+              acc.styles.flexFlow = 'row';
+              break;
+            }
+            case 'vertical': {
+              acc.styles.flexFlow = 'column';
+              break;
+            }
+            case 'wrap': {
+              acc.styles.flexFlow = 'wrap';
+              break;
+            }
+            default: {
+              const _exhaustiveCheck: never = option.value;
+            }
+          }
+          break;
+        }
+        case 'paddingHorizontal': {
+          const tokenSrcValueInfo = slotOptions[id];
+          if (!tokenSrcValueInfo) return acc;
+
+          const [paddingLeft, paddingRight] = tokenSrcValueInfo.value;
+
+          // Left
+          if (paddingLeft?.kind) {
+            acc.styles.paddingLeft = tokenSrcValueInfoToValue(paddingLeft);
+          }
+          // Right
+          if (paddingRight?.kind) {
+            acc.styles.paddingRight = tokenSrcValueInfoToValue(paddingRight);
+          }
+          break;
+        }
+        case 'paddingVertical': {
+          const tokenSrcValueInfo = slotOptions[id];
+          if (!tokenSrcValueInfo) return acc;
+
+          const [paddingTop, paddingBottom] = tokenSrcValueInfo.value;
+
+          // Top
+          if (paddingTop?.kind) {
+            acc.styles.paddingTop = tokenSrcValueInfoToValue(paddingTop);
+          }
+          // Bottom
+          if (paddingBottom?.kind) {
+            acc.styles.paddingBottom = tokenSrcValueInfoToValue(paddingBottom);
+          }
+          break;
+        }
+        case 'theme': {
+          const themeDef = slotOptions[id];
+          if (!themeDef) return acc;
+
+          acc.attributes = themeDefinitionToAttributes({
+            collectionsParentKey,
+            themeDefinition: themeDef,
+          });
+
+          break;
+        }
+        default: {
+          const _exhaustiveCheck: never = id;
+        }
+      }
+      return acc;
+    },
+    {
+      wrappingElementName,
+      cssClasses,
+      attributes: {},
+      styles: {},
+    } satisfies SlotOptionsComputed,
+  );
+}

package/src/theming.ts

@@ -0,0 +1,24 @@
+import { kebabCase } from '@knapsack/utils';
+import type { ThemeDefinition } from '@knapsack/types';
+
+export const themeDefinitionToAttributes = ({
+  collectionsParentKey,
+  themeDefinition = {},
+}: {
+  collectionsParentKey: string;
+  themeDefinition: ThemeDefinition;
+}) => {
+  // No collectionsParentKey means *they have not configured collections*
+  if (!collectionsParentKey) return {};
+
+  return Object.fromEntries(
+    Object.entries(themeDefinition)
+      .filter(([_, modeId]) => !!modeId)
+      .map(([collectionId, modeId]) => {
+        return [
+          kebabCase(`data-${collectionsParentKey}-${collectionId}`),
+          modeId,
+        ];
+      }),
+  );
+};

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@knapsack/typescript-config-starter/tsconfig.build.json",
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "strict": true,
+    "outDir": "./dist"
+  },
+  "include": ["./src"]
+}