@htlkg/data 0.0.14 → 0.0.16

package/dist/server/index.d.ts

@@ -0,0 +1,47 @@
+import { AstroGlobal } from 'astro';
+import { ResourcesConfig } from 'aws-amplify';
+import { CommonPublicClientOptions, DefaultCommonClientOptions, V6ClientSSRCookies } from 'aws-amplify/api/internals';
+
+/**
+ * Server-side data client for Astro
+ *
+ * Provides a client generator similar to Next.js's generateServerClientUsingCookies
+ * using generateClientWithAmplifyInstance for proper server context integration.
+ */
+
+interface AstroCookiesClientParams {
+    cookies: AstroGlobal["cookies"];
+    request: AstroGlobal["request"];
+    config: ResourcesConfig;
+}
+/**
+ * Generates a server-side data client for Astro (matches Next.js implementation)
+ *
+ * This function creates a client that automatically wraps all operations in the Amplify server context,
+ * ensuring that authentication tokens from cookies are properly used.
+ *
+ * @example
+ * ```typescript
+ * import type { Schema } from '../amplify/data/resource';
+ * import { generateServerClientUsingCookies } from '@htlkg/data/client';
+ * import { parseAmplifyConfig } from 'aws-amplify/utils';
+ * import outputs from '../amplify_outputs.json';
+ *
+ * const amplifyConfig = parseAmplifyConfig(outputs);
+ *
+ * const client = generateServerClientUsingCookies<Schema>({
+ *   config: amplifyConfig,
+ *   cookies: Astro.cookies,
+ *   request: Astro.request,
+ * });
+ *
+ * // Use the client directly - operations are automatically wrapped
+ * const result = await client.models.User.list({
+ *   selectionSet: ['id', 'email'],
+ *   limit: 100,
+ * });
+ * ```
+ */
+declare function generateServerClientUsingCookies<T extends Record<any, any> = never, Options extends CommonPublicClientOptions & AstroCookiesClientParams = DefaultCommonClientOptions & AstroCookiesClientParams>(options: Options): V6ClientSSRCookies<T, Options>;
+
+export { generateServerClientUsingCookies };

package/dist/server/index.js

@@ -0,0 +1,59 @@
+// src/client/server.ts
+import {
+  generateClientWithAmplifyInstance
+} from "aws-amplify/api/internals";
+import { getAmplifyServerContext } from "aws-amplify/adapter-core/internals";
+import { createRunWithAmplifyServerContext, createLogger } from "@htlkg/core/amplify-astro-adapter";
+var log = createLogger("server-client");
+function generateServerClientUsingCookies(options) {
+  const runWithAmplifyServerContext = createRunWithAmplifyServerContext({
+    config: options.config
+  });
+  const resourcesConfig = options.config;
+  const getAmplify = (fn) => {
+    return runWithAmplifyServerContext({
+      astroServerContext: {
+        cookies: options.cookies,
+        request: options.request
+      },
+      operation: async (contextSpec) => {
+        const amplifyInstance = getAmplifyServerContext(contextSpec).amplify;
+        try {
+          const config = amplifyInstance.getConfig();
+          log.debug("Amplify config from instance:", {
+            hasAPI: !!config.API,
+            hasGraphQL: !!config.API?.GraphQL,
+            endpoint: config.API?.GraphQL?.endpoint,
+            defaultAuthMode: config.API?.GraphQL?.defaultAuthMode,
+            region: config.API?.GraphQL?.region
+          });
+          const session = await amplifyInstance.Auth.fetchAuthSession();
+          log.debug("Auth session:", {
+            hasTokens: !!session.tokens,
+            hasAccessToken: !!session.tokens?.accessToken,
+            hasIdToken: !!session.tokens?.idToken,
+            hasCredentials: !!session.credentials
+          });
+        } catch (e) {
+          log.debug("Error fetching session:", e.message);
+        }
+        return fn(amplifyInstance);
+      }
+    });
+  };
+  const {
+    cookies: _cookies,
+    request: _request,
+    config: _config,
+    ...params
+  } = options;
+  return generateClientWithAmplifyInstance({
+    amplify: getAmplify,
+    config: resourcesConfig,
+    ...params
+  });
+}
+export {
+  generateServerClientUsingCookies
+};
+//# sourceMappingURL=index.js.map

package/dist/server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/server.ts"],"sourcesContent":["/**\n * Server-side data client for Astro\n *\n * Provides a client generator similar to Next.js's generateServerClientUsingCookies\n * using generateClientWithAmplifyInstance for proper server context integration.\n */\n\nimport type { AstroGlobal } from \"astro\";\nimport type { ResourcesConfig } from \"aws-amplify\";\nimport {\n\tCommonPublicClientOptions,\n\tDefaultCommonClientOptions,\n\tV6ClientSSRCookies,\n\tgenerateClientWithAmplifyInstance,\n} from \"aws-amplify/api/internals\";\nimport { getAmplifyServerContext } from \"aws-amplify/adapter-core/internals\";\nimport { createRunWithAmplifyServerContext, createLogger } from \"@htlkg/core/amplify-astro-adapter\";\n\nconst log = createLogger('server-client');\n\ninterface AstroCookiesClientParams {\n\tcookies: AstroGlobal[\"cookies\"];\n\trequest: AstroGlobal[\"request\"];\n\tconfig: ResourcesConfig;\n}\n\n/**\n * Generates a server-side data client for Astro (matches Next.js implementation)\n *\n * This function creates a client that automatically wraps all operations in the Amplify server context,\n * ensuring that authentication tokens from cookies are properly used.\n *\n * @example\n * ```typescript\n * import type { Schema } from '../amplify/data/resource';\n * import { generateServerClientUsingCookies } from '@htlkg/data/client';\n * import { parseAmplifyConfig } from 'aws-amplify/utils';\n * import outputs from '../amplify_outputs.json';\n *\n * const amplifyConfig = parseAmplifyConfig(outputs);\n *\n * const client = generateServerClientUsingCookies<Schema>({\n *   config: amplifyConfig,\n *   cookies: Astro.cookies,\n *   request: Astro.request,\n * });\n *\n * // Use the client directly - operations are automatically wrapped\n * const result = await client.models.User.list({\n *   selectionSet: ['id', 'email'],\n *   limit: 100,\n * });\n * ```\n */\nexport function generateServerClientUsingCookies<\n\tT extends Record<any, any> = never,\n\tOptions extends CommonPublicClientOptions &\n\t\tAstroCookiesClientParams = DefaultCommonClientOptions &\n\t\tAstroCookiesClientParams,\n>(options: Options): V6ClientSSRCookies<T, Options> {\n\tconst runWithAmplifyServerContext = createRunWithAmplifyServerContext({\n\t\tconfig: options.config,\n\t});\n\n\tconst resourcesConfig = options.config;\n\n\t// This function reference gets passed down to InternalGraphQLAPI.ts.graphql\n\t// where this._graphql is passed in as the `fn` argument\n\t// causing it to always get invoked inside `runWithAmplifyServerContext`\n\tconst getAmplify = (fn: (amplify: any) => Promise<any>) => {\n\t\treturn runWithAmplifyServerContext({\n\t\t\tastroServerContext: {\n\t\t\t\tcookies: options.cookies,\n\t\t\t\trequest: options.request,\n\t\t\t},\n\t\t\toperation: async (contextSpec: any) => {\n\t\t\t\tconst amplifyInstance = getAmplifyServerContext(contextSpec).amplify;\n\t\t\t\t\n\t\t\t\t// Debug logging (only when DEBUG=true)\n\t\t\t\ttry {\n\t\t\t\t\tconst config = amplifyInstance.getConfig();\n\t\t\t\t\tlog.debug('Amplify config from instance:', {\n\t\t\t\t\t\thasAPI: !!config.API,\n\t\t\t\t\t\thasGraphQL: !!config.API?.GraphQL,\n\t\t\t\t\t\tendpoint: config.API?.GraphQL?.endpoint,\n\t\t\t\t\t\tdefaultAuthMode: config.API?.GraphQL?.defaultAuthMode,\n\t\t\t\t\t\tregion: config.API?.GraphQL?.region,\n\t\t\t\t\t});\n\t\t\t\t\t\n\t\t\t\t\tconst session = await amplifyInstance.Auth.fetchAuthSession();\n\t\t\t\t\tlog.debug('Auth session:', {\n\t\t\t\t\t\thasTokens: !!session.tokens,\n\t\t\t\t\t\thasAccessToken: !!session.tokens?.accessToken,\n\t\t\t\t\t\thasIdToken: !!session.tokens?.idToken,\n\t\t\t\t\t\thasCredentials: !!session.credentials,\n\t\t\t\t\t});\n\t\t\t\t} catch (e: any) {\n\t\t\t\t\tlog.debug('Error fetching session:', e.message);\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\treturn fn(amplifyInstance);\n\t\t\t},\n\t\t});\n\t};\n\n\tconst {\n\t\tcookies: _cookies,\n\t\trequest: _request,\n\t\tconfig: _config,\n\t\t...params\n\t} = options;\n\n\treturn generateClientWithAmplifyInstance<T, V6ClientSSRCookies<T, Options>>({\n\t\tamplify: getAmplify,\n\t\tconfig: resourcesConfig,\n\t\t...params,\n\t} as any);\n}\n"],"mappings":";AASA;AAAA,EAIC;AAAA,OACM;AACP,SAAS,+BAA+B;AACxC,SAAS,mCAAmC,oBAAoB;AAEhE,IAAM,MAAM,aAAa,eAAe;AAoCjC,SAAS,iCAKd,SAAkD;AACnD,QAAM,8BAA8B,kCAAkC;AAAA,IACrE,QAAQ,QAAQ;AAAA,EACjB,CAAC;AAED,QAAM,kBAAkB,QAAQ;AAKhC,QAAM,aAAa,CAAC,OAAuC;AAC1D,WAAO,4BAA4B;AAAA,MAClC,oBAAoB;AAAA,QACnB,SAAS,QAAQ;AAAA,QACjB,SAAS,QAAQ;AAAA,MAClB;AAAA,MACA,WAAW,OAAO,gBAAqB;AACtC,cAAM,kBAAkB,wBAAwB,WAAW,EAAE;AAG7D,YAAI;AACH,gBAAM,SAAS,gBAAgB,UAAU;AACzC,cAAI,MAAM,iCAAiC;AAAA,YAC1C,QAAQ,CAAC,CAAC,OAAO;AAAA,YACjB,YAAY,CAAC,CAAC,OAAO,KAAK;AAAA,YAC1B,UAAU,OAAO,KAAK,SAAS;AAAA,YAC/B,iBAAiB,OAAO,KAAK,SAAS;AAAA,YACtC,QAAQ,OAAO,KAAK,SAAS;AAAA,UAC9B,CAAC;AAED,gBAAM,UAAU,MAAM,gBAAgB,KAAK,iBAAiB;AAC5D,cAAI,MAAM,iBAAiB;AAAA,YAC1B,WAAW,CAAC,CAAC,QAAQ;AAAA,YACrB,gBAAgB,CAAC,CAAC,QAAQ,QAAQ;AAAA,YAClC,YAAY,CAAC,CAAC,QAAQ,QAAQ;AAAA,YAC9B,gBAAgB,CAAC,CAAC,QAAQ;AAAA,UAC3B,CAAC;AAAA,QACF,SAAS,GAAQ;AAChB,cAAI,MAAM,2BAA2B,EAAE,OAAO;AAAA,QAC/C;AAEA,eAAO,GAAG,eAAe;AAAA,MAC1B;AAAA,IACD,CAAC;AAAA,EACF;AAEA,QAAM;AAAA,IACL,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,EACJ,IAAI;AAEJ,SAAO,kCAAqE;AAAA,IAC3E,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,EACJ,CAAQ;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htlkg/data",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "exports": {
     ".": {
@@ -11,6 +11,10 @@
       "import": "./dist/client/index.js",
       "types": "./dist/client/index.d.ts"
     },
+    "./server": {
+      "import": "./dist/server/index.js",
+      "types": "./dist/server/index.d.ts"
+    },
     "./queries": {
       "import": "./dist/queries/index.js",
       "types": "./dist/queries/index.d.ts"

package/src/client/index.ts

@@ -3,14 +3,36 @@
  *
  * Provides both client-side and server-side GraphQL capabilities using AWS Amplify Data.
  * The server-side functions use the Amplify Astro adapter for proper SSR support.
+ *
+ * For server-side usage, use `Astro.locals.amplifyClient` (zero-config, injected by middleware).
  */
 
 import { generateClient as generateDataClient } from "aws-amplify/data";
+import { Amplify } from "aws-amplify";
 import type { ResourcesConfig } from "aws-amplify";
+import { generateServerClientUsingCookies } from "./server";
 
-// Re-export server-side client generation
+// Re-export server-side client generation (used internally by middleware)
 export { generateServerClientUsingCookies } from "./server";
 
+// Re-export proxy functions for authenticated client-side operations
+export {
+	mutate,
+	query,
+	hasErrors,
+	getErrorMessage,
+	type Operation,
+	type GraphQLResponse,
+	type ProxyOptions,
+} from "./proxy";
+
+/**
+ * Type for the server-side Amplify client (for use in type declarations)
+ * This represents the client returned by generateServerClientUsingCookies
+ */
+export type AmplifyServerClient<TSchema extends Record<string, unknown> = Record<string, unknown>> =
+	ReturnType<typeof generateServerClientUsingCookies<TSchema>>;
+
 // Singleton client instance for client-side fetching
 let sharedClientInstance: any = null;
 
@@ -134,12 +156,69 @@ export interface GenerateServerClientOptions {
  */
 export function generateServerClient<
 	TSchema extends Record<string, unknown> = Record<string, unknown>,
->(options?: GenerateServerClientOptions): ReturnType<typeof generateDataClient<TSchema>> {
+>(_options?: GenerateServerClientOptions): ReturnType<typeof generateDataClient<TSchema>> {
 	// Generate the client without authMode parameter
 	// When called within runWithAmplifyServerContext, it will automatically use the token provider
 	// from the context (which reads JWT tokens from cookies)
 	// The authMode should be specified per-operation, not at client creation
 	const client = generateDataClient<TSchema>();
-	
+
 	return client;
 }
+
+/**
+ * Context required for getting a server client in API routes
+ */
+export interface ServerClientContext {
+	locals: { amplifyClient?: any; user?: any };
+	cookies: any;
+	request: Request;
+}
+
+/**
+ * Get the server client from Astro context
+ *
+ * Uses locals.amplifyClient if available (set by middleware),
+ * otherwise creates a new client using Amplify's global config.
+ * No config parameter needed - uses the config set by the middleware.
+ *
+ * @example
+ * ```typescript
+ * import { getServerClient } from '@htlkg/data/client';
+ *
+ * export const POST: APIRoute = async (context) => {
+ *   const client = getServerClient(context);
+ *   if (!client) return new Response('Not authenticated', { status: 401 });
+ *
+ *   const result = await client.models.User.list();
+ * };
+ * ```
+ */
+export function getServerClient<TSchema extends Record<string, unknown> = Record<string, unknown>>(
+	context: ServerClientContext,
+): ReturnType<typeof generateServerClientUsingCookies<TSchema>> | null {
+	// Try to use client from middleware first
+	if (context.locals.amplifyClient) {
+		return context.locals.amplifyClient as ReturnType<typeof generateServerClientUsingCookies<TSchema>>;
+	}
+
+	// If no client from middleware and user is authenticated, create one using global Amplify config
+	if (context.locals.user) {
+		try {
+			// Get config from Amplify (set by middleware)
+			const amplifyConfig = Amplify.getConfig();
+			if (amplifyConfig) {
+				return generateServerClientUsingCookies<TSchema>({
+					config: amplifyConfig,
+					cookies: context.cookies,
+					request: context.request,
+				});
+			}
+		} catch (e) {
+			console.error('[getServerClient] Failed to get Amplify config:', e);
+		}
+	}
+
+	// No authentication available
+	return null;
+}

package/src/client/proxy.ts

@@ -0,0 +1,170 @@
+/**
+ * GraphQL Proxy Client
+ *
+ * Client-side helper for making authenticated GraphQL operations through
+ * the server-side proxy. This allows Vue components to perform mutations
+ * while keeping auth cookies httpOnly for security.
+ *
+ * @module @htlkg/data/proxy
+ */
+
+/**
+ * Valid GraphQL operations
+ */
+export type Operation = "create" | "update" | "delete" | "get" | "list";
+
+/**
+ * Response type from GraphQL operations
+ */
+export interface GraphQLResponse<T = any> {
+	data: T | null;
+	errors?: Array<{ message: string; [key: string]: any }>;
+}
+
+/**
+ * Options for proxy requests
+ */
+export interface ProxyOptions {
+	/** Custom API endpoint (default: /api/graphql) */
+	endpoint?: string;
+	/** Additional fetch options */
+	fetchOptions?: RequestInit;
+}
+
+/**
+ * Default proxy endpoint
+ */
+const DEFAULT_ENDPOINT = "/api/graphql";
+
+/**
+ * Execute a GraphQL mutation through the server proxy
+ *
+ * @param model - The model name (e.g., 'User', 'Brand', 'Account')
+ * @param operation - The operation type ('create', 'update', 'delete')
+ * @param data - The operation data/input
+ * @param options - Optional configuration
+ * @returns Promise with the operation result
+ *
+ * @example Create
+ * ```typescript
+ * const result = await mutate('User', 'create', {
+ *   email: 'user@example.com',
+ *   accountId: '123',
+ * });
+ * ```
+ *
+ * @example Update
+ * ```typescript
+ * const result = await mutate('User', 'update', {
+ *   id: 'user-id',
+ *   status: 'deleted',
+ *   deletedAt: new Date().toISOString(),
+ * });
+ * ```
+ *
+ * @example Delete
+ * ```typescript
+ * const result = await mutate('User', 'delete', { id: 'user-id' });
+ * ```
+ */
+export async function mutate<T = any>(
+	model: string,
+	operation: "create" | "update" | "delete",
+	data: Record<string, any>,
+	options?: ProxyOptions,
+): Promise<GraphQLResponse<T>> {
+	return proxyRequest<T>(model, operation, data, options);
+}
+
+/**
+ * Execute a GraphQL query through the server proxy
+ *
+ * @param model - The model name (e.g., 'User', 'Brand', 'Account')
+ * @param operation - The operation type ('get', 'list')
+ * @param data - The query parameters (id for get, filter/limit for list)
+ * @param options - Optional configuration
+ * @returns Promise with the query result
+ *
+ * @example Get by ID
+ * ```typescript
+ * const result = await query('User', 'get', { id: 'user-id' });
+ * ```
+ *
+ * @example List with filter
+ * ```typescript
+ * const result = await query('User', 'list', {
+ *   filter: { status: { eq: 'active' } },
+ *   limit: 100,
+ * });
+ * ```
+ */
+export async function query<T = any>(
+	model: string,
+	operation: "get" | "list",
+	data?: Record<string, any>,
+	options?: ProxyOptions,
+): Promise<GraphQLResponse<T>> {
+	return proxyRequest<T>(model, operation, data, options);
+}
+
+/**
+ * Internal function to make proxy requests
+ */
+async function proxyRequest<T>(
+	model: string,
+	operation: Operation,
+	data?: Record<string, any>,
+	options?: ProxyOptions,
+): Promise<GraphQLResponse<T>> {
+	const endpoint = options?.endpoint ?? DEFAULT_ENDPOINT;
+
+	try {
+		const response = await fetch(endpoint, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			credentials: "include", // Important: include cookies
+			...options?.fetchOptions,
+			body: JSON.stringify({ model, operation, data }),
+		});
+
+		const result: GraphQLResponse<T> = await response.json();
+
+		// Handle auth errors
+		if (response.status === 401) {
+			console.error("[GraphQL Proxy] Unauthorized - session may have expired");
+			// Optionally trigger a redirect to login
+			// window.location.href = '/login';
+		}
+
+		return result;
+	} catch (error) {
+		console.error("[GraphQL Proxy] Request failed:", error);
+		return {
+			data: null,
+			errors: [
+				{
+					message: error instanceof Error ? error.message : "Network error",
+				},
+			],
+		};
+	}
+}
+
+/**
+ * Helper to check if a response has errors
+ */
+export function hasErrors(response: GraphQLResponse): boolean {
+	return !!response.errors && response.errors.length > 0;
+}
+
+/**
+ * Helper to get the first error message from a response
+ */
+export function getErrorMessage(response: GraphQLResponse): string | null {
+	if (!response.errors || response.errors.length === 0) {
+		return null;
+	}
+	return response.errors[0].message;
+}

package/src/hooks/index.ts

@@ -19,3 +19,4 @@ export { useBrands, type UseBrandsOptions, type UseBrandsReturn } from "./useBra
 export { useAccounts, type UseAccountsOptions, type UseAccountsReturn } from "./useAccounts";
 export { useUsers, type UseUsersOptions, type UseUsersReturn } from "./useUsers";
 export { useProducts, type UseProductsOptions, type UseProductsReturn } from "./useProducts";
+export { useProductInstances, type UseProductInstancesOptions, type UseProductInstancesReturn } from "./useProductInstances";

package/src/hooks/useProductInstances.ts

@@ -0,0 +1,174 @@
+/**
+ * useProductInstances Hook
+ *
+ * Vue composable for fetching and managing product instance data with reactive state.
+ * Provides loading states, error handling, refetch capabilities, and CRUD operations.
+ */
+
+import type { Ref, ComputedRef } from "vue";
+import type { ProductInstance } from "@htlkg/core/types";
+import { createDataHook, type BaseHookOptions } from "./createDataHook";
+import { getSharedClient } from "../client";
+import {
+	createProductInstance,
+	updateProductInstance,
+	deleteProductInstance,
+	toggleProductInstanceEnabled,
+	type CreateProductInstanceInput,
+	type UpdateProductInstanceInput,
+} from "../mutations/productInstances";
+
+export interface UseProductInstancesOptions extends BaseHookOptions {
+	/** Filter criteria for product instances */
+	filter?: any;
+	/** Limit number of results */
+	limit?: number;
+	/** Auto-fetch on mount (default: true) */
+	autoFetch?: boolean;
+	/** Filter by brand ID */
+	brandId?: string;
+	/** Filter by account ID */
+	accountId?: string;
+	/** Filter by product ID */
+	productId?: string;
+	/** Only enabled instances */
+	enabledOnly?: boolean;
+}
+
+export interface UseProductInstancesReturn {
+	/** Reactive array of product instances */
+	instances: Ref<ProductInstance[]>;
+	/** Computed array of enabled instances only */
+	enabledInstances: ComputedRef<ProductInstance[]>;
+	/** Loading state */
+	loading: Ref<boolean>;
+	/** Error state */
+	error: Ref<Error | null>;
+	/** Refetch product instances */
+	refetch: () => Promise<void>;
+	/** Create a new product instance */
+	createInstance: (input: CreateProductInstanceInput) => Promise<ProductInstance>;
+	/** Update an existing product instance */
+	updateInstance: (input: UpdateProductInstanceInput) => Promise<ProductInstance>;
+	/** Delete a product instance */
+	deleteInstance: (id: string) => Promise<boolean>;
+	/** Toggle the enabled status of a product instance */
+	toggleEnabled: (id: string, enabled: boolean) => Promise<ProductInstance>;
+}
+
+/**
+ * Build filter from hook options
+ */
+function buildFilter(options: UseProductInstancesOptions): any {
+	let filter: any = options.filter || {};
+
+	if (options.brandId) {
+		filter = { ...filter, brandId: { eq: options.brandId } };
+	}
+
+	if (options.accountId) {
+		filter = { ...filter, accountId: { eq: options.accountId } };
+	}
+
+	if (options.productId) {
+		filter = { ...filter, productId: { eq: options.productId } };
+	}
+
+	if (options.enabledOnly) {
+		filter = { ...filter, enabled: { eq: true } };
+	}
+
+	return Object.keys(filter).length > 0 ? filter : undefined;
+}
+
+/**
+ * Internal hook created by factory
+ */
+const useProductInstancesInternal = createDataHook<
+	ProductInstance,
+	UseProductInstancesOptions,
+	{ enabledInstances: ProductInstance[] }
+>({
+	model: "ProductInstance",
+	dataPropertyName: "instances",
+	buildFilter,
+	computedProperties: {
+		enabledInstances: (instances) => instances.filter((i) => i.enabled),
+	},
+});
+
+/**
+ * Composable for fetching and managing product instances
+ *
+ * @example
+ * ```typescript
+ * import { useProductInstances } from '@htlkg/data/hooks';
+ *
+ * const { instances, loading, error, refetch } = useProductInstances();
+ * ```
+ *
+ * @example With filters
+ * ```typescript
+ * const { instances, enabledInstances, loading } = useProductInstances({
+ *   brandId: 'brand-123',
+ *   enabledOnly: true,
+ *   limit: 50
+ * });
+ * ```
+ *
+ * @example For a specific account
+ * ```typescript
+ * const { instances, loading } = useProductInstances({
+ *   accountId: 'account-456',
+ *   autoFetch: true
+ * });
+ * ```
+ */
+export function useProductInstances(options: UseProductInstancesOptions = {}): UseProductInstancesReturn {
+	const result = useProductInstancesInternal(options);
+
+	// CRUD methods using mutations from @htlkg/data/mutations
+	async function createInstance(input: CreateProductInstanceInput): Promise<ProductInstance> {
+		const client = getSharedClient();
+		const instance = await createProductInstance(client, input);
+		if (!instance) {
+			throw new Error("Failed to create product instance");
+		}
+		return instance;
+	}
+
+	async function updateInstance(input: UpdateProductInstanceInput): Promise<ProductInstance> {
+		const client = getSharedClient();
+		const instance = await updateProductInstance(client, input);
+		if (!instance) {
+			throw new Error("Failed to update product instance");
+		}
+		return instance;
+	}
+
+	async function deleteInstance(id: string): Promise<boolean> {
+		const client = getSharedClient();
+		return deleteProductInstance(client, id);
+	}
+
+	async function toggleEnabled(id: string, enabled: boolean): Promise<ProductInstance> {
+		const client = getSharedClient();
+		const instance = await toggleProductInstanceEnabled(client, id, enabled);
+		if (!instance) {
+			throw new Error("Failed to toggle product instance");
+		}
+		return instance;
+	}
+
+	return {
+		instances: result.instances as Ref<ProductInstance[]>,
+		enabledInstances: result.enabledInstances as ComputedRef<ProductInstance[]>,
+		loading: result.loading,
+		error: result.error,
+		refetch: result.refetch,
+		createInstance,
+		updateInstance,
+		deleteInstance,
+		toggleEnabled,
+	};
+}

package/src/index.ts

@@ -16,6 +16,17 @@ export {
 	type AstroAmplifyConfig,
 } from "./client";
 
+// Proxy exports (for authenticated client-side operations)
+export {
+	mutate,
+	query,
+	hasErrors,
+	getErrorMessage,
+	type Operation,
+	type GraphQLResponse,
+	type ProxyOptions,
+} from "./client";
+
 // Query exports
 export * from "./queries";