@sylwellsoftware/fray 0.1.0-alpha.1

package/package.json

@@ -0,0 +1,83 @@
+{
+  "type": "module",
+  "name": "@sylwellsoftware/fray",
+  "private": false,
+  "version": "0.1.0-alpha.1",
+  "description": "Experimental browser-only TypeScript component runtime, JSX controls, and semantic themes.",
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Sylwell Software",
+    "email": "npm@sylwellsoftware.com",
+    "url": "https://sylwellsoftware.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sylwellsoftware/gluefrayjs.git",
+    "directory": "packages/fray"
+  },
+  "homepage": "https://github.com/sylwellsoftware/gluefrayjs#readme",
+  "bugs": {
+    "url": "https://github.com/sylwellsoftware/gluefrayjs/issues"
+  },
+  "keywords": [
+    "components",
+    "jsx",
+    "reactive",
+    "typescript"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./experimental": {
+      "types": "./dist/experimental.d.ts",
+      "import": "./dist/experimental.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime.d.ts",
+      "import": "./dist/jsx-dev-runtime.js"
+    },
+    "./themes/light.css": "./themes/light.css",
+    "./themes/dark.css": "./themes/dark.css"
+  },
+  "files": [
+    "dist",
+    "themes",
+    "EXPERIMENTAL.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "sideEffects": [
+    "./themes/*.css"
+  ],
+  "peerDependencies": {
+    "@sylwellsoftware/glue": "^0.1.0-alpha.1"
+  },
+  "devDependencies": {
+    "vite": "^6.3.5",
+    "@sylwellsoftware/glue": "^0.1.0-alpha.1"
+  },
+  "engines": {
+    "node": ">=22",
+    "pnpm": ">=10"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "test": "node --import tsx --test test/*.test.ts",
+    "test:types:consumer": "tsc -p test-types/consumer/tsconfig.json --noEmit",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "watch": "vite build --watch",
+    "dev": "vite"
+  }
+}

package/themes/README.md

@@ -0,0 +1,30 @@
+# Fray theme custom properties
+
+The alpha supports `@sylwellsoftware/fray/themes/light.css` and
+`@sylwellsoftware/fray/themes/dark.css`. Import one after registering Fray structural
+styles, or scope either bundle with `data-fray-theme`.
+
+Consumers may override the variables after the theme import. The supported
+control contract is:
+
+- typography/spacing: `--base-font-size`, `--ui-font-size`, `--ui-padding`,
+  `--ui-padding-h`, `--ui-padding-v`, `--spacing-small`, `--spacing-medium`;
+- shape/focus: `--ui-border-radius`, `--ui-accent-color`,
+  `--ui-accent-color-highlight`;
+- text/input: `--ui-text-color`, `--ui-input-bg`, `--ui-input-border`,
+  `--ui-input-bg-disabled`, `--ui-input-border-disabled`,
+  `--ui-input-text-color-disabled`, `--input-width`, `--input-shadow`;
+- actions: `--button-background`, `--button-background-hover`,
+  `--button-background-disabled`, `--button-border`,
+  `--button-border-disabled`, `--button-shadow`, `--button-color`,
+  `--toggle-selected-bg`, `--toggle-selected-text`;
+- panels/tabs/toolbars: `--panel-*`, `--panel-padding`, `--toolbar-*`,
+  `--sectionheader-*`, `--tabline-bg`, `--tab-bg-active`;
+- checkbox/error: `--cbx-o-border`, `--cbx-border-radius`, `--error-color`.
+
+The root-default selector uses a zero-specificity `:where(...)` wrapper. The
+explicit `data-fray-theme` selector retains attribute specificity so it also
+wins when an application bundles more than one theme and the other bundle's
+root fallback loads later. A consumer inline custom property or a more-specific
+rule can still override a theme value. Import one bundle for one root default,
+or import multiple bundles and select an explicit theme on each scoped subtree.

package/themes/dark.css

@@ -0,0 +1,39 @@
+:where(:root), [data-fray-theme="dark"] {
+  color-scheme: dark;
+  --ui-text-color: #edf3f8;
+  --ui-input-bg: #202b36;
+  --ui-input-border: 1px solid #718294;
+  --ui-input-bg-disabled: #303a44;
+  --ui-input-border-disabled: #566370;
+  --ui-input-text-color-disabled: #a1acb7;
+  --ui-accent-color: #79bfff;
+  --ui-accent-color-highlight: #245f91;
+  --input-shadow: none;
+  --button-background: #344454;
+  --button-background-hover: #455b70;
+  --button-background-disabled: #303a44;
+  --button-border: 1px solid #718294;
+  --button-border-disabled: 1px solid #566370;
+  --button-shadow: 0 1px 2px rgb(0 0 0 / 35%);
+  --button-color: #edf3f8;
+  --toggle-selected-bg: #79bfff;
+  --toggle-selected-text: #102030;
+  --panel-bg: #18222c;
+  --panel-border: 1px solid #465565;
+  --panel-radius: 0.375rem;
+  --panel-shadow: 0 2px 10px rgb(0 0 0 / 35%);
+  --panel-color: #edf3f8;
+  --toolbar-bg: #202b36;
+  --toolbar-border: 0;
+  --toolbar-radius: 0;
+  --toolbar-shadow: none;
+  --toolbar-color: #edf3f8;
+  --sectionheader-bg: #2b3947;
+  --sectionheader-shadow: none;
+  --sectionheader-color: #edf3f8;
+  --tabline-bg: #202b36;
+  --tab-bg-active: #18222c;
+  --error-color: #ff8b9d;
+  --cbx-o-border: 1px solid #a9b6c3;
+  --cbx-border-radius: 0.2rem;
+}

package/themes/light.css

@@ -0,0 +1,39 @@
+:where(:root), [data-fray-theme="light"] {
+  color-scheme: light;
+  --ui-text-color: #18212b;
+  --ui-input-bg: #ffffff;
+  --ui-input-border: 1px solid #8a98a8;
+  --ui-input-bg-disabled: #e8edf2;
+  --ui-input-border-disabled: #b7c0ca;
+  --ui-input-text-color-disabled: #647180;
+  --ui-accent-color: #1769aa;
+  --ui-accent-color-highlight: #9acfff;
+  --input-shadow: none;
+  --button-background: #eef3f7;
+  --button-background-hover: #dbe9f5;
+  --button-background-disabled: #e8edf2;
+  --button-border: 1px solid #8a98a8;
+  --button-border-disabled: 1px solid #b7c0ca;
+  --button-shadow: 0 1px 2px rgb(24 33 43 / 16%);
+  --button-color: #18212b;
+  --toggle-selected-bg: #1769aa;
+  --toggle-selected-text: #ffffff;
+  --panel-bg: #ffffff;
+  --panel-border: 1px solid #ccd5df;
+  --panel-radius: 0.375rem;
+  --panel-shadow: 0 2px 8px rgb(24 33 43 / 12%);
+  --panel-color: #18212b;
+  --toolbar-bg: #f5f8fa;
+  --toolbar-border: 0;
+  --toolbar-radius: 0;
+  --toolbar-shadow: none;
+  --toolbar-color: #18212b;
+  --sectionheader-bg: #eef3f7;
+  --sectionheader-shadow: none;
+  --sectionheader-color: #18212b;
+  --tabline-bg: #eef3f7;
+  --tab-bg-active: #ffffff;
+  --error-color: #b00020;
+  --cbx-o-border: 1px solid #647180;
+  --cbx-border-radius: 0.2rem;
+}