@c-technology/adaptive-ui 0.1.0 → 0.1.2

package/README.md

@@ -1,10 +1,10 @@
-# adaptive-ui
+# @c-technology/adaptive-ui
 
 > **Human-aware UI adaptation for modern web apps**
 
-adaptive-ui is a **TypeScript-first library** that helps your UI adapt to **users**, not just screen sizes.
+`@c-technology/adaptive-ui` is a **TypeScript-first library** that helps your UI adapt to **users**, not just screen sizes.
 
-Instead of only responding to `mobile`, `desktop`, or `tablet`, adaptive-ui reacts to **real conditions** like:
+Instead of only responding to `mobile`, `desktop`, or `tablet`, this library reacts to **real conditions** like:
 
 * slow network
 * low battery
@@ -16,15 +16,14 @@ This README explains everything **from zero**, assuming you are a beginner.
 
 ---
 
-## 🚨 The Problem (Why adaptive-ui Exists)
+## 🚨 The Problem (Why @c-technology/adaptive-ui Exists)
 
 Most web apps today:
 
 * look responsive
 * but feel frustrating
 
-Why?
-Because they adapt to **screens**, not **people**.
+Why? Because they adapt to **screens**, not **people**.
 
 Examples:
 
@@ -41,17 +40,17 @@ That approach:
 * is hard to reason about
 * creates messy code
 
-**adaptive-ui solves this by acting as a decision layer for your UI.**
+`@c-technology/adaptive-ui` solves this by acting as a **decision layer** for your UI.
 
 ---
 
-## 🧠 What adaptive-ui Is (And Is NOT)
+## 🧠 What It Is (And Is NOT)
 
 ### ✅ What it IS
 
 * a **logic layer** for UI behavior
 * a way to detect user context
-* a strategy system for adapting interfaces
+* a **strategy system** for adapting interfaces
 * framework-friendly (React, Next.js, etc.)
 
 ### ❌ What it is NOT
@@ -62,13 +61,11 @@ That approach:
 * ❌ an AI / ML system
 * ❌ a tracking library
 
-adaptive-ui **never renders UI**. It only helps you make better decisions.
+This library **never renders UI**. It only helps you make better decisions.
 
 ---
 
-## 🏗️ How adaptive-ui Works (Simple Explanation)
-
-adaptive-ui works in **three steps**:
+## 🏗️ How It Works (Simple Explanation)
 
 ### 1️⃣ Detect Signals
 
@@ -80,7 +77,7 @@ Signals are things like:
 
 ### 2️⃣ Build Context
 
-From signals, adaptive-ui builds a **context**, such as:
+From signals, it builds a **context**, such as:
 
 * `slow-network`
 * `impatient`
@@ -102,25 +99,24 @@ Example:
 ## 📦 Installation
 
 ```bash
-npm install adaptive-ui
+npm install @c-technology/adaptive-ui
 ```
 
 or
 
 ```bash
-pnpm install adaptive-ui
+pnpm add @c-technology/adaptive-ui
 ```
-
 or
 
 ```bash
-bun add adaptive-ui
+bun add @c-technology/adaptive-ui
 ```
 
 or
 
 ```bash
-yarn add adaptive-ui
+yarn add @c-technology/adaptive-ui
 ```
 
 ---
@@ -130,11 +126,9 @@ yarn add adaptive-ui
 ### Step 1: Import the hook
 
 ```ts
-import { useAdaptive } from "adaptive-ui";
+import { useAdaptive } from "@c-technology/adaptive-ui";
 ```
 
----
-
 ### Step 2: Use it inside a component
 
 ```tsx
@@ -151,25 +145,21 @@ This gives you access to the **adaptive engine**.
 
 ## 🧩 Context Detection (Beginner Friendly)
 
-adaptive-ui automatically detects some conditions.
-
-### Example: Check if user is impatient
+Example: Check if user is impatient
 
-```tsx
+```ts
 if (ui.has("impatient")) {
   console.log("User is impatient");
 }
 ```
 
-You don’t need to know *how* impatience is detected.
-
-That logic is handled internally.
+You don’t need to know how impatience is detected — the logic is handled internally.
 
 ---
 
 ## 🧠 Strategies (The Core Feature)
 
-Strategies define **how your UI should react**.
+Define **how your UI should react**.
 
 ### Example: Lite UI on slow network
 
@@ -182,12 +172,6 @@ ui.strategy({
 });
 ```
 
-This means:
-
-> If network is slow → switch to lite UI
-
----
-
 ### Example: Focus mode for impatient users
 
 ```ts
@@ -199,15 +183,13 @@ ui.strategy({
 });
 ```
 
----
-
 ### Run strategies
 
 ```ts
 ui.run();
 ```
 
-This applies all matching strategies.
+Applies all matching strategies.
 
 ---
 
@@ -225,19 +207,19 @@ This applies all matching strategies.
 }
 ```
 
-Your UI now adapts **without changing components**.
+Your UI adapts without changing components.
 
 ---
 
-## 🧪 Debugging (Very Important)
+## 🧪 Debugging
 
-To understand *why* the UI changed:
+Check why the UI changed:
 
 ```ts
 console.log(ui.explain());
 ```
 
-Output:
+Example output:
 
 ```ts
 {
@@ -246,25 +228,19 @@ Output:
 }
 ```
 
-This helps avoid confusion during development.
-
 ---
 
 ## ♿ Accessibility-Friendly by Design
 
-adaptive-ui helps you:
-
-* reduce motion
-* simplify layouts
-* increase clarity
-
-Without extra libraries.
+* reduces motion
+* simplifies layouts
+* increases clarity
 
 It reacts to **behavior**, not user labels.
 
 ---
 
-## 🚀 Why Use adaptive-ui?
+## 🚀 Why Use It?
 
 * cleaner UI logic
 * fewer edge cases
@@ -272,13 +248,9 @@ It reacts to **behavior**, not user labels.
 * no heavy setup
 * beginner-friendly
 
-Once added, it quietly improves your app.
-
 ---
 
-## 🧱 What adaptive-ui Will NEVER Do
-
-To keep trust high:
+## 🧱 What It Will NEVER Do
 
 * ❌ no analytics
 * ❌ no tracking
@@ -311,7 +283,7 @@ Not planned:
 
 > Good UI should feel invisible.
 
-adaptive-ui helps you build interfaces that **respect users**, without extra complexity.
+It helps you build interfaces that **respect users** without extra complexity.
 
 ---
 
@@ -329,4 +301,4 @@ If you are a beginner:
 * add one strategy
 * observe the effect
 
-adaptive-ui grows **with your understanding**, not against it.
+`@c-technology/adaptive-ui` grows with your understanding, not against it.

package/dist/index.cjs

@@ -114,3 +114,4 @@ function focusMode() {
   liteUI,
   useAdaptive
 });
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/adaptive.ts","../src/react.ts","../src/signals/network.ts","../src/signals/battery.ts","../src/signals/behavior.ts","../src/strategies.ts"],"sourcesContent":["export { AdaptiveUI } from \"./adaptive\";\nexport { useAdaptive } from \"./react\";\nexport * from \"./strategies\";\n","export type Context =\n  | \"slow-network\"\n  | \"low-battery\"\n  | \"impatient\"\n  | \"new-user\";\n\ntype Strategy = {\n  conditions: Context[];\n  actions: () => void;\n};\n\nexport class AdaptiveUI {\n  private context = new Set<Context>();\n  private strategies: Strategy[] = [];\n\n  addContext(ctx: Context) {\n    this.context.add(ctx);\n  }\n\n  has(ctx: Context) {\n    return this.context.has(ctx);\n  }\n\n  strategy(strategy: Strategy) {\n    this.strategies.push(strategy);\n  }\n\n  run() {\n    for (const s of this.strategies) {\n      if (s.conditions.every(c => this.context.has(c))) {\n        s.actions();\n      }\n    }\n  }\n\n  explain() {\n    return {\n      context: Array.from(this.context),\n      strategies: this.strategies.length,\n    };\n  }\n}\n","import { useEffect, useState } from \"react\";\nimport { AdaptiveUI } from \"./adaptive\";\nimport { detectSlowNetwork } from \"./signals/network\";\nimport { detectLowBattery } from \"./signals/battery\";\nimport { detectImpatience } from \"./signals/behavior\";\n\nexport function useAdaptive() {\n  const [adaptive] = useState(() => new AdaptiveUI());\n\n  useEffect(() => {\n    detectSlowNetwork(() => adaptive.addContext(\"slow-network\"));\n    detectLowBattery(() => adaptive.addContext(\"low-battery\"));\n    detectImpatience(() => adaptive.addContext(\"impatient\"));\n  }, []);\n\n  return adaptive;\n}\n","export function detectSlowNetwork(onDetect: () => void) {\n  const connection = (navigator as any).connection;\n  if (!connection) return;\n\n  if (\n    connection.effectiveType === \"2g\" ||\n    connection.effectiveType === \"slow-2g\"\n  ) {\n    onDetect();\n  }\n}\n","export async function detectLowBattery(onDetect: () => void) {\n  if (!(\"getBattery\" in navigator)) return;\n\n  const battery = await (navigator as any).getBattery();\n  if (battery.level < 0.2) {\n    onDetect();\n  }\n}\n","export function detectImpatience(onDetect: () => void) {\n  let clicks = 0;\n\n  window.addEventListener(\"click\", () => {\n    clicks++;\n    if (clicks >= 6) {\n      onDetect();\n    }\n  });\n}\n","export function liteUI() {\n  document.body.classList.add(\"ui-lite\");\n}\n\nexport function focusMode() {\n  document.body.classList.add(\"ui-focus\");\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACWO,IAAM,aAAN,MAAiB;AAAA,EAAjB;AACL,SAAQ,UAAU,oBAAI,IAAa;AACnC,SAAQ,aAAyB,CAAC;AAAA;AAAA,EAElC,WAAW,KAAc;AACvB,SAAK,QAAQ,IAAI,GAAG;AAAA,EACtB;AAAA,EAEA,IAAI,KAAc;AAChB,WAAO,KAAK,QAAQ,IAAI,GAAG;AAAA,EAC7B;AAAA,EAEA,SAAS,UAAoB;AAC3B,SAAK,WAAW,KAAK,QAAQ;AAAA,EAC/B;AAAA,EAEA,MAAM;AACJ,eAAW,KAAK,KAAK,YAAY;AAC/B,UAAI,EAAE,WAAW,MAAM,OAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG;AAChD,UAAE,QAAQ;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU;AACR,WAAO;AAAA,MACL,SAAS,MAAM,KAAK,KAAK,OAAO;AAAA,MAChC,YAAY,KAAK,WAAW;AAAA,IAC9B;AAAA,EACF;AACF;;;ACzCA,mBAAoC;;;ACA7B,SAAS,kBAAkB,UAAsB;AACtD,QAAM,aAAc,UAAkB;AACtC,MAAI,CAAC,WAAY;AAEjB,MACE,WAAW,kBAAkB,QAC7B,WAAW,kBAAkB,WAC7B;AACA,aAAS;AAAA,EACX;AACF;;;ACVA,eAAsB,iBAAiB,UAAsB;AAC3D,MAAI,EAAE,gBAAgB,WAAY;AAElC,QAAM,UAAU,MAAO,UAAkB,WAAW;AACpD,MAAI,QAAQ,QAAQ,KAAK;AACvB,aAAS;AAAA,EACX;AACF;;;ACPO,SAAS,iBAAiB,UAAsB;AACrD,MAAI,SAAS;AAEb,SAAO,iBAAiB,SAAS,MAAM;AACrC;AACA,QAAI,UAAU,GAAG;AACf,eAAS;AAAA,IACX;AAAA,EACF,CAAC;AACH;;;AHHO,SAAS,cAAc;AAC5B,QAAM,CAAC,QAAQ,QAAI,uBAAS,MAAM,IAAI,WAAW,CAAC;AAElD,8BAAU,MAAM;AACd,sBAAkB,MAAM,SAAS,WAAW,cAAc,CAAC;AAC3D,qBAAiB,MAAM,SAAS,WAAW,aAAa,CAAC;AACzD,qBAAiB,MAAM,SAAS,WAAW,WAAW,CAAC;AAAA,EACzD,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;;;AIhBO,SAAS,SAAS;AACvB,WAAS,KAAK,UAAU,IAAI,SAAS;AACvC;AAEO,SAAS,YAAY;AAC1B,WAAS,KAAK,UAAU,IAAI,UAAU;AACxC;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+type Context = "slow-network" | "low-battery" | "impatient" | "new-user";
+type Strategy = {
+    conditions: Context[];
+    actions: () => void;
+};
+declare class AdaptiveUI {
+    private context;
+    private strategies;
+    addContext(ctx: Context): void;
+    has(ctx: Context): boolean;
+    strategy(strategy: Strategy): void;
+    run(): void;
+    explain(): {
+        context: Context[];
+        strategies: number;
+    };
+}
+
+declare function useAdaptive(): AdaptiveUI;
+
+declare function liteUI(): void;
+declare function focusMode(): void;
+
+export { AdaptiveUI, focusMode, liteUI, useAdaptive };

package/dist/index.js

@@ -0,0 +1,87 @@
+// src/adaptive.ts
+var AdaptiveUI = class {
+  constructor() {
+    this.context = /* @__PURE__ */ new Set();
+    this.strategies = [];
+  }
+  addContext(ctx) {
+    this.context.add(ctx);
+  }
+  has(ctx) {
+    return this.context.has(ctx);
+  }
+  strategy(strategy) {
+    this.strategies.push(strategy);
+  }
+  run() {
+    for (const s of this.strategies) {
+      if (s.conditions.every((c) => this.context.has(c))) {
+        s.actions();
+      }
+    }
+  }
+  explain() {
+    return {
+      context: Array.from(this.context),
+      strategies: this.strategies.length
+    };
+  }
+};
+
+// src/react.ts
+import { useEffect, useState } from "react";
+
+// src/signals/network.ts
+function detectSlowNetwork(onDetect) {
+  const connection = navigator.connection;
+  if (!connection) return;
+  if (connection.effectiveType === "2g" || connection.effectiveType === "slow-2g") {
+    onDetect();
+  }
+}
+
+// src/signals/battery.ts
+async function detectLowBattery(onDetect) {
+  if (!("getBattery" in navigator)) return;
+  const battery = await navigator.getBattery();
+  if (battery.level < 0.2) {
+    onDetect();
+  }
+}
+
+// src/signals/behavior.ts
+function detectImpatience(onDetect) {
+  let clicks = 0;
+  window.addEventListener("click", () => {
+    clicks++;
+    if (clicks >= 6) {
+      onDetect();
+    }
+  });
+}
+
+// src/react.ts
+function useAdaptive() {
+  const [adaptive] = useState(() => new AdaptiveUI());
+  useEffect(() => {
+    detectSlowNetwork(() => adaptive.addContext("slow-network"));
+    detectLowBattery(() => adaptive.addContext("low-battery"));
+    detectImpatience(() => adaptive.addContext("impatient"));
+  }, []);
+  return adaptive;
+}
+
+// src/strategies.ts
+function liteUI() {
+  document.body.classList.add("ui-lite");
+}
+function focusMode() {
+  document.body.classList.add("ui-focus");
+}
+export {
+  AdaptiveUI,
+  focusMode,
+  liteUI,
+  useAdaptive
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/adaptive.ts","../src/react.ts","../src/signals/network.ts","../src/signals/battery.ts","../src/signals/behavior.ts","../src/strategies.ts"],"sourcesContent":["export type Context =\n  | \"slow-network\"\n  | \"low-battery\"\n  | \"impatient\"\n  | \"new-user\";\n\ntype Strategy = {\n  conditions: Context[];\n  actions: () => void;\n};\n\nexport class AdaptiveUI {\n  private context = new Set<Context>();\n  private strategies: Strategy[] = [];\n\n  addContext(ctx: Context) {\n    this.context.add(ctx);\n  }\n\n  has(ctx: Context) {\n    return this.context.has(ctx);\n  }\n\n  strategy(strategy: Strategy) {\n    this.strategies.push(strategy);\n  }\n\n  run() {\n    for (const s of this.strategies) {\n      if (s.conditions.every(c => this.context.has(c))) {\n        s.actions();\n      }\n    }\n  }\n\n  explain() {\n    return {\n      context: Array.from(this.context),\n      strategies: this.strategies.length,\n    };\n  }\n}\n","import { useEffect, useState } from \"react\";\nimport { AdaptiveUI } from \"./adaptive\";\nimport { detectSlowNetwork } from \"./signals/network\";\nimport { detectLowBattery } from \"./signals/battery\";\nimport { detectImpatience } from \"./signals/behavior\";\n\nexport function useAdaptive() {\n  const [adaptive] = useState(() => new AdaptiveUI());\n\n  useEffect(() => {\n    detectSlowNetwork(() => adaptive.addContext(\"slow-network\"));\n    detectLowBattery(() => adaptive.addContext(\"low-battery\"));\n    detectImpatience(() => adaptive.addContext(\"impatient\"));\n  }, []);\n\n  return adaptive;\n}\n","export function detectSlowNetwork(onDetect: () => void) {\n  const connection = (navigator as any).connection;\n  if (!connection) return;\n\n  if (\n    connection.effectiveType === \"2g\" ||\n    connection.effectiveType === \"slow-2g\"\n  ) {\n    onDetect();\n  }\n}\n","export async function detectLowBattery(onDetect: () => void) {\n  if (!(\"getBattery\" in navigator)) return;\n\n  const battery = await (navigator as any).getBattery();\n  if (battery.level < 0.2) {\n    onDetect();\n  }\n}\n","export function detectImpatience(onDetect: () => void) {\n  let clicks = 0;\n\n  window.addEventListener(\"click\", () => {\n    clicks++;\n    if (clicks >= 6) {\n      onDetect();\n    }\n  });\n}\n","export function liteUI() {\n  document.body.classList.add(\"ui-lite\");\n}\n\nexport function focusMode() {\n  document.body.classList.add(\"ui-focus\");\n}\n"],"mappings":";AAWO,IAAM,aAAN,MAAiB;AAAA,EAAjB;AACL,SAAQ,UAAU,oBAAI,IAAa;AACnC,SAAQ,aAAyB,CAAC;AAAA;AAAA,EAElC,WAAW,KAAc;AACvB,SAAK,QAAQ,IAAI,GAAG;AAAA,EACtB;AAAA,EAEA,IAAI,KAAc;AAChB,WAAO,KAAK,QAAQ,IAAI,GAAG;AAAA,EAC7B;AAAA,EAEA,SAAS,UAAoB;AAC3B,SAAK,WAAW,KAAK,QAAQ;AAAA,EAC/B;AAAA,EAEA,MAAM;AACJ,eAAW,KAAK,KAAK,YAAY;AAC/B,UAAI,EAAE,WAAW,MAAM,OAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG;AAChD,UAAE,QAAQ;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU;AACR,WAAO;AAAA,MACL,SAAS,MAAM,KAAK,KAAK,OAAO;AAAA,MAChC,YAAY,KAAK,WAAW;AAAA,IAC9B;AAAA,EACF;AACF;;;ACzCA,SAAS,WAAW,gBAAgB;;;ACA7B,SAAS,kBAAkB,UAAsB;AACtD,QAAM,aAAc,UAAkB;AACtC,MAAI,CAAC,WAAY;AAEjB,MACE,WAAW,kBAAkB,QAC7B,WAAW,kBAAkB,WAC7B;AACA,aAAS;AAAA,EACX;AACF;;;ACVA,eAAsB,iBAAiB,UAAsB;AAC3D,MAAI,EAAE,gBAAgB,WAAY;AAElC,QAAM,UAAU,MAAO,UAAkB,WAAW;AACpD,MAAI,QAAQ,QAAQ,KAAK;AACvB,aAAS;AAAA,EACX;AACF;;;ACPO,SAAS,iBAAiB,UAAsB;AACrD,MAAI,SAAS;AAEb,SAAO,iBAAiB,SAAS,MAAM;AACrC;AACA,QAAI,UAAU,GAAG;AACf,eAAS;AAAA,IACX;AAAA,EACF,CAAC;AACH;;;AHHO,SAAS,cAAc;AAC5B,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM,IAAI,WAAW,CAAC;AAElD,YAAU,MAAM;AACd,sBAAkB,MAAM,SAAS,WAAW,cAAc,CAAC;AAC3D,qBAAiB,MAAM,SAAS,WAAW,aAAa,CAAC;AACzD,qBAAiB,MAAM,SAAS,WAAW,WAAW,CAAC;AAAA,EACzD,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;;;AIhBO,SAAS,SAAS;AACvB,WAAS,KAAK,UAAU,IAAI,SAAS;AACvC;AAEO,SAAS,YAAY;AAC1B,WAAS,KAAK,UAAU,IAAI,UAAU;AACxC;","names":[]}

package/package.json

@@ -1,45 +1,45 @@
 {
-"name": "@c-technology/adaptive-ui",
-  "version": "0.1.0",
-  "description": "Human-aware UI adaptation layer for web apps",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-"files": [
-    "dist"
-],
-  "sideEffects": false,
-  "scripts": {
-    "build": "tsup src/index.ts --dts",
-    "dev": "tsup --watch",
-    "lint": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "react": ">=18"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.7",
-    "react": "^19.2.3",
-    "tsup": "^8.5.1",
-    "typescript": "^5.3.0"
-  },
-  "keywords": [
-    "adaptive-ui",
-    "ux",
-    "accessibility",
-    "frontend",
-    "react",
-    "typescript"
-  ],
-  "author": "Your Name",
-  "license": "MIT"
-}
+    "name": "@c-technology/adaptive-ui",
+    "version": "0.1.2",
+    "description": "Human-aware UI adaptation layer for web apps",
+    "type": "module",
+    "main": "./dist/index.cjs.js",
+    "module": "./dist/index.esm.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.esm.js",
+            "require": "./dist/index.cjs.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "sideEffects": false,
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "lint": "tsc --noEmit",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "react": ">=18"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.7",
+        "react": "^19.2.3",
+        "tsup": "^8.5.1",
+        "typescript": "^5.3.0"
+    },
+    "keywords": [
+        "adaptive-ui",
+        "ux",
+        "accessibility",
+        "frontend",
+        "react",
+        "typescript"
+    ],
+    "author": "Your Name",
+    "license": "MIT"
+}