@hexclave/shared 1.0.0

package/dist/esm/apps/apps-config.d.ts

@@ -0,0 +1,168 @@
+//#region src/apps/apps-config.d.ts
+declare const ALL_APP_TAGS: {
+  readonly expert: {
+    readonly displayName: "Expert";
+  };
+  readonly integration: {
+    readonly displayName: "Integrations";
+  };
+  readonly auth: {
+    readonly displayName: "Authentication";
+  };
+  readonly developers: {
+    readonly displayName: "For Developers";
+  };
+  readonly security: {
+    readonly displayName: "Security";
+  };
+  readonly operations: {
+    readonly displayName: "For Operations";
+  };
+  readonly gtm: {
+    readonly displayName: "Go-to-market";
+  };
+  readonly comms: {
+    readonly displayName: "Communications";
+  };
+  readonly automation: {
+    readonly displayName: "Automation";
+  };
+  readonly storage: {
+    readonly displayName: "Storage & Databases";
+  };
+  readonly various: {
+    readonly displayName: "Various";
+  };
+};
+type AppId = keyof typeof ALL_APPS;
+declare const ALL_APPS: {
+  readonly authentication: {
+    readonly displayName: "Authentication";
+    readonly subtitle: "User sign-in and account management";
+    readonly tags: ["auth", "security"];
+    readonly stage: "stable";
+  };
+  readonly "fraud-protection": {
+    readonly displayName: "Fraud Protection";
+    readonly subtitle: "Protect your project from fraud and abuse";
+    readonly tags: ["auth", "security"];
+    readonly stage: "stable";
+  };
+  readonly onboarding: {
+    readonly displayName: "Onboarding";
+    readonly subtitle: "Configure user onboarding requirements";
+    readonly tags: ["auth"];
+    readonly stage: "alpha";
+  };
+  readonly teams: {
+    readonly displayName: "Teams";
+    readonly subtitle: "Team collaboration and management";
+    readonly tags: ["auth", "security"];
+    readonly stage: "stable";
+  };
+  readonly rbac: {
+    readonly displayName: "RBAC";
+    readonly subtitle: "Role-based access control and permissions";
+    readonly tags: ["auth", "security"];
+    readonly stage: "stable";
+  };
+  readonly "api-keys": {
+    readonly displayName: "API Keys";
+    readonly subtitle: "API key generation and management";
+    readonly tags: ["auth", "security", "developers"];
+    readonly stage: "stable";
+  };
+  readonly payments: {
+    readonly displayName: "Payments";
+    readonly subtitle: "Payment processing and subscription management";
+    readonly tags: ["operations", "gtm"];
+    readonly stage: "beta";
+  };
+  readonly emails: {
+    readonly displayName: "Emails";
+    readonly subtitle: "Email template configuration and management";
+    readonly tags: ["comms"];
+    readonly stage: "stable";
+  };
+  readonly support: {
+    readonly displayName: "Support";
+    readonly subtitle: "Customer conversations, team replies, and internal notes";
+    readonly tags: ["comms", "operations"];
+    readonly stage: "alpha";
+  };
+  readonly "email-api": {
+    readonly displayName: "Email API";
+    readonly subtitle: "Programmatic email sending and delivery";
+    readonly tags: ["comms", "developers", "expert"];
+    readonly stage: "alpha";
+  };
+  readonly "data-vault": {
+    readonly displayName: "Data Vault";
+    readonly subtitle: "Secure storage for sensitive user data";
+    readonly tags: ["security", "storage"];
+    readonly stage: "beta";
+  };
+  readonly webhooks: {
+    readonly displayName: "Webhooks";
+    readonly subtitle: "Real-time event notifications and integrations";
+    readonly tags: ["developers"];
+    readonly stage: "stable";
+  };
+  readonly "tv-mode": {
+    readonly displayName: "TV mode";
+    readonly subtitle: "Dashboard display for large screens";
+    readonly tags: ["various"];
+    readonly stage: "alpha";
+  };
+  readonly "launch-checklist": {
+    readonly displayName: "Launch Checklist";
+    readonly subtitle: "Pre-launch verification and readiness checks";
+    readonly tags: ["various"];
+    readonly stage: "stable";
+  };
+  readonly catalyst: {
+    readonly displayName: "Catalyst";
+    readonly subtitle: "Project scaffolding and rapid development";
+    readonly tags: ["various"];
+    readonly stage: "alpha";
+  };
+  readonly neon: {
+    readonly displayName: "Neon Integration";
+    readonly subtitle: "Serverless Postgres database integration";
+    readonly tags: ["integration", "storage"];
+    readonly stage: "alpha";
+  };
+  readonly convex: {
+    readonly displayName: "Convex Integration";
+    readonly subtitle: "Real-time backend platform integration";
+    readonly tags: ["integration", "storage"];
+    readonly stage: "alpha";
+  };
+  readonly vercel: {
+    readonly displayName: "Vercel Integration";
+    readonly subtitle: "Deploy your Hexclave project to Vercel";
+    readonly tags: ["integration", "developers"];
+    readonly stage: "stable";
+  };
+  readonly "tanstack-start": {
+    readonly displayName: "TanStack Start";
+    readonly subtitle: "Use Hexclave in TanStack Start apps";
+    readonly tags: ["integration", "developers"];
+    readonly stage: "alpha";
+  };
+  readonly analytics: {
+    readonly displayName: "Analytics";
+    readonly subtitle: "View and explore analytics data";
+    readonly tags: ["developers", "operations"];
+    readonly stage: "stable";
+  };
+  readonly "session-replays": {
+    readonly displayName: "Session Replays";
+    readonly subtitle: "Watch real user sessions to understand how people use your app";
+    readonly tags: ["developers", "operations"];
+    readonly stage: "stable";
+  };
+};
+//#endregion
+export { ALL_APPS, ALL_APP_TAGS, AppId };
+//# sourceMappingURL=apps-config.d.ts.map

package/dist/esm/apps/apps-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apps-config.d.ts","names":[],"sources":["../../../src/apps/apps-config.ts"],"mappings":";cAIa,YAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CD,KAAA,gBAAqB,QAAA;AAAA,cAEpB,QAAA;EAAA"}

package/dist/esm/apps/apps-config.js

@@ -0,0 +1,154 @@
+//#region src/apps/apps-config.ts
+const ALL_APP_TAGS = {
+	"expert": { displayName: "Expert" },
+	"integration": { displayName: "Integrations" },
+	"auth": { displayName: "Authentication" },
+	"developers": { displayName: "For Developers" },
+	"security": { displayName: "Security" },
+	"operations": { displayName: "For Operations" },
+	"gtm": { displayName: "Go-to-market" },
+	"comms": { displayName: "Communications" },
+	"automation": { displayName: "Automation" },
+	"storage": { displayName: "Storage & Databases" },
+	"various": { displayName: "Various" }
+};
+const ALL_APPS = {
+	"authentication": {
+		displayName: "Authentication",
+		subtitle: "User sign-in and account management",
+		tags: ["auth", "security"],
+		stage: "stable"
+	},
+	"fraud-protection": {
+		displayName: "Fraud Protection",
+		subtitle: "Protect your project from fraud and abuse",
+		tags: ["auth", "security"],
+		stage: "stable"
+	},
+	"onboarding": {
+		displayName: "Onboarding",
+		subtitle: "Configure user onboarding requirements",
+		tags: ["auth"],
+		stage: "alpha"
+	},
+	"teams": {
+		displayName: "Teams",
+		subtitle: "Team collaboration and management",
+		tags: ["auth", "security"],
+		stage: "stable"
+	},
+	"rbac": {
+		displayName: "RBAC",
+		subtitle: "Role-based access control and permissions",
+		tags: ["auth", "security"],
+		stage: "stable"
+	},
+	"api-keys": {
+		displayName: "API Keys",
+		subtitle: "API key generation and management",
+		tags: [
+			"auth",
+			"security",
+			"developers"
+		],
+		stage: "stable"
+	},
+	"payments": {
+		displayName: "Payments",
+		subtitle: "Payment processing and subscription management",
+		tags: ["operations", "gtm"],
+		stage: "beta"
+	},
+	"emails": {
+		displayName: "Emails",
+		subtitle: "Email template configuration and management",
+		tags: ["comms"],
+		stage: "stable"
+	},
+	"support": {
+		displayName: "Support",
+		subtitle: "Customer conversations, team replies, and internal notes",
+		tags: ["comms", "operations"],
+		stage: "alpha"
+	},
+	"email-api": {
+		displayName: "Email API",
+		subtitle: "Programmatic email sending and delivery",
+		tags: [
+			"comms",
+			"developers",
+			"expert"
+		],
+		stage: "alpha"
+	},
+	"data-vault": {
+		displayName: "Data Vault",
+		subtitle: "Secure storage for sensitive user data",
+		tags: ["security", "storage"],
+		stage: "beta"
+	},
+	"webhooks": {
+		displayName: "Webhooks",
+		subtitle: "Real-time event notifications and integrations",
+		tags: ["developers"],
+		stage: "stable"
+	},
+	"tv-mode": {
+		displayName: "TV mode",
+		subtitle: "Dashboard display for large screens",
+		tags: ["various"],
+		stage: "alpha"
+	},
+	"launch-checklist": {
+		displayName: "Launch Checklist",
+		subtitle: "Pre-launch verification and readiness checks",
+		tags: ["various"],
+		stage: "stable"
+	},
+	"catalyst": {
+		displayName: "Catalyst",
+		subtitle: "Project scaffolding and rapid development",
+		tags: ["various"],
+		stage: "alpha"
+	},
+	"neon": {
+		displayName: "Neon Integration",
+		subtitle: "Serverless Postgres database integration",
+		tags: ["integration", "storage"],
+		stage: "alpha"
+	},
+	"convex": {
+		displayName: "Convex Integration",
+		subtitle: "Real-time backend platform integration",
+		tags: ["integration", "storage"],
+		stage: "alpha"
+	},
+	"vercel": {
+		displayName: "Vercel Integration",
+		subtitle: "Deploy your Hexclave project to Vercel",
+		tags: ["integration", "developers"],
+		stage: "stable"
+	},
+	"tanstack-start": {
+		displayName: "TanStack Start",
+		subtitle: "Use Hexclave in TanStack Start apps",
+		tags: ["integration", "developers"],
+		stage: "alpha"
+	},
+	"analytics": {
+		displayName: "Analytics",
+		subtitle: "View and explore analytics data",
+		tags: ["developers", "operations"],
+		stage: "stable"
+	},
+	"session-replays": {
+		displayName: "Session Replays",
+		subtitle: "Watch real user sessions to understand how people use your app",
+		tags: ["developers", "operations"],
+		stage: "stable"
+	}
+};
+
+//#endregion
+export { ALL_APPS, ALL_APP_TAGS };
+//# sourceMappingURL=apps-config.js.map

package/dist/esm/apps/apps-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apps-config.js","names":[],"sources":["../../../src/apps/apps-config.ts"],"sourcesContent":["type AppTag = {\n  displayName: string,\n};\n\nexport const ALL_APP_TAGS = {\n  \"expert\": {\n    displayName: \"Expert\",\n  },\n  \"integration\": {\n    displayName: \"Integrations\",\n  },\n  \"auth\": {\n    displayName: \"Authentication\",\n  },\n  \"developers\": {\n    displayName: \"For Developers\",\n  },\n  \"security\": {\n    displayName: \"Security\",\n  },\n  \"operations\": {\n    displayName: \"For Operations\",\n  },\n  \"gtm\": {\n    displayName: \"Go-to-market\",\n  },\n  \"comms\": {\n    displayName: \"Communications\",\n  },\n  \"automation\": {\n    displayName: \"Automation\",\n  },\n  \"storage\": {\n    displayName: \"Storage & Databases\",\n  },\n  \"various\": {\n    displayName: \"Various\",\n  },\n} as const satisfies Record<string, AppTag>;\n\ntype App = {\n  displayName: string,\n  subtitle: string,\n  tags: (keyof typeof ALL_APP_TAGS)[],\n  stage: \"alpha\" | \"beta\" | \"stable\",\n};\n\nexport type AppId = keyof typeof ALL_APPS;\n\nexport const ALL_APPS = {\n  \"authentication\": {\n    displayName: \"Authentication\",\n    subtitle: \"User sign-in and account management\",\n    tags: [\"auth\", \"security\"],\n    stage: \"stable\",\n  },\n  \"fraud-protection\": {\n    displayName: \"Fraud Protection\",\n    subtitle: \"Protect your project from fraud and abuse\",\n    tags: [\"auth\", \"security\"],\n    stage: \"stable\",\n  },\n  \"onboarding\": {\n    displayName: \"Onboarding\",\n    subtitle: \"Configure user onboarding requirements\",\n    tags: [\"auth\"],\n    stage: \"alpha\",\n  },\n  \"teams\": {\n    displayName: \"Teams\",\n    subtitle: \"Team collaboration and management\",\n    tags: [\"auth\", \"security\"],\n    stage: \"stable\",\n  },\n  \"rbac\": {\n    displayName: \"RBAC\",\n    subtitle: \"Role-based access control and permissions\",\n    tags: [\"auth\", \"security\"],\n    stage: \"stable\",\n  },\n  \"api-keys\": {\n    displayName: \"API Keys\",\n    subtitle: \"API key generation and management\",\n    tags: [\"auth\", \"security\", \"developers\"],\n    stage: \"stable\",\n  },\n  \"payments\": {\n    displayName: \"Payments\",\n    subtitle: \"Payment processing and subscription management\",\n    tags: [\"operations\", \"gtm\"],\n    stage: \"beta\",\n  },\n  \"emails\": {\n    displayName: \"Emails\",\n    subtitle: \"Email template configuration and management\",\n    tags: [\"comms\"],\n    stage: \"stable\",\n  },\n  \"support\": {\n    displayName: \"Support\",\n    subtitle: \"Customer conversations, team replies, and internal notes\",\n    tags: [\"comms\", \"operations\"],\n    stage: \"alpha\",\n  },\n  \"email-api\": {\n    displayName: \"Email API\",\n    subtitle: \"Programmatic email sending and delivery\",\n    tags: [\"comms\", \"developers\", \"expert\"],\n    stage: \"alpha\",\n  },\n  \"data-vault\": {\n    displayName: \"Data Vault\",\n    subtitle: \"Secure storage for sensitive user data\",\n    tags: [\"security\", \"storage\"],\n    stage: \"beta\",\n  },\n  \"webhooks\": {\n    displayName: \"Webhooks\",\n    subtitle: \"Real-time event notifications and integrations\",\n    tags: [\"developers\"],\n    stage: \"stable\",\n  },\n  \"tv-mode\": {\n    displayName: \"TV mode\",\n    subtitle: \"Dashboard display for large screens\",\n    tags: [\"various\"],\n    stage: \"alpha\",\n  },\n  \"launch-checklist\": {\n    displayName: \"Launch Checklist\",\n    subtitle: \"Pre-launch verification and readiness checks\",\n    tags: [\"various\"],\n    stage: \"stable\",\n  },\n  \"catalyst\": {\n    displayName: \"Catalyst\",\n    subtitle: \"Project scaffolding and rapid development\",\n    tags: [\"various\"],\n    stage: \"alpha\",\n  },\n  \"neon\": {\n    displayName: \"Neon Integration\",\n    subtitle: \"Serverless Postgres database integration\",\n    tags: [\"integration\", \"storage\"],\n    stage: \"alpha\",\n  },\n  \"convex\": {\n    displayName: \"Convex Integration\",\n    subtitle: \"Real-time backend platform integration\",\n    tags: [\"integration\", \"storage\"],\n    stage: \"alpha\",\n  },\n  \"vercel\": {\n    displayName: \"Vercel Integration\",\n    subtitle: \"Deploy your Hexclave project to Vercel\",\n    tags: [\"integration\", \"developers\"],\n    stage: \"stable\",\n  },\n  \"tanstack-start\": {\n    displayName: \"TanStack Start\",\n    subtitle: \"Use Hexclave in TanStack Start apps\",\n    tags: [\"integration\", \"developers\"],\n    stage: \"alpha\",\n  },\n  \"analytics\": {\n    displayName: \"Analytics\",\n    subtitle: \"View and explore analytics data\",\n    tags: [\"developers\", \"operations\"],\n    stage: \"stable\",\n  },\n  \"session-replays\": {\n    displayName: \"Session Replays\",\n    subtitle: \"Watch real user sessions to understand how people use your app\",\n    tags: [\"developers\", \"operations\"],\n    stage: \"stable\",\n  },\n} as const satisfies Record<string, App>;\n"],"mappings":";AAIA,MAAa,eAAe;CAC1B,UAAU,EACR,aAAa,UACd;CACD,eAAe,EACb,aAAa,gBACd;CACD,QAAQ,EACN,aAAa,kBACd;CACD,cAAc,EACZ,aAAa,kBACd;CACD,YAAY,EACV,aAAa,YACd;CACD,cAAc,EACZ,aAAa,kBACd;CACD,OAAO,EACL,aAAa,gBACd;CACD,SAAS,EACP,aAAa,kBACd;CACD,cAAc,EACZ,aAAa,cACd;CACD,WAAW,EACT,aAAa,uBACd;CACD,WAAW,EACT,aAAa,WACd;CACF;AAWD,MAAa,WAAW;CACtB,kBAAkB;EAChB,aAAa;EACb,UAAU;EACV,MAAM,CAAC,QAAQ,WAAW;EAC1B,OAAO;EACR;CACD,oBAAoB;EAClB,aAAa;EACb,UAAU;EACV,MAAM,CAAC,QAAQ,WAAW;EAC1B,OAAO;EACR;CACD,cAAc;EACZ,aAAa;EACb,UAAU;EACV,MAAM,CAAC,OAAO;EACd,OAAO;EACR;CACD,SAAS;EACP,aAAa;EACb,UAAU;EACV,MAAM,CAAC,QAAQ,WAAW;EAC1B,OAAO;EACR;CACD,QAAQ;EACN,aAAa;EACb,UAAU;EACV,MAAM,CAAC,QAAQ,WAAW;EAC1B,OAAO;EACR;CACD,YAAY;EACV,aAAa;EACb,UAAU;EACV,MAAM;GAAC;GAAQ;GAAY;GAAa;EACxC,OAAO;EACR;CACD,YAAY;EACV,aAAa;EACb,UAAU;EACV,MAAM,CAAC,cAAc,MAAM;EAC3B,OAAO;EACR;CACD,UAAU;EACR,aAAa;EACb,UAAU;EACV,MAAM,CAAC,QAAQ;EACf,OAAO;EACR;CACD,WAAW;EACT,aAAa;EACb,UAAU;EACV,MAAM,CAAC,SAAS,aAAa;EAC7B,OAAO;EACR;CACD,aAAa;EACX,aAAa;EACb,UAAU;EACV,MAAM;GAAC;GAAS;GAAc;GAAS;EACvC,OAAO;EACR;CACD,cAAc;EACZ,aAAa;EACb,UAAU;EACV,MAAM,CAAC,YAAY,UAAU;EAC7B,OAAO;EACR;CACD,YAAY;EACV,aAAa;EACb,UAAU;EACV,MAAM,CAAC,aAAa;EACpB,OAAO;EACR;CACD,WAAW;EACT,aAAa;EACb,UAAU;EACV,MAAM,CAAC,UAAU;EACjB,OAAO;EACR;CACD,oBAAoB;EAClB,aAAa;EACb,UAAU;EACV,MAAM,CAAC,UAAU;EACjB,OAAO;EACR;CACD,YAAY;EACV,aAAa;EACb,UAAU;EACV,MAAM,CAAC,UAAU;EACjB,OAAO;EACR;CACD,QAAQ;EACN,aAAa;EACb,UAAU;EACV,MAAM,CAAC,eAAe,UAAU;EAChC,OAAO;EACR;CACD,UAAU;EACR,aAAa;EACb,UAAU;EACV,MAAM,CAAC,eAAe,UAAU;EAChC,OAAO;EACR;CACD,UAAU;EACR,aAAa;EACb,UAAU;EACV,MAAM,CAAC,eAAe,aAAa;EACnC,OAAO;EACR;CACD,kBAAkB;EAChB,aAAa;EACb,UAAU;EACV,MAAM,CAAC,eAAe,aAAa;EACnC,OAAO;EACR;CACD,aAAa;EACX,aAAa;EACb,UAAU;EACV,MAAM,CAAC,cAAc,aAAa;EAClC,OAAO;EACR;CACD,mBAAmB;EACjB,aAAa;EACb,UAAU;EACV,MAAM,CAAC,cAAc,aAAa;EAClC,OAAO;EACR;CACF"}

package/dist/esm/apps/apps-ui.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { AppId } from "./apps-config";
+
+//#region src/apps/apps-ui.d.ts
+declare const appSquareWidthExpression = "max(min(11vw,180px),80px)";
+declare const appSquarePaddingExpression = "max(min(1vw,1.5rem),0.25rem)";
+type AppIconProps = {
+  appId: AppId;
+  /**
+   * Icon component from the app frontend config
+   */
+  IconComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  /**
+   * Optional logo component from the app frontend config
+   */
+  LogoComponent?: React.FunctionComponent<{}>;
+  className?: string;
+  /**
+   * Whether this app is enabled/installed (shows green icon)
+   */
+  enabled?: boolean;
+  /**
+   * Whether this app is disabled (shows dashed border)
+   */
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  /**
+   * cn utility function for className merging (e.g., from stack-ui or tailwind-merge)
+   */
+  cn: (...inputs: any[]) => string;
+};
+declare function AppIcon({
+  appId,
+  IconComponent,
+  LogoComponent,
+  className,
+  enabled,
+  disabled,
+  style,
+  cn
+}: AppIconProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AppIcon, AppIconProps, appSquarePaddingExpression, appSquareWidthExpression };
+//# sourceMappingURL=apps-ui.d.ts.map

package/dist/esm/apps/apps-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apps-ui.d.ts","names":[],"sources":["../../../src/apps/apps-ui.tsx"],"mappings":";;;;;cAGa,wBAAA;AAAA,cACA,0BAAA;AAAA,KAED,YAAA;EACV,KAAA,EAAO,KAAA;EAJ4B;;;EAQnC,aAAA,EAAe,KAAA,CAAM,iBAAA,CAAkB,KAAA,CAAM,QAAA,CAAS,aAAA;EAP3C;;;EAWX,aAAA,GAAgB,KAAA,CAAM,iBAAA;EACtB,SAAA;EAVU;;;EAcV,OAAA;EATsD;;;EAatD,QAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;EAAa;;;EAI3B,EAAA,MAAQ,MAAA;AAAA;AAAA,iBAGM,OAAA,CAAA;EACd,KAAA;EACA,aAAA;EACA,aAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,KAAA;EACA;AAAA,GACC,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/apps/apps-ui.js

@@ -0,0 +1,104 @@
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/apps/apps-ui.tsx
+const appSquareWidthExpression = "max(min(11vw,180px),80px)";
+const appSquarePaddingExpression = "max(min(1vw,1.5rem),0.25rem)";
+function AppIcon({ appId, IconComponent, LogoComponent, className, enabled = false, disabled, style, cn }) {
+	const filterId = "glow-fx";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("svg", {
+		height: "0",
+		width: "0",
+		style: {
+			position: "absolute",
+			marginLeft: "-100%"
+		},
+		children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+			id: filterId,
+			colorInterpolationFilters: "sRGB",
+			x: "-50%",
+			y: "-50%",
+			width: "200%",
+			height: "200%",
+			children: [
+				/* @__PURE__ */ jsx("feOffset", {
+					dx: "0",
+					dy: "2",
+					in: "SourceAlpha",
+					result: "dropOffset"
+				}),
+				/* @__PURE__ */ jsx("feGaussianBlur", {
+					stdDeviation: "8",
+					in: "dropOffset",
+					result: "dropBlur"
+				}),
+				/* @__PURE__ */ jsx("feFlood", {
+					floodColor: "#4271FF",
+					floodOpacity: "0.8",
+					result: "dropFlood"
+				}),
+				/* @__PURE__ */ jsx("feComposite", {
+					operator: "in",
+					in: "dropFlood",
+					in2: "dropBlur",
+					result: "dropShadow"
+				}),
+				/* @__PURE__ */ jsx("feOffset", {
+					dx: "0",
+					dy: "0",
+					in: "SourceAlpha",
+					result: "outerOffset"
+				}),
+				/* @__PURE__ */ jsx("feGaussianBlur", {
+					stdDeviation: "4",
+					in: "outerOffset",
+					result: "outerBlur"
+				}),
+				/* @__PURE__ */ jsx("feFlood", {
+					floodColor: "#00BBFF",
+					floodOpacity: "0.3",
+					result: "outerFlood"
+				}),
+				/* @__PURE__ */ jsx("feComposite", {
+					operator: "in",
+					in: "outerFlood",
+					in2: "outerBlur",
+					result: "outerShadow"
+				}),
+				/* @__PURE__ */ jsx("feComposite", {
+					operator: "over",
+					in: "outerShadow",
+					in2: "dropShadow",
+					result: "combinedShadows"
+				}),
+				/* @__PURE__ */ jsx("feComposite", {
+					operator: "over",
+					in: "SourceGraphic",
+					in2: "combinedShadows"
+				})
+			]
+		}) })
+	}), /* @__PURE__ */ jsx("div", {
+		style,
+		className: cn("relative w-[72px] h-[72px] overflow-hidden select-none", "rounded-[20%] supports-[corner-shape:superellipse(1.5)]:[border-radius:30%] supports-[corner-shape:superellipse(1.5)]:[corner-shape:superellipse(1.5)]", "shadow-[0_4px_12px_0_rgba(0,0,0,0.08)] dark:!shadow-[0_10px_24px_0_rgba(10,69,151,0.28)]", "before:absolute before:inset-0 before:bg-gradient-to-br before:from-slate-300 before:via-slate-400 before:to-slate-300 dark:before:from-[#4E7598] dark:before:via-[#0D233D] dark:before:to-[#4E7598] before:rounded-[inherit] before:supports-[corner-shape:superellipse(1.5)]:[border-radius:30%] before:supports-[corner-shape:superellipse(1.5)]:[corner-shape:superellipse(1.5)]", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("absolute inset-[1px] isolate flex items-center justify-center rounded-[inherit] supports-[corner-shape:superellipse(1.5)]:[border-radius:30%] supports-[corner-shape:superellipse(1.5)]:[corner-shape:superellipse(1.5)]", !disabled && "bg-gradient-to-br from-slate-100 to-slate-200 dark:from-[#163050] dark:to-[#090C11]", disabled && "bg-gray-300 dark:bg-gray-900"),
+			children: LogoComponent ? /* @__PURE__ */ jsx("div", {
+				className: cn("w-[42%] h-[42%] flex items-center justify-center", "[&_svg]:overflow-visible", !enabled && "grayscale opacity-60"),
+				style: { filter: `url(#${filterId})` },
+				children: /* @__PURE__ */ jsx(LogoComponent, {})
+			}) : /* @__PURE__ */ jsx(IconComponent, {
+				className: cn("w-[42%] h-[42%]", enabled ? "stroke-emerald-600 dark:stroke-emerald-400" : "stroke-slate-500 dark:stroke-gray-500"),
+				style: {
+					opacity: disabled ? .5 : 1,
+					filter: `url(#${filterId})`
+				},
+				overflow: "visible"
+			})
+		})
+	})] });
+}
+
+//#endregion
+export { AppIcon, appSquarePaddingExpression, appSquareWidthExpression };
+//# sourceMappingURL=apps-ui.js.map

package/dist/esm/apps/apps-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apps-ui.js","names":[],"sources":["../../../src/apps/apps-ui.tsx"],"sourcesContent":["import React from \"react\";\nimport { AppId } from \"./apps-config\";\n\nexport const appSquareWidthExpression = \"max(min(11vw,180px),80px)\";\nexport const appSquarePaddingExpression = \"max(min(1vw,1.5rem),0.25rem)\";\n\nexport type AppIconProps = {\n  appId: AppId,\n  /**\n   * Icon component from the app frontend config\n   */\n  IconComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>,\n  /**\n   * Optional logo component from the app frontend config\n   */\n  LogoComponent?: React.FunctionComponent<{}>,\n  className?: string,\n  /**\n   * Whether this app is enabled/installed (shows green icon)\n   */\n  enabled?: boolean,\n  /**\n   * Whether this app is disabled (shows dashed border)\n   */\n  disabled?: boolean,\n  style?: React.CSSProperties,\n  /**\n   * cn utility function for className merging (e.g., from stack-ui or tailwind-merge)\n   */\n  cn: (...inputs: any[]) => string,\n};\n\nexport function AppIcon({\n  appId,\n  IconComponent,\n  LogoComponent,\n  className,\n  enabled = false,\n  disabled,\n  style,\n  cn,\n}: AppIconProps) {\n\n  const filterId = \"glow-fx\";\n\n  return (\n    <>\n      {/* theoretically, this only needs to be in the dom once: */}\n      <svg height=\"0\" width=\"0\" style={{ position: \"absolute\", marginLeft: \"-100%\" }}>\n        <defs>\n          <filter id={filterId} colorInterpolationFilters=\"sRGB\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            {/* drop shadow */}\n            <feOffset dx=\"0\" dy=\"2\" in=\"SourceAlpha\" result=\"dropOffset\" />\n            <feGaussianBlur stdDeviation=\"8\" in=\"dropOffset\" result=\"dropBlur\" />\n            <feFlood floodColor=\"#4271FF\" floodOpacity=\"0.8\" result=\"dropFlood\" />\n            <feComposite operator=\"in\" in=\"dropFlood\" in2=\"dropBlur\" result=\"dropShadow\" />\n            {/* outer shadow */}\n            <feOffset dx=\"0\" dy=\"0\" in=\"SourceAlpha\" result=\"outerOffset\" />\n            <feGaussianBlur stdDeviation=\"4\" in=\"outerOffset\" result=\"outerBlur\" />\n            <feFlood floodColor=\"#00BBFF\" floodOpacity=\"0.3\" result=\"outerFlood\" />\n            <feComposite operator=\"in\" in=\"outerFlood\" in2=\"outerBlur\" result=\"outerShadow\" />\n            {/* Combine: drop shadow behind, then outer shadow, then source graphic on top */}\n            <feComposite operator=\"over\" in=\"outerShadow\" in2=\"dropShadow\" result=\"combinedShadows\" />\n            <feComposite operator=\"over\" in=\"SourceGraphic\" in2=\"combinedShadows\" />\n          </filter>\n        </defs>\n      </svg>\n      <div\n        style={style}\n        className={cn(\n          \"relative w-[72px] h-[72px] overflow-hidden select-none\",\n          \"rounded-[20%] supports-[corner-shape:superellipse(1.5)]:[border-radius:30%] supports-[corner-shape:superellipse(1.5)]:[corner-shape:superellipse(1.5)]\",  // https://x.com/konstiwohlwend/status/1991221528206405685\n          \"shadow-[0_4px_12px_0_rgba(0,0,0,0.08)] dark:!shadow-[0_10px_24px_0_rgba(10,69,151,0.28)]\",\n          \"before:absolute before:inset-0 before:bg-gradient-to-br before:from-slate-300 before:via-slate-400 before:to-slate-300 dark:before:from-[#4E7598] dark:before:via-[#0D233D] dark:before:to-[#4E7598] before:rounded-[inherit] before:supports-[corner-shape:superellipse(1.5)]:[border-radius:30%] before:supports-[corner-shape:superellipse(1.5)]:[corner-shape:superellipse(1.5)]\",\n          // !disabled && \"bg-gray-300 dark:bg-gray-900\",\n          // disabled && 'bg-gray-300 dark:bg-gray-900',\n          className,\n        )}\n      >\n        <div className={cn(\"absolute inset-[1px] isolate flex items-center justify-center rounded-[inherit] supports-[corner-shape:superellipse(1.5)]:[border-radius:30%] supports-[corner-shape:superellipse(1.5)]:[corner-shape:superellipse(1.5)]\", !disabled && \"bg-gradient-to-br from-slate-100 to-slate-200 dark:from-[#163050] dark:to-[#090C11]\", disabled && \"bg-gray-300 dark:bg-gray-900\")}>\n          {LogoComponent ? (\n            <div\n              className={cn(\n                \"w-[42%] h-[42%] flex items-center justify-center\",\n                \"[&_svg]:overflow-visible\",\n                !enabled && \"grayscale opacity-60\"\n              )}\n              style={{ filter: `url(#${filterId})` }}\n            >\n              <LogoComponent />\n            </div>\n          ) : (\n            <IconComponent\n              className={cn(\n                \"w-[42%] h-[42%]\",\n                enabled\n                  ? \"stroke-emerald-600 dark:stroke-emerald-400\"\n                  : \"stroke-slate-500 dark:stroke-gray-500\"\n              )}\n              style={{\n                opacity: disabled ? 0.5 : 1,\n                filter: `url(#${filterId})`,\n              }}\n              overflow=\"visible\"\n            />\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n\n"],"mappings":";;;;AAGA,MAAa,2BAA2B;AACxC,MAAa,6BAA6B;AA4B1C,SAAgB,QAAQ,EACtB,OACA,eACA,eACA,WACA,UAAU,OACV,UACA,OACA,MACe;CAEf,MAAM,WAAW;AAEjB,QACE,4CAEE,oBAAC;EAAI,QAAO;EAAI,OAAM;EAAI,OAAO;GAAE,UAAU;GAAY,YAAY;GAAS;YAC5E,oBAAC,oBACC,qBAAC;GAAO,IAAI;GAAU,2BAA0B;GAAO,GAAE;GAAO,GAAE;GAAO,OAAM;GAAO,QAAO;;IAE3F,oBAAC;KAAS,IAAG;KAAI,IAAG;KAAI,IAAG;KAAc,QAAO;MAAe;IAC/D,oBAAC;KAAe,cAAa;KAAI,IAAG;KAAa,QAAO;MAAa;IACrE,oBAAC;KAAQ,YAAW;KAAU,cAAa;KAAM,QAAO;MAAc;IACtE,oBAAC;KAAY,UAAS;KAAK,IAAG;KAAY,KAAI;KAAW,QAAO;MAAe;IAE/E,oBAAC;KAAS,IAAG;KAAI,IAAG;KAAI,IAAG;KAAc,QAAO;MAAgB;IAChE,oBAAC;KAAe,cAAa;KAAI,IAAG;KAAc,QAAO;MAAc;IACvE,oBAAC;KAAQ,YAAW;KAAU,cAAa;KAAM,QAAO;MAAe;IACvE,oBAAC;KAAY,UAAS;KAAK,IAAG;KAAa,KAAI;KAAY,QAAO;MAAgB;IAElF,oBAAC;KAAY,UAAS;KAAO,IAAG;KAAc,KAAI;KAAa,QAAO;MAAoB;IAC1F,oBAAC;KAAY,UAAS;KAAO,IAAG;KAAgB,KAAI;MAAoB;;IACjE,GACJ;GACH,EACN,oBAAC;EACQ;EACP,WAAW,GACT,0DACA,0JACA,4FACA,wXAGA,UACD;YAED,oBAAC;GAAI,WAAW,GAAG,4NAA4N,CAAC,YAAY,uFAAuF,YAAY,+BAA+B;aAC3X,gBACC,oBAAC;IACC,WAAW,GACT,oDACA,4BACA,CAAC,WAAW,uBACb;IACD,OAAO,EAAE,QAAQ,QAAQ,SAAS,IAAI;cAEtC,oBAAC,kBAAgB;KACb,GAEN,oBAAC;IACC,WAAW,GACT,mBACA,UACI,+CACA,wCACL;IACD,OAAO;KACL,SAAS,WAAW,KAAM;KAC1B,QAAQ,QAAQ,SAAS;KAC1B;IACD,UAAS;KACT;IAEA;GACF,IACL"}