@shulya/liquid-glass 0.0.0-stage → 1.0.1

package/example/src/styles.css

@@ -0,0 +1,158 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#root {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ebedf2;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+.stage-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* Interactive Draggable LiquidGlass Elements */
+.glass-body {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  cursor: grab;
+  touch-action: none;
+  will-change: left, top;
+  box-shadow: 2px 10px 18px rgba(0, 0, 0, 0.12);
+}
+
+.glass-body:active {
+  cursor: grabbing;
+}
+
+/* Bottom Control Shelf */
+.shelf-bar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 10px 20px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.03);
+  color: #1c1c1e;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 95vw;
+}
+
+.ctrl {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 110px;
+}
+
+.ctrl-head {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: #636366;
+}
+
+.ctrl-val {
+  color: #007aff;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.1);
+  outline: none;
+  cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 1.5px solid rgba(0, 122, 255, 0.6);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
+}
+
+.ctrl-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #3a3a3c;
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.ctrl-toggle input {
+  accent-color: #007aff;
+  width: 13px;
+  height: 13px;
+  cursor: pointer;
+}
+
+.fps-tag {
+  font-size: 10.5px;
+  font-weight: 700;
+  color: #30d158;
+  background: rgba(48, 209, 88, 0.12);
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 720px) {
+  .shelf-bar {
+    gap: 10px;
+    padding: 10px 14px;
+    border-radius: 20px;
+    bottom: 12px;
+  }
+
+  .ctrl {
+    min-width: 96px;
+  }
+}

package/example/vite.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@shulya/liquid-glass/react': path.resolve(__dirname, '../dist/react.mjs'),
+      '@shulya/liquid-glass': path.resolve(__dirname, '../dist/index.mjs'),
+      'liquid-glass-ui/react': path.resolve(__dirname, '../dist/react.mjs'),
+      'liquid-glass-ui': path.resolve(__dirname, '../dist/index.mjs')
+    }
+  },
+  server: {
+    port: 5173,
+    open: false
+  }
+});

package/package.json

@@ -1,6 +1,116 @@
 {
   "name": "@shulya/liquid-glass",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.1",
+  "description": "High-performance, zero-WebGL Liquid Glass optical UI engine with pre-computed empirical lookup tables for React, Vue, Svelte, Angular, SolidJS, and Vanilla JS.",
+  "author": "Shulya (https://shulya.tech)",
+  "homepage": "https://liquid.shulya.tech",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shulya-tech/liquid-glass.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shulya-tech/liquid-glass/issues"
+  },
+  "keywords": [
+    "liquid-glass",
+    "glassmorphism",
+    "optical-ui",
+    "refraction",
+    "apple-glass",
+    "react",
+    "vue",
+    "svelte",
+    "angular",
+    "solidjs",
+    "zero-webgl"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./types/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.cjs"
+    },
+    "./vue": {
+      "types": "./types/vue.d.ts",
+      "import": "./dist/vue.mjs",
+      "require": "./dist/vue.cjs"
+    },
+    "./svelte": {
+      "types": "./types/svelte.d.ts",
+      "import": "./dist/svelte.mjs",
+      "require": "./dist/svelte.cjs"
+    },
+    "./angular": {
+      "types": "./types/angular.d.ts",
+      "import": "./dist/angular.mjs",
+      "require": "./dist/angular.cjs"
+    },
+    "./solid": {
+      "types": "./types/solid.d.ts",
+      "import": "./dist/solid.mjs",
+      "require": "./dist/solid.cjs"
+    },
+    "./tables": {
+      "import": "./dist/tables.mjs",
+      "require": "./dist/tables.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types",
+    "example/index.html",
+    "example/package.json",
+    "example/vite.config.js",
+    "example/README.md",
+    "example/src",
+    "tables/optical_calibration_matrix.xlsx",
+    "tables/optical_calibration_matrix.csv",
+    "screen.png",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "example": "cd example && npm install && npm run dev",
+    "prepublishOnly": "node build.mjs"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=14.0.0",
+    "react": ">=17.0.0",
+    "solid-js": ">=1.5.0",
+    "svelte": ">=3.0.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "sideEffects": false,
+  "license": "MIT"
+}

package/src/angular.js

@@ -0,0 +1,76 @@
+/**
+ * Angular Adapter for Liquid Glass UI
+ */
+import { LiquidGlassController, OPTICAL_DEFAULTS, OPTICAL_LIMITS } from './core.js';
+
+/**
+ * Framework-agnostic Angular Directive Controller Class
+ * Can be used directly with Angular's @Directive({ selector: '[liquidGlass]', standalone: true })
+ * or instantiated via ElementRef in any Angular component.
+ */
+export class LiquidGlassDirective {
+  /**
+   * @param {{ nativeElement: HTMLElement } | HTMLElement} elementRef
+   */
+  constructor(elementRef) {
+    this.el = elementRef && elementRef.nativeElement ? elementRef.nativeElement : elementRef;
+    this.rim = OPTICAL_DEFAULTS.rim;
+    this.ior = OPTICAL_DEFAULTS.ior;
+    this.height = OPTICAL_DEFAULTS.height;
+    this.frosted = OPTICAL_DEFAULTS.frosted;
+    this.fusion = OPTICAL_DEFAULTS.fusion;
+    this.borderRadius = null;
+    this.liquidGlass = null;
+    this._controller = null;
+  }
+
+  ngOnInit() {
+    const opts =
+      typeof this.liquidGlass === 'object' && this.liquidGlass !== null
+        ? this.liquidGlass
+        : {
+            rim: this.rim,
+            ior: this.ior,
+            height: this.height,
+            frosted: this.frosted,
+            fusion: this.fusion,
+            borderRadius: this.borderRadius
+          };
+    this._controller = new LiquidGlassController(this.el, opts);
+  }
+
+  ngOnChanges() {
+    if (this._controller) {
+      const opts =
+        typeof this.liquidGlass === 'object' && this.liquidGlass !== null
+          ? this.liquidGlass
+          : {
+              rim: this.rim,
+              ior: this.ior,
+              height: this.height,
+              frosted: this.frosted,
+              fusion: this.fusion,
+              borderRadius: this.borderRadius
+            };
+      this._controller.update(opts);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this._controller) {
+      this._controller.destroy();
+      this._controller = null;
+    }
+  }
+}
+
+/**
+ * Helper to attach LiquidGlass directly inside Angular ngAfterViewInit
+ */
+export function attachAngularLiquidGlass(elementRef, options = {}) {
+  const el = elementRef && elementRef.nativeElement ? elementRef.nativeElement : elementRef;
+  return new LiquidGlassController(el, options);
+}
+
+export { LiquidGlassController, OPTICAL_DEFAULTS, OPTICAL_LIMITS };
+export default LiquidGlassDirective;