@shulya/liquid-glass 0.0.0-stage → 1.0.0

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,117 @@
 {
   "name": "@shulya/liquid-glass",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "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;