@almadar/shell-web 0.0.0-stage → 0.1.0

package/src/core/tokens/native-tokens.json

@@ -0,0 +1,369 @@
+{
+ "breakpoints": {
+  "sm": 640,
+  "md": 768,
+  "lg": 1024,
+  "xl": 1280,
+  "xxl": 1536
+ },
+ "sizes": {
+  "maxWidth": [
+   {
+    "key": "14",
+    "value": 56
+   },
+   {
+    "key": "16",
+    "value": 64
+   },
+   {
+    "key": "20",
+    "value": 80
+   },
+   {
+    "key": "24",
+    "value": 96
+   },
+   {
+    "key": "28",
+    "value": 112
+   },
+   {
+    "key": "32",
+    "value": 128
+   },
+   {
+    "key": "36",
+    "value": 144
+   },
+   {
+    "key": "40",
+    "value": 160
+   },
+   {
+    "key": "44",
+    "value": 176
+   },
+   {
+    "key": "48",
+    "value": 192
+   },
+   {
+    "key": "52",
+    "value": 208
+   },
+   {
+    "key": "56",
+    "value": 224
+   },
+   {
+    "key": "60",
+    "value": 240
+   },
+   {
+    "key": "64",
+    "value": 256
+   },
+   {
+    "key": "72",
+    "value": 288
+   },
+   {
+    "key": "80",
+    "value": 320
+   },
+   {
+    "key": "96",
+    "value": 384
+   },
+   {
+    "key": "px",
+    "value": 1
+   },
+   {
+    "key": "0.5",
+    "value": 2
+   },
+   {
+    "key": "1.5",
+    "value": 6
+   },
+   {
+    "key": "2.5",
+    "value": 10
+   },
+   {
+    "key": "3.5",
+    "value": 14
+   },
+   {
+    "key": "xs",
+    "value": 320
+   },
+   {
+    "key": "sm",
+    "value": 384
+   },
+   {
+    "key": "md",
+    "value": 448
+   },
+   {
+    "key": "lg",
+    "value": 512
+   },
+   {
+    "key": "xl",
+    "value": 576
+   },
+   {
+    "key": "2xl",
+    "value": 672
+   },
+   {
+    "key": "3xl",
+    "value": 768
+   },
+   {
+    "key": "4xl",
+    "value": 896
+   },
+   {
+    "key": "5xl",
+    "value": 1024
+   },
+   {
+    "key": "6xl",
+    "value": 1152
+   },
+   {
+    "key": "7xl",
+    "value": 1280
+   },
+   {
+    "key": "screen-sm",
+    "value": 640
+   },
+   {
+    "key": "screen-md",
+    "value": 768
+   },
+   {
+    "key": "screen-lg",
+    "value": 1024
+   },
+   {
+    "key": "screen-xl",
+    "value": 1280
+   },
+   {
+    "key": "screen-2xl",
+    "value": 1536
+   }
+  ],
+  "width": [
+   {
+    "key": "14",
+    "value": 56
+   },
+   {
+    "key": "16",
+    "value": 64
+   },
+   {
+    "key": "20",
+    "value": 80
+   },
+   {
+    "key": "24",
+    "value": 96
+   },
+   {
+    "key": "28",
+    "value": 112
+   },
+   {
+    "key": "32",
+    "value": 128
+   },
+   {
+    "key": "36",
+    "value": 144
+   },
+   {
+    "key": "40",
+    "value": 160
+   },
+   {
+    "key": "44",
+    "value": 176
+   },
+   {
+    "key": "48",
+    "value": 192
+   },
+   {
+    "key": "52",
+    "value": 208
+   },
+   {
+    "key": "56",
+    "value": 224
+   },
+   {
+    "key": "60",
+    "value": 240
+   },
+   {
+    "key": "64",
+    "value": 256
+   },
+   {
+    "key": "72",
+    "value": 288
+   },
+   {
+    "key": "80",
+    "value": 320
+   },
+   {
+    "key": "96",
+    "value": 384
+   },
+   {
+    "key": "px",
+    "value": 1
+   },
+   {
+    "key": "0.5",
+    "value": 2
+   },
+   {
+    "key": "1.5",
+    "value": 6
+   },
+   {
+    "key": "2.5",
+    "value": 10
+   },
+   {
+    "key": "3.5",
+    "value": 14
+   }
+  ],
+  "minWidth": [
+   {
+    "key": "14",
+    "value": 56
+   },
+   {
+    "key": "16",
+    "value": 64
+   },
+   {
+    "key": "20",
+    "value": 80
+   },
+   {
+    "key": "24",
+    "value": 96
+   },
+   {
+    "key": "28",
+    "value": 112
+   },
+   {
+    "key": "32",
+    "value": 128
+   },
+   {
+    "key": "36",
+    "value": 144
+   },
+   {
+    "key": "40",
+    "value": 160
+   },
+   {
+    "key": "44",
+    "value": 176
+   },
+   {
+    "key": "48",
+    "value": 192
+   },
+   {
+    "key": "52",
+    "value": 208
+   },
+   {
+    "key": "56",
+    "value": 224
+   },
+   {
+    "key": "60",
+    "value": 240
+   },
+   {
+    "key": "64",
+    "value": 256
+   },
+   {
+    "key": "72",
+    "value": 288
+   },
+   {
+    "key": "80",
+    "value": 320
+   },
+   {
+    "key": "96",
+    "value": 384
+   },
+   {
+    "key": "px",
+    "value": 1
+   },
+   {
+    "key": "0.5",
+    "value": 2
+   },
+   {
+    "key": "1.5",
+    "value": 6
+   },
+   {
+    "key": "2.5",
+    "value": 10
+   },
+   {
+    "key": "3.5",
+    "value": 14
+   },
+   {
+    "key": "modal-sm",
+    "value": 400
+   },
+   {
+    "key": "modal-md",
+    "value": 520
+   },
+   {
+    "key": "modal-lg",
+    "value": 600
+   },
+   {
+    "key": "modal-xl",
+    "value": 700
+   }
+  ]
+ },
+ "gestureTpl": {
+  "swift": "    static func {{name}}(_ eventKey: String) -> String {\n        \"{{prefix}}\" + eventKey\n    }\n\n",
+  "kt": "    fun {{name}}(eventKey: String): String = \"{{prefix}}\" + eventKey\n\n"
+ },
+ "sizeLine": {
+  "swift": "    static let {{name}}: CGFloat = {{value}}",
+  "kt": "    val {{name}}: Dp = {{value}}.dp"
+ }
+}

package/tailwind-compile.cjs

@@ -0,0 +1,29 @@
+/**
+ * Compile a list of Tailwind classes to CSS at runtime, with this package's
+ * preset — for hosts that render a schema whose classNames exist only as data
+ * (a live preview, a runtime-interpreted app). Build-time Tailwind never saw
+ * those classes, so arbitrary values like `w-[243px]` would paint nothing.
+ *
+ * Utilities only: no base styles, and none of the preset's safelist (the host
+ * already ships those). Node-only; the host provides `tailwindcss` + `postcss`
+ * (optional peer dependencies — every host already builds its CSS with them).
+ */
+const postcss = require('postcss');
+const tailwindcss = require('tailwindcss');
+const containerQueries = require('@tailwindcss/container-queries');
+const { safelist: _safelist, ...preset } = require('./tailwind-preset.cjs');
+
+/** @param {string[]} classes @returns {Promise<string>} */
+async function compileTailwindClasses(classes) {
+  if (classes.length === 0) return '';
+  const config = {
+    presets: [preset],
+    plugins: [containerQueries],
+    content: [{ raw: classes.join(' '), extension: 'html' }],
+    corePlugins: { preflight: false },
+  };
+  const result = await postcss([tailwindcss(config)]).process('@tailwind utilities;', { from: undefined });
+  return result.css.trim();
+}
+
+module.exports = { compileTailwindClasses };