@htlkg/astro 0.0.2 → 0.0.4

package/dist/index.js

@@ -1,10 +1,30 @@
 import {
   htlkg
-} from "./chunk-IWK5QCVD.js";
+} from "./chunk-6CW4SVDI.js";
 import {
   isAuthenticatedUser
-} from "./chunk-Z2ZAL7KX.js";
-import "./chunk-ZQ4XMJH7.js";
+} from "./chunk-UBF5F2RG.js";
+import {
+  applyClientFilters,
+  buildGraphQLFilter,
+  buildListQueryString,
+  buildListUrl,
+  getFilterCount,
+  hasActiveFilters,
+  mergeListParams,
+  paginateItems,
+  parseListParams,
+  processListData,
+  sortItems
+} from "./chunk-2GML443T.js";
+import {
+  chunkArray,
+  filterItems,
+  generateNestedPaths,
+  generatePaginatedPaths,
+  generateStaticPaths,
+  groupItems
+} from "./chunk-33R4URZV.js";
 import {
   createHydrationScript,
   createHydrationScripts,
@@ -25,40 +45,132 @@ import {
   setCacheControl,
   setResponseHeaders
 } from "./chunk-WNMPTDCR.js";
-import {
-  chunkArray,
-  filterItems,
-  generateNestedPaths,
-  generatePaginatedPaths,
-  generateStaticPaths,
-  groupItems,
-  sortItems
-} from "./chunk-33R4URZV.js";
+
+// src/factories/createListPage.ts
+function generateBreadcrumbs(pageId, title) {
+  return [
+    { label: "Admin", href: "/admin" },
+    { label: title }
+  ];
+}
+async function createListPage(astro, config) {
+  const {
+    title,
+    description,
+    pageId,
+    breadcrumbs,
+    fetchFn,
+    transform,
+    store,
+    relatedStores,
+    searchableFields,
+    filterableFields = [],
+    defaultSort,
+    defaultPageSize = 25,
+    fetchLimit = 1e3
+  } = config;
+  const paramConfig = {
+    defaultPageSize,
+    defaultSort,
+    searchableFields,
+    filterableFields
+  };
+  const params = parseListParams(astro.url, paramConfig);
+  const graphqlFilter = buildGraphQLFilter(params.filters, filterableFields, {
+    search: params.search,
+    searchFields: searchableFields
+  });
+  let allItems = [];
+  let nextToken = void 0;
+  do {
+    const result = await fetchFn({
+      filter: graphqlFilter,
+      limit: fetchLimit,
+      nextToken: nextToken ?? void 0
+    });
+    const data = result.data ?? [];
+    allItems = allItems.concat(data);
+    nextToken = result.nextToken;
+  } while (nextToken);
+  if (transform) {
+    allItems = allItems.map(transform);
+  }
+  allItems = applyClientFilters(allItems, params.filters, filterableFields, {
+    search: params.search,
+    searchFields: searchableFields
+  });
+  allItems = sortItems(allItems, params.sortKey, params.sortOrder);
+  const { paginatedItems, totalItems, totalPages, currentPage, pageSize } = paginateItems(
+    allItems,
+    params.page,
+    params.pageSize
+  );
+  store.set(paginatedItems);
+  if (relatedStores) {
+    await Promise.all(
+      Object.entries(relatedStores).map(async ([, config2]) => {
+        const data = await config2.fetch();
+        config2.store.set(data);
+      })
+    );
+  }
+  return {
+    layoutProps: {
+      title,
+      description,
+      currentPage: pageId,
+      breadcrumbs: breadcrumbs ?? generateBreadcrumbs(pageId, title)
+    },
+    initialState: {
+      currentPage,
+      pageSize,
+      sortKey: params.sortKey,
+      sortOrder: params.sortOrder,
+      totalItems,
+      totalPages,
+      filters: params.filters,
+      search: params.search
+    },
+    items: paginatedItems,
+    allItems,
+    params
+  };
+}
 export {
+  applyClientFilters,
+  buildGraphQLFilter,
+  buildListQueryString,
+  buildListUrl,
   chunkArray,
   createHydrationScript,
   createHydrationScripts,
   createIslandProps,
+  createListPage,
   deserializeFromHydration,
   filterItems,
   generateNestedPaths,
   generatePaginatedPaths,
   generateStaticPaths,
   getClientIP,
+  getFilterCount,
   getHydratedData,
   getQueryParams,
   getRequestHeaders,
   getServerData,
   groupItems,
+  hasActiveFilters,
   htlkg,
   isAuthenticatedUser,
   isMobileDevice,
   isServerSide,
+  mergeListParams,
   mergeProps,
+  paginateItems,
+  parseListParams,
+  processListData,
   serializeForHydration,
   setCacheControl,
   setResponseHeaders,
-  shouldHydrate,
-  sortItems
+  shouldHydrate
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/factories/createListPage.ts"],"sourcesContent":["/**\n * List Page Factory\n *\n * Factory function for creating standardized list pages with automatic\n * data fetching, filtering, sorting, and pagination.\n */\n\nimport type { AstroGlobal } from \"astro\";\nimport type { WritableAtom } from \"nanostores\";\n\nimport {\n\tparseListParams,\n\ttype ListParams,\n\ttype ListParamConfig,\n\ttype FilterFieldConfig,\n} from \"../utils/params\";\nimport {\n\tbuildGraphQLFilter,\n\tapplyClientFilters,\n\tsortItems,\n\tpaginateItems,\n} from \"../utils/filters\";\n\n/**\n * Breadcrumb item\n */\nexport interface BreadcrumbItem {\n\tlabel: string;\n\thref?: string;\n}\n\n/**\n * Layout props returned by the factory\n */\nexport interface LayoutProps {\n\ttitle: string;\n\tdescription?: string;\n\tcurrentPage: string;\n\tbreadcrumbs: BreadcrumbItem[];\n}\n\n/**\n * Table initial state\n */\nexport interface TableInitialState {\n\tcurrentPage: number;\n\tpageSize: number;\n\tsortKey: string;\n\tsortOrder: \"asc\" | \"desc\";\n\ttotalItems: number;\n\ttotalPages: number;\n\tfilters: Record<string, any>;\n\tsearch?: string;\n}\n\n/**\n * Related store configuration\n */\nexport interface RelatedStoreConfig<T = any> {\n\tstore: WritableAtom<T[]>;\n\tfetch: () => Promise<T[]>;\n}\n\n/**\n * Configuration for createListPage\n */\nexport interface ListPageConfig<T> {\n\t// Page metadata\n\t/** Page title */\n\ttitle: string;\n\t/** Page description */\n\tdescription?: string;\n\t/** Page identifier (for sidebar active state) */\n\tpageId: string;\n\t/** Custom breadcrumbs (auto-generated if not provided) */\n\tbreadcrumbs?: BreadcrumbItem[];\n\n\t// Data fetching\n\t/** Fetch function that retrieves data */\n\tfetchFn: (params: {\n\t\tfilter: any;\n\t\tlimit?: number;\n\t\tnextToken?: string;\n\t}) => Promise<{ data: T[]; nextToken?: string | null }>;\n\n\t// Data handling\n\t/** Transform function to apply to fetched data */\n\ttransform?: (item: any) => T;\n\t/** Main store to set with data */\n\tstore: WritableAtom<T[]>;\n\t/** Related stores to populate */\n\trelatedStores?: Record<string, RelatedStoreConfig>;\n\n\t// Filtering/sorting config\n\t/** Searchable field keys */\n\tsearchableFields?: string[];\n\t/** Filterable field configurations */\n\tfilterableFields?: FilterFieldConfig[];\n\t/** Sortable field keys (all by default) */\n\tsortableFields?: string[];\n\t/** Default sort configuration */\n\tdefaultSort?: { key: string; order: \"asc\" | \"desc\" };\n\t/** Default page size */\n\tdefaultPageSize?: number;\n\t/** Maximum items to fetch from API */\n\tfetchLimit?: number;\n}\n\n/**\n * Result from createListPage\n */\nexport interface ListPageResult<T> {\n\t/** Props to spread to Layout component */\n\tlayoutProps: LayoutProps;\n\t/** Initial state for table component */\n\tinitialState: TableInitialState;\n\t/** Processed items (paginated) */\n\titems: T[];\n\t/** All items (pre-pagination, for client-side operations) */\n\tallItems: T[];\n\t/** Parsed URL parameters */\n\tparams: ListParams;\n}\n\n/**\n * Default breadcrumb generator\n */\nfunction generateBreadcrumbs(pageId: string, title: string): BreadcrumbItem[] {\n\treturn [\n\t\t{ label: \"Admin\", href: \"/admin\" },\n\t\t{ label: title },\n\t];\n}\n\n/**\n * Create a list page with automatic data handling\n *\n * This factory handles:\n * - URL parameter parsing (page, pageSize, sortKey, sortOrder, filters)\n * - Data fetching with GraphQL filter building\n * - Data transformation\n * - Client-side filtering (for computed fields)\n * - Sorting\n * - Pagination\n * - Store population\n *\n * @example\n * ```astro\n * ---\n * import { createListPage } from '@htlkg/astro/factories';\n * import { $accounts } from '@/stores/accounts';\n *\n * const { layoutProps, initialState, items } = await createListPage(Astro, {\n *   title: 'Accounts',\n *   pageId: 'accounts',\n *   store: $accounts,\n *\n *   fetchFn: async ({ filter }) => {\n *     const client = getServerClient(Astro);\n *     return await client.models.Account.list({ filter });\n *   },\n *\n *   transform: (account) => ({\n *     id: account.id,\n *     name: account.name,\n *     brandCount: account.brands?.length ?? 0,\n *   }),\n *\n *   filterableFields: [\n *     { key: 'name', type: 'text', graphql: true },\n *     { key: 'status', type: 'select', graphql: true, options: ['active', 'inactive'] },\n *   ],\n *\n *   defaultSort: { key: 'name', order: 'asc' },\n * });\n * ---\n *\n * <Layout {...layoutProps}>\n *   <AccountsTable client:load initialState={initialState} />\n * </Layout>\n * ```\n */\nexport async function createListPage<T extends Record<string, any>>(\n\tastro: AstroGlobal,\n\tconfig: ListPageConfig<T>\n): Promise<ListPageResult<T>> {\n\tconst {\n\t\ttitle,\n\t\tdescription,\n\t\tpageId,\n\t\tbreadcrumbs,\n\t\tfetchFn,\n\t\ttransform,\n\t\tstore,\n\t\trelatedStores,\n\t\tsearchableFields,\n\t\tfilterableFields = [],\n\t\tdefaultSort,\n\t\tdefaultPageSize = 25,\n\t\tfetchLimit = 1000,\n\t} = config;\n\n\t// 1. Parse URL parameters\n\tconst paramConfig: ListParamConfig = {\n\t\tdefaultPageSize,\n\t\tdefaultSort,\n\t\tsearchableFields,\n\t\tfilterableFields,\n\t};\n\tconst params = parseListParams(astro.url, paramConfig);\n\n\t// 2. Build GraphQL filter from URL params\n\tconst graphqlFilter = buildGraphQLFilter(params.filters, filterableFields, {\n\t\tsearch: params.search,\n\t\tsearchFields: searchableFields,\n\t});\n\n\t// 3. Fetch data with pagination\n\tlet allItems: T[] = [];\n\tlet nextToken: string | null | undefined = undefined;\n\n\tdo {\n\t\tconst result = await fetchFn({\n\t\t\tfilter: graphqlFilter,\n\t\t\tlimit: fetchLimit,\n\t\t\tnextToken: nextToken ?? undefined,\n\t\t});\n\n\t\tconst data = result.data ?? [];\n\t\tallItems = allItems.concat(data);\n\t\tnextToken = result.nextToken;\n\t} while (nextToken);\n\n\t// 4. Transform data if needed\n\tif (transform) {\n\t\tallItems = allItems.map(transform);\n\t}\n\n\t// 5. Apply client-side filtering (for computed fields not in GraphQL)\n\tallItems = applyClientFilters(allItems, params.filters, filterableFields, {\n\t\tsearch: params.search,\n\t\tsearchFields: searchableFields,\n\t});\n\n\t// 6. Sort\n\tallItems = sortItems(allItems, params.sortKey, params.sortOrder);\n\n\t// 7. Paginate\n\tconst { paginatedItems, totalItems, totalPages, currentPage, pageSize } = paginateItems(\n\t\tallItems,\n\t\tparams.page,\n\t\tparams.pageSize\n\t);\n\n\t// 8. Set main store\n\tstore.set(paginatedItems);\n\n\t// 9. Fetch and set related stores\n\tif (relatedStores) {\n\t\tawait Promise.all(\n\t\t\tObject.entries(relatedStores).map(async ([, config]) => {\n\t\t\t\tconst data = await config.fetch();\n\t\t\t\tconfig.store.set(data);\n\t\t\t})\n\t\t);\n\t}\n\n\t// 10. Build result\n\treturn {\n\t\tlayoutProps: {\n\t\t\ttitle,\n\t\t\tdescription,\n\t\t\tcurrentPage: pageId,\n\t\t\tbreadcrumbs: breadcrumbs ?? generateBreadcrumbs(pageId, title),\n\t\t},\n\t\tinitialState: {\n\t\t\tcurrentPage,\n\t\t\tpageSize,\n\t\t\tsortKey: params.sortKey,\n\t\t\tsortOrder: params.sortOrder,\n\t\t\ttotalItems,\n\t\t\ttotalPages,\n\t\t\tfilters: params.filters,\n\t\t\tsearch: params.search,\n\t\t},\n\t\titems: paginatedItems,\n\t\tallItems,\n\t\tparams,\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HA,SAAS,oBAAoB,QAAgB,OAAiC;AAC7E,SAAO;AAAA,IACN,EAAE,OAAO,SAAS,MAAM,SAAS;AAAA,IACjC,EAAE,OAAO,MAAM;AAAA,EAChB;AACD;AAkDA,eAAsB,eACrB,OACA,QAC6B;AAC7B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA,kBAAkB;AAAA,IAClB,aAAa;AAAA,EACd,IAAI;AAGJ,QAAM,cAA+B;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,SAAS,gBAAgB,MAAM,KAAK,WAAW;AAGrD,QAAM,gBAAgB,mBAAmB,OAAO,SAAS,kBAAkB;AAAA,IAC1E,QAAQ,OAAO;AAAA,IACf,cAAc;AAAA,EACf,CAAC;AAGD,MAAI,WAAgB,CAAC;AACrB,MAAI,YAAuC;AAE3C,KAAG;AACF,UAAM,SAAS,MAAM,QAAQ;AAAA,MAC5B,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW,aAAa;AAAA,IACzB,CAAC;AAED,UAAM,OAAO,OAAO,QAAQ,CAAC;AAC7B,eAAW,SAAS,OAAO,IAAI;AAC/B,gBAAY,OAAO;AAAA,EACpB,SAAS;AAGT,MAAI,WAAW;AACd,eAAW,SAAS,IAAI,SAAS;AAAA,EAClC;AAGA,aAAW,mBAAmB,UAAU,OAAO,SAAS,kBAAkB;AAAA,IACzE,QAAQ,OAAO;AAAA,IACf,cAAc;AAAA,EACf,CAAC;AAGD,aAAW,UAAU,UAAU,OAAO,SAAS,OAAO,SAAS;AAG/D,QAAM,EAAE,gBAAgB,YAAY,YAAY,aAAa,SAAS,IAAI;AAAA,IACzE;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAGA,QAAM,IAAI,cAAc;AAGxB,MAAI,eAAe;AAClB,UAAM,QAAQ;AAAA,MACb,OAAO,QAAQ,aAAa,EAAE,IAAI,OAAO,CAAC,EAAEA,OAAM,MAAM;AACvD,cAAM,OAAO,MAAMA,QAAO,MAAM;AAChC,QAAAA,QAAO,MAAM,IAAI,IAAI;AAAA,MACtB,CAAC;AAAA,IACF;AAAA,EACD;AAGA,SAAO;AAAA,IACN,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa,eAAe,oBAAoB,QAAQ,KAAK;AAAA,IAC9D;AAAA,IACA,cAAc;AAAA,MACb;AAAA,MACA;AAAA,MACA,SAAS,OAAO;AAAA,MAChB,WAAW,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,SAAS,OAAO;AAAA,MAChB,QAAQ,OAAO;AAAA,IAChB;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACD;AACD;","names":["config"]}

package/dist/utils/index.js

@@ -1,4 +1,23 @@
-import "../chunk-ZQ4XMJH7.js";
+import {
+  applyClientFilters,
+  buildGraphQLFilter,
+  buildListQueryString,
+  buildListUrl,
+  getFilterCount,
+  hasActiveFilters,
+  mergeListParams,
+  paginateItems,
+  parseListParams,
+  processListData
+} from "../chunk-2GML443T.js";
+import {
+  chunkArray,
+  filterItems,
+  generateNestedPaths,
+  generatePaginatedPaths,
+  generateStaticPaths,
+  groupItems
+} from "../chunk-33R4URZV.js";
 import {
   createHydrationScript,
   createHydrationScripts,
@@ -19,16 +38,11 @@ import {
   setCacheControl,
   setResponseHeaders
 } from "../chunk-WNMPTDCR.js";
-import {
-  chunkArray,
-  filterItems,
-  generateNestedPaths,
-  generatePaginatedPaths,
-  generateStaticPaths,
-  groupItems,
-  sortItems
-} from "../chunk-33R4URZV.js";
 export {
+  applyClientFilters,
+  buildGraphQLFilter,
+  buildListQueryString,
+  buildListUrl,
   chunkArray,
   createHydrationScript,
   createHydrationScripts,
@@ -39,18 +53,23 @@ export {
   generatePaginatedPaths,
   generateStaticPaths,
   getClientIP,
+  getFilterCount,
   getHydratedData,
   getQueryParams,
   getRequestHeaders,
   getServerData,
   groupItems,
+  hasActiveFilters,
   isMobileDevice,
   isServerSide,
+  mergeListParams,
   mergeProps,
+  paginateItems,
+  parseListParams,
+  processListData,
   serializeForHydration,
   setCacheControl,
   setResponseHeaders,
-  shouldHydrate,
-  sortItems
+  shouldHydrate
 };
 //# sourceMappingURL=index.js.map

package/dist/vue-app-setup.js

@@ -0,0 +1,47 @@
+// src/vue-app-setup.ts
+import { amplifyConfig } from "virtual:htlkg-config";
+import { Amplify } from "aws-amplify";
+function setupVueApp(app) {
+  if (import.meta.env.DEV && typeof window !== "undefined") {
+    try {
+      import("@nanostores/vue/devtools").then(({ devtools }) => {
+        app.use(devtools, {});
+      }).catch(() => {
+      });
+    } catch {
+    }
+  }
+  try {
+    if (!amplifyConfig) {
+      console.warn("[htlkg] No Amplify configuration provided");
+      return;
+    }
+    if ("auth" in amplifyConfig || "data" in amplifyConfig || "storage" in amplifyConfig) {
+      Amplify.configure(amplifyConfig, { ssr: true });
+    } else {
+      const { userPoolId, userPoolClientId, region } = amplifyConfig;
+      if (userPoolId && userPoolClientId) {
+        const config = {
+          Auth: {
+            Cognito: {
+              userPoolId,
+              userPoolClientId,
+              ...region && { region }
+            }
+          }
+        };
+        Amplify.configure(config, { ssr: true });
+      } else {
+        console.error(
+          "[htlkg] Missing required Amplify configuration (userPoolId, userPoolClientId)"
+        );
+      }
+    }
+  } catch (error) {
+    console.error("[htlkg] Failed to setup Vue app:", error);
+  }
+}
+export {
+  setupVueApp as default
+};
+//# sourceMappingURL=vue-app-setup.js.map

package/dist/vue-app-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vue-app-setup.ts"],"sourcesContent":["/**\n * Vue App Setup for htlkg Integration\n * \n * This file is automatically loaded by the Vue integration when vueAppSetup is enabled.\n * It configures AWS Amplify for client-side authentication in all Vue components.\n * It also sets up nanostores devtools integration for Vue DevTools.\n */\n\n/// <reference types=\"vite/client\" />\n\nimport { amplifyConfig } from \"virtual:htlkg-config\";\nimport type { App } from \"vue\";\nimport type { ResourcesConfig } from \"aws-amplify\";\nimport { Amplify } from \"aws-amplify\";\n\n/**\n * Setup function called by Astro's Vue integration\n * Configures Amplify for client-side authentication and nanostores devtools\n */\nexport default function setupVueApp(app: App): void {\n\t// Setup nanostores devtools in development\n\t// The devtools plugin will automatically detect stores used in components\n\tif (import.meta.env.DEV && typeof window !== 'undefined') {\n\t\ttry {\n\t\t\t// Dynamically import devtools plugin (only in browser)\n\t\t\timport('@nanostores/vue/devtools').then(({ devtools }) => {\n\t\t\t\t// Install devtools plugin - it will detect stores automatically\n\t\t\t\tapp.use(devtools, {});\n\t\t\t}).catch(() => {\n\t\t\t\t// Silently ignore - devtools are optional\n\t\t\t});\n\t\t} catch {\n\t\t\t// Silently ignore - devtools are optional\n\t\t}\n\t}\n\t\n\t// Setup Amplify\n\ttry {\n\t\tif (!amplifyConfig) {\n\t\t\tconsole.warn(\"[htlkg] No Amplify configuration provided\");\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if this is a full amplify_outputs.json config\n\t\tif (\n\t\t\t\"auth\" in amplifyConfig ||\n\t\t\t\"data\" in amplifyConfig ||\n\t\t\t\"storage\" in amplifyConfig\n\t\t) {\n\t\t\tAmplify.configure(amplifyConfig as ResourcesConfig, { ssr: true });\n\t\t} else {\n\t\t\t// Legacy individual config properties\n\t\t\tconst { userPoolId, userPoolClientId, region } = amplifyConfig as {\n\t\t\t\tuserPoolId?: string;\n\t\t\t\tuserPoolClientId?: string;\n\t\t\t\tregion?: string;\n\t\t\t};\n\n\t\t\tif (userPoolId && userPoolClientId) {\n\t\t\t\tconst config: ResourcesConfig = {\n\t\t\t\t\tAuth: {\n\t\t\t\t\t\tCognito: {\n\t\t\t\t\t\t\tuserPoolId,\n\t\t\t\t\t\t\tuserPoolClientId,\n\t\t\t\t\t\t\t...(region && { region }),\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t};\n\n\t\t\t\tAmplify.configure(config, { ssr: true });\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t\"[htlkg] Missing required Amplify configuration (userPoolId, userPoolClientId)\",\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t} catch (error) {\n\t\tconsole.error(\"[htlkg] Failed to setup Vue app:\", error);\n\t\t// Don't throw - allow app to continue even if Amplify setup fails\n\t}\n}\n"],"mappings":";AAUA,SAAS,qBAAqB;AAG9B,SAAS,eAAe;AAMT,SAAR,YAA6B,KAAgB;AAGnD,MAAI,YAAY,IAAI,OAAO,OAAO,WAAW,aAAa;AACzD,QAAI;AAEH,aAAO,0BAA0B,EAAE,KAAK,CAAC,EAAE,SAAS,MAAM;AAEzD,YAAI,IAAI,UAAU,CAAC,CAAC;AAAA,MACrB,CAAC,EAAE,MAAM,MAAM;AAAA,MAEf,CAAC;AAAA,IACF,QAAQ;AAAA,IAER;AAAA,EACD;AAGA,MAAI;AACH,QAAI,CAAC,eAAe;AACnB,cAAQ,KAAK,2CAA2C;AACxD;AAAA,IACD;AAGA,QACC,UAAU,iBACV,UAAU,iBACV,aAAa,eACZ;AACD,cAAQ,UAAU,eAAkC,EAAE,KAAK,KAAK,CAAC;AAAA,IAClE,OAAO;AAEN,YAAM,EAAE,YAAY,kBAAkB,OAAO,IAAI;AAMjD,UAAI,cAAc,kBAAkB;AACnC,cAAM,SAA0B;AAAA,UAC/B,MAAM;AAAA,YACL,SAAS;AAAA,cACR;AAAA,cACA;AAAA,cACA,GAAI,UAAU,EAAE,OAAO;AAAA,YACxB;AAAA,UACD;AAAA,QACD;AAEA,gBAAQ,UAAU,QAAQ,EAAE,KAAK,KAAK,CAAC;AAAA,MACxC,OAAO;AACN,gBAAQ;AAAA,UACP;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD,SAAS,OAAO;AACf,YAAQ,MAAM,oCAAoC,KAAK;AAAA,EAExD;AACD;","names":[]}

package/package.json

@@ -1,13 +1,28 @@
 {
   "name": "@htlkg/astro",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./htlkg": "./dist/htlkg/index.js",
-    "./htlkg/config": "./dist/htlkg/config.js",
-    "./middleware": "./dist/middleware/index.js",
-    "./vue-app-setup": "./src/vue-app-setup.ts",
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./src/index.ts"
+    },
+    "./htlkg": {
+      "import": "./dist/htlkg/index.js",
+      "types": "./src/htlkg/index.ts"
+    },
+    "./htlkg/config": {
+      "import": "./dist/htlkg/config.js",
+      "types": "./src/htlkg/config.ts"
+    },
+    "./middleware": {
+      "import": "./dist/middleware/index.js",
+      "types": "./src/middleware/index.ts"
+    },
+    "./vue-app-setup": {
+      "import": "./dist/vue-app-setup.js",
+      "types": "./src/vue-app-setup.ts"
+    },
     "./auth/LoginPage.astro": "./src/auth/LoginPage.astro",
     "./layouts": "./src/layouts/index.ts",
     "./layouts/*.astro": "./src/layouts/*.astro",
@@ -18,8 +33,22 @@
     "./patterns/brand/*.astro": "./src/patterns/brand/*.astro",
     "./components": "./src/components/index.ts",
     "./components/*.astro": "./src/components/*.astro",
-    "./utils": "./dist/utils/index.js",
-    "./utils/*": "./dist/utils/*.js"
+    "./utils": {
+      "import": "./dist/utils/index.js",
+      "types": "./src/utils/index.ts"
+    },
+    "./utils/hydration": {
+      "import": "./dist/utils/hydration.js",
+      "types": "./src/utils/hydration.ts"
+    },
+    "./utils/ssr": {
+      "import": "./dist/utils/ssr.js",
+      "types": "./src/utils/ssr.ts"
+    },
+    "./utils/static": {
+      "import": "./dist/utils/static.js",
+      "types": "./src/utils/static.ts"
+    }
   },
   "files": [
     "dist",
@@ -36,8 +65,8 @@
     "nanostores": "^0.11.3",
     "tailwindcss": "^3.4.18",
     "vue": "^3.5.22",
-    "@htlkg/core": "0.0.2",
-    "@htlkg/components": "0.0.2"
+    "@htlkg/core": "0.0.3",
+    "@htlkg/components": "0.0.3"
   },
   "devDependencies": {
     "@vue/devtools-api": "^6.6.4",

package/src/auth/auth.md

@@ -0,0 +1,77 @@
+# Auth Module
+
+Authentication pages and components.
+
+## Components
+
+### LoginPage
+
+Full login page with form and error handling.
+
+```astro
+---
+import { LoginPage } from '@htlkg/astro/auth';
+---
+
+<LoginPage 
+  redirectTo="/admin"
+  logoUrl="/logo.svg"
+/>
+```
+
+### LoginForm
+
+Vue component for login form (used within LoginPage).
+
+```vue
+<script setup>
+import { LoginForm } from '@htlkg/astro/auth';
+</script>
+
+<template>
+  <LoginForm 
+    @success="handleSuccess"
+    @error="handleError"
+  />
+</template>
+```
+
+## Usage
+
+The auth module is typically used with the htlkg integration which automatically injects the login page:
+
+```javascript
+// astro.config.mjs
+import { htlkg } from '@htlkg/astro';
+
+export default defineConfig({
+  integrations: [
+    htlkg({
+      auth: {
+        enabled: true,
+        loginPage: '/login',
+      },
+    }),
+  ],
+});
+```
+
+## Customization
+
+Create a custom login page:
+
+```astro
+---
+// src/pages/login.astro
+import { AuthLayout } from '@htlkg/astro/layouts';
+import { LoginForm } from '@htlkg/astro/auth';
+---
+
+<AuthLayout title="Sign In">
+  <div class="custom-login">
+    <img src="/logo.svg" alt="Logo" />
+    <h1>Welcome Back</h1>
+    <LoginForm client:load />
+  </div>
+</AuthLayout>
+```

package/src/components/Island.astro

@@ -0,0 +1,56 @@
+---
+/**
+ * Island Component
+ *
+ * A wrapper component for Vue islands that handles:
+ * - Automatic nanostore synchronization from server to client
+ * - Hydration strategy selection
+ * - Props forwarding
+ *
+ * @example
+ * ```astro
+ * <Island
+ *   component={AccountsPage}
+ *   data={{ accounts }}
+ *   stores={{ accounts: $accounts }}
+ *   hydration="load"
+ * />
+ * ```
+ */
+
+import type { Component } from "vue";
+import type { WritableAtom } from "nanostores";
+
+interface Props {
+	/** Vue component to render */
+	component: Component;
+	/** Data to sync to stores */
+	data?: Record<string, any>;
+	/** Store mapping { dataKey: storeAtom } */
+	stores?: Record<string, WritableAtom<any>>;
+	/** Hydration strategy */
+	hydration?: "load" | "idle" | "visible" | "only";
+	/** Additional props to pass to the component */
+	props?: Record<string, any>;
+}
+
+const {
+	component: Component,
+	data = {},
+	stores = {},
+	hydration = "load",
+	props = {},
+} = Astro.props;
+
+// Auto-sync data to stores on server-side
+for (const [key, store] of Object.entries(stores)) {
+	if (data[key] !== undefined) {
+		store.set(data[key]);
+	}
+}
+---
+
+{hydration === "load" && <Component client:load {...props} />}
+{hydration === "idle" && <Component client:idle {...props} />}
+{hydration === "visible" && <Component client:visible {...props} />}
+{hydration === "only" && <Component client:only="vue" {...props} />}

package/src/components/components.md

@@ -0,0 +1,79 @@
+# Components Module
+
+Astro components for page structure and navigation.
+
+## Installation
+
+```typescript
+import { Sidebar } from '@htlkg/astro/components';
+import { Topbar } from '@htlkg/astro/components';
+import { PageHeader } from '@htlkg/astro/components';
+import { Island } from '@htlkg/astro/components';
+```
+
+## Sidebar
+
+Navigation sidebar for admin layouts.
+
+```astro
+---
+import { Sidebar } from '@htlkg/astro/components';
+
+const navItems = [
+  { label: 'Dashboard', href: '/admin', icon: 'home' },
+  { label: 'Brands', href: '/admin/brands', icon: 'building' },
+  { label: 'Users', href: '/admin/users', icon: 'users' },
+];
+---
+
+<Sidebar items={navItems} currentPath={Astro.url.pathname} />
+```
+
+## Topbar
+
+Top navigation bar with user menu.
+
+```astro
+---
+import { Topbar } from '@htlkg/astro/components';
+
+const user = Astro.locals.user;
+---
+
+<Topbar user={user} title="Admin Portal" />
+```
+
+## PageHeader
+
+Page header with title, breadcrumbs, and actions.
+
+```astro
+---
+import { PageHeader } from '@htlkg/astro/components';
+
+const breadcrumbs = [
+  { label: 'Admin', href: '/admin' },
+  { label: 'Brands', href: '/admin/brands' },
+];
+---
+
+<PageHeader 
+  title="Brands" 
+  breadcrumbs={breadcrumbs}
+>
+  <button slot="actions">Add Brand</button>
+</PageHeader>
+```
+
+## Island
+
+Wrapper for client-side Vue components with hydration control.
+
+```astro
+---
+import { Island } from '@htlkg/astro/components';
+import BrandList from '@/components/BrandList.vue';
+---
+
+<Island component={BrandList} client:load props={{ brands }} />
+```