fluxo-ui 0.0.1

package/logo.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#6366f1"/>
+      <stop offset="100%" stop-color="#9333ea"/>
+    </linearGradient>
+    <linearGradient id="shine" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.25"/>
+      <stop offset="50%" stop-color="#ffffff" stop-opacity="0"/>
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+  </defs>
+  <rect width="512" height="512" rx="96" fill="url(#bg)"/>
+  <rect width="512" height="512" rx="96" fill="url(#shine)"/>
+  <g transform="translate(256, 256)" filter="url(#glow)">
+    <!-- Ether diamond shape - upper -->
+    <polygon points="0,-160 100,-40 0,20 -100,-40" fill="#ffffff" opacity="0.95"/>
+    <!-- Ether diamond shape - lower -->
+    <polygon points="0,40 100,-40 0,160 -100,-40" fill="#ffffff" opacity="0.7"/>
+    <!-- Middle accent line -->
+    <polygon points="-110,-40 0,25 110,-40 0,-10" fill="#ffffff" opacity="0.45"/>
+  </g>
+</svg>

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "fluxo-ui",
+  "version": "0.0.1",
+  "description": "A comprehensive, accessible React component library built with TypeScript. Includes 60+ production-ready UI components, a custom state management solution, dependency injection container, 12 color themes, dark mode, and full keyboard navigation.",
+  "keywords": [
+    "react-component-library",
+    "react-ui-kit",
+    "design-system",
+    "data-grid",
+    "kanban-board",
+    "gantt-chart",
+    "pivot-table",
+    "json-editor",
+    "image-annotation",
+    "state-management",
+    "dependency-injection"
+  ],
+  "author": "Shridhar TL",
+  "license": "MIT",
+  "homepage": "https://fluxo-ui.utilsware.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shridhar-tl/fluxo-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shridhar-tl/fluxo-ui/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dnd": {
+      "optional": true
+    },
+    "react-dnd-html5-backend": {
+      "optional": true
+    },
+    "html2canvas": {
+      "optional": true
+    }
+  },
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/components/index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./hooks": {
+      "types": "./src/hooks/index.d.ts",
+      "import": "./hooks.js",
+      "require": "./hooks.cjs"
+    },
+    "./icons": {
+      "types": "./src/assets/icons.d.ts",
+      "import": "./icons.js",
+      "require": "./icons.cjs"
+    },
+    "./store": {
+      "types": "./src/store/index.d.ts",
+      "import": "./store.js",
+      "require": "./store.cjs"
+    },
+    "./store/middlewares": {
+      "types": "./src/store/middlewares/index.d.ts",
+      "import": "./store-middlewares.js",
+      "require": "./store-middlewares.cjs"
+    },
+    "./utils": {
+      "types": "./src/utils/lib.d.ts",
+      "import": "./utils.js",
+      "require": "./utils.cjs"
+    },
+    "./dnd": {
+      "types": "./src/components/drag-drop/index.d.ts",
+      "import": "./dnd.js",
+      "require": "./dnd.cjs"
+    },
+    "./draw": {
+      "types": "./src/components/canvas-draw/index.d.ts",
+      "import": "./draw.js",
+      "require": "./draw.cjs"
+    },
+    "./kanban": {
+      "types": "./src/components/kanban-board/index.d.ts",
+      "import": "./kanban.js",
+      "require": "./kanban.cjs"
+    },
+    "./styles": "./styles/components.css",
+    "./services": {
+      "types": "./src/services/index.d.ts",
+      "import": "./services.js",
+      "require": "./services.cjs"
+    },
+    "./vite-plugin": {
+      "types": "./src/plugins/vite/index.d.ts",
+      "import": "./vite-plugin.js",
+      "require": "./vite-plugin.cjs"
+    }
+  }
+}

package/services.cjs

@@ -0,0 +1,331 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./chunk-Do9eywBl.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/services/container.ts
+var buildArgsKey = (args) => {
+	if (args.length === 0) return "";
+	return args.map((a) => {
+		if (a === null) return "null";
+		if (a === void 0) return "undefined";
+		if (typeof a === "object") return JSON.stringify(a);
+		return String(a);
+	}).join("::");
+};
+var disposeInstance = (instance) => {
+	if (instance && typeof instance === "object" && "dispose" in instance) instance.dispose();
+};
+var ServiceContainer = class {
+	services = {};
+	paramServices = {};
+	resolver = { resolve: (name) => this.resolveInternal(name) };
+	registerSingleton(type, serviceName, shortName, opts) {
+		return this.register(type, serviceName, shortName, "singleton", opts);
+	}
+	registerScoped(type, serviceName, shortName, opts) {
+		return this.register(type, serviceName, shortName, "scoped", opts);
+	}
+	registerTransient(type, serviceName, shortName, opts) {
+		return this.register(type, serviceName, shortName, "transient", opts);
+	}
+	registerSingletonFactory(serviceName, shortName, factory, deps, opts) {
+		return this.registerFactory(serviceName, shortName, "singleton", factory, deps, opts);
+	}
+	registerScopedFactory(serviceName, shortName, factory, deps, opts) {
+		return this.registerFactory(serviceName, shortName, "scoped", factory, deps, opts);
+	}
+	registerTransientFactory(serviceName, shortName, factory, deps, opts) {
+		return this.registerFactory(serviceName, shortName, "transient", factory, deps, opts);
+	}
+	registerParameterized(serviceName, shortName, lifetime, factory, opts) {
+		const merged = {
+			retain: false,
+			...opts
+		};
+		this.paramServices[serviceName] = {
+			name: serviceName,
+			shortName,
+			factory,
+			lifetime,
+			retain: merged.retain,
+			instances: /* @__PURE__ */ new Map()
+		};
+		return this;
+	}
+	resolve(...serviceNames) {
+		const target = {};
+		this.inject(target, serviceNames);
+		return target;
+	}
+	resolveScoped(...serviceNames) {
+		const target = {};
+		this.inject(target, serviceNames, {});
+		return target;
+	}
+	resolveWithArgs(serviceName, ...args) {
+		return this.resolveParamInternal(serviceName, args);
+	}
+	createScope() {
+		const scopeStore = {};
+		return {
+			resolve: (name) => {
+				return this.resolveInternal(name, [], scopeStore);
+			},
+			resolveWithArgs: (name, ...args) => {
+				return this.resolveParamInternal(name, args, scopeStore);
+			},
+			dispose: () => {
+				Object.values(scopeStore).forEach(disposeInstance);
+				Object.keys(scopeStore).forEach((k) => delete scopeStore[k]);
+			}
+		};
+	}
+	has(name) {
+		return name in this.services || name in this.paramServices;
+	}
+	clearInstances() {
+		Object.values(this.services).forEach((svc) => {
+			if (svc.instance && !svc.retain) {
+				disposeInstance(svc.instance);
+				svc.instance = null;
+			}
+		});
+		Object.values(this.paramServices).forEach((svc) => {
+			if (!svc.retain) {
+				svc.instances.forEach(disposeInstance);
+				svc.instances.clear();
+			}
+		});
+	}
+	clearService(name) {
+		const svc = this.services[name];
+		if (svc?.instance) {
+			disposeInstance(svc.instance);
+			svc.instance = null;
+		}
+		const paramSvc = this.paramServices[name];
+		if (paramSvc) {
+			paramSvc.instances.forEach(disposeInstance);
+			paramSvc.instances.clear();
+		}
+	}
+	register(type, serviceName, shortName, lifetime, opts) {
+		const merged = {
+			retain: false,
+			...opts
+		};
+		const dependency = type.dependencies;
+		if (dependency && dependency.length > 0) this.validateNoCycles(serviceName, dependency);
+		const hadInstance = this.services[serviceName]?.instance;
+		this.services[serviceName] = {
+			name: serviceName,
+			shortName,
+			type,
+			lifetime,
+			retain: merged.retain,
+			dependencies: dependency && dependency.length > 0 ? dependency : void 0,
+			instance: null
+		};
+		if (hadInstance) this.clearNonRetainedInstances();
+		return this;
+	}
+	registerFactory(serviceName, shortName, lifetime, factory, deps, opts) {
+		const merged = {
+			retain: false,
+			...opts
+		};
+		if (deps && deps.length > 0) this.validateNoCycles(serviceName, deps);
+		const hadInstance = this.services[serviceName]?.instance;
+		this.services[serviceName] = {
+			name: serviceName,
+			shortName,
+			factory,
+			lifetime,
+			retain: merged.retain,
+			dependencies: deps && deps.length > 0 ? deps : void 0,
+			instance: null
+		};
+		if (hadInstance) this.clearNonRetainedInstances();
+		return this;
+	}
+	clearNonRetainedInstances() {
+		Object.values(this.services).forEach((svc) => {
+			if (svc.instance && !svc.retain) svc.instance = null;
+		});
+	}
+	getRef(name) {
+		if (!name || typeof name !== "string") throw new Error("Service name must be a non-empty string");
+		name = name.trim();
+		let svcObj = this.services[name];
+		if (!svcObj && !name.endsWith("Service")) svcObj = this.services[`${name}Service`];
+		if (!svcObj) throw new Error(`'${name}' is not a registered service`);
+		return svcObj;
+	}
+	resolveInternal(name, path = [], scope) {
+		const svcObj = this.getRef(name);
+		if (svcObj.lifetime === "singleton" && svcObj.instance) return svcObj.instance;
+		if (scope && scope[name]) return scope[name];
+		if (path.includes(name)) throw new Error(`Circular dependency detected: ${[...path, name].join(" -> ")}`);
+		const childPath = [...path, name];
+		let instance;
+		if (svcObj.factory) instance = svcObj.factory(this.resolver);
+		else if (svcObj.type) if (svcObj.dependencies && svcObj.dependencies.length > 0) {
+			const deps = svcObj.dependencies.map((depName) => {
+				if (svcObj.lifetime === "singleton") {
+					const depRef = this.getRef(depName);
+					if (depRef.lifetime !== "singleton") throw new Error(`Singleton service '${name}' cannot depend on ${depRef.lifetime} service '${depName}'`);
+				}
+				return this.resolveInternal(depName, childPath, scope);
+			});
+			instance = new svcObj.type(...deps);
+		} else instance = new svcObj.type();
+		else throw new Error(`Service '${name}' has no type or factory`);
+		if (svcObj.lifetime === "singleton") svcObj.instance = instance;
+		else if (svcObj.lifetime === "scoped" && scope) scope[name] = instance;
+		return instance;
+	}
+	resolveParamInternal(name, args, scope) {
+		const paramSvc = this.paramServices[name];
+		if (!paramSvc) throw new Error(`'${name}' is not a registered parameterized service`);
+		const argsKey = buildArgsKey(args);
+		if (paramSvc.lifetime === "singleton") {
+			const cached = paramSvc.instances.get(argsKey);
+			if (cached !== void 0) return cached;
+		}
+		if (paramSvc.lifetime === "scoped" && scope) {
+			const scopeKey = `${name}::${argsKey}`;
+			if (scope[scopeKey] !== void 0) return scope[scopeKey];
+		}
+		const instance = paramSvc.factory(this.resolver, ...args);
+		if (paramSvc.lifetime === "singleton") paramSvc.instances.set(argsKey, instance);
+		else if (paramSvc.lifetime === "scoped" && scope) scope[`${name}::${argsKey}`] = instance;
+		return instance;
+	}
+	inject(target, serviceNames, scope) {
+		const uniqueSet = new Set(serviceNames);
+		if (serviceNames.length !== uniqueSet.size) throw new Error(`Duplicate dependency names: ${JSON.stringify(serviceNames)}`);
+		serviceNames.forEach((name) => {
+			const svcObj = this.getRef(name);
+			target[svcObj.shortName] = this.resolveInternal(name, [], scope);
+		});
+	}
+	validateNoCycles(newName, deps) {
+		const visited = /* @__PURE__ */ new Set();
+		const walk = (depList, path) => {
+			for (const dep of depList) {
+				if (dep === newName) throw new Error(`Circular dependency detected: ${[...path, dep].join(" -> ")}`);
+				if (visited.has(dep)) continue;
+				visited.add(dep);
+				const depDescriptor = this.services[dep];
+				if (depDescriptor?.dependencies) walk(depDescriptor.dependencies, [...path, dep]);
+			}
+		};
+		walk(deps, [newName]);
+	}
+};
+function createContainer() {
+	return new ServiceContainer();
+}
+//#endregion
+//#region src/services/react.tsx
+var ServiceContext = (0, react.createContext)(null);
+var ScopeContext = (0, react.createContext)(null);
+function ServiceProvider({ container, children, defaultParams }) {
+	const value = (0, react.useMemo)(() => ({
+		container,
+		defaultParams: defaultParams || {}
+	}), [container, defaultParams]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServiceContext.Provider, {
+		value,
+		children
+	});
+}
+function ServiceScope({ children }) {
+	const ctx = (0, react.useContext)(ServiceContext);
+	if (!ctx) throw new Error("ServiceScope must be used within a ServiceProvider");
+	const scopeRef = (0, react.useRef)(null);
+	if (!scopeRef.current) scopeRef.current = ctx.container.createScope();
+	(0, react.useEffect)(() => {
+		return () => {
+			scopeRef.current?.dispose();
+			scopeRef.current = null;
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScopeContext.Provider, {
+		value: scopeRef.current,
+		children
+	});
+}
+function useContainerCtx() {
+	const ctx = (0, react.useContext)(ServiceContext);
+	if (!ctx) throw new Error("useService must be used within a ServiceProvider");
+	return ctx;
+}
+function useService(...serviceNames) {
+	const { container } = useContainerCtx();
+	const scope = (0, react.useContext)(ScopeContext);
+	return (0, react.useMemo)(() => {
+		if (scope) {
+			const result = {};
+			serviceNames.forEach((name) => {
+				result[name] = scope.resolve(name);
+			});
+			return result;
+		}
+		return container.resolve(...serviceNames);
+	}, [
+		container,
+		scope,
+		...serviceNames
+	]);
+}
+function useServiceWithArgs(serviceName, ...args) {
+	const { container, defaultParams } = useContainerCtx();
+	const scope = (0, react.useContext)(ScopeContext);
+	const effectiveArgs = args.length > 0 ? args : defaultParams[serviceName] || [];
+	return (0, react.useMemo)(() => {
+		if (scope) return scope.resolveWithArgs(serviceName, ...effectiveArgs);
+		return container.resolveWithArgs(serviceName, ...effectiveArgs);
+	}, [
+		container,
+		serviceName,
+		scope,
+		...effectiveArgs
+	]);
+}
+function useScope() {
+	const scope = (0, react.useContext)(ScopeContext);
+	if (!scope) throw new Error("useScope must be used within a ServiceScope");
+	return scope;
+}
+function useContainer() {
+	return useContainerCtx().container;
+}
+function withServices(Component, config) {
+	const displayName = Component.displayName || Component.name || "Component";
+	function WrappedComponent(props) {
+		const { container } = useContainerCtx();
+		const resolved = config.services ? container.resolve(...config.services) : {};
+		const paramResolved = {};
+		if (config.parameterized) Object.entries(config.parameterized).forEach(([name, args]) => {
+			paramResolved[name] = container.resolveWithArgs(name, ...args);
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			...resolved,
+			...paramResolved,
+			...props
+		});
+	}
+	WrappedComponent.displayName = `withServices(${displayName})`;
+	return WrappedComponent;
+}
+//#endregion
+exports.ServiceContainer = ServiceContainer;
+exports.ServiceProvider = ServiceProvider;
+exports.ServiceScope = ServiceScope;
+exports.createContainer = createContainer;
+exports.useContainer = useContainer;
+exports.useScope = useScope;
+exports.useService = useService;
+exports.useServiceWithArgs = useServiceWithArgs;
+exports.withServices = withServices;

package/services.d.ts

@@ -0,0 +1 @@
+export {}