8seneca-app-launcher 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { LucideIcon } from 'lucide-react';
+
+type AppId = "hrm" | "plane" | "portal";
+type AppTile = {
+    id: AppId;
+    name: string;
+    url: string;
+    icon: LucideIcon;
+    /** Any CSS colour string; painted behind the tile icon. */
+    color: string;
+};
+type AppLauncherProps = {
+    /** Override tile URLs by id — local development only. */
+    urls?: Partial<Record<AppId, string>>;
+    /** Panel heading. Default: "Your apps". */
+    label?: string;
+    /** Inline trigger only: which edge the panel aligns to. Default: "end". */
+    align?: "start" | "end";
+};
+
+/** Inline 9-dot trigger — mount inside an app's own header or top bar. */
+declare function AppLauncher({ urls, label, align }?: AppLauncherProps): react.JSX.Element;
+/** Floating trigger at bottom-right — mount once in an app's root layout. */
+declare function AppLauncherFab({ urls, label }?: AppLauncherProps): react.JSX.Element;
+
+type PanelProps = {
+    tiles: AppTile[];
+    hostname: string;
+    label: string;
+    id: string;
+};
+declare function LauncherPanel({ tiles, hostname, label, id }: PanelProps): react.JSX.Element;
+
+/**
+ * The complete 8seneca app list. URLs live here on purpose: the apps' env
+ * conventions diverge (NEXT_PUBLIC_* vs VITE_*), so baking them keeps every
+ * consumer at zero configuration. Adding an app means publishing a version.
+ */
+declare const APPS: AppTile[];
+/** Applies per-id URL overrides. Unknown ids and empty strings are ignored. */
+declare function resolveApps(urls?: Partial<Record<AppId, string>>): AppTile[];
+/** True when the tile points at the page we are already on. */
+declare function isCurrent(app: AppTile, hostname: string): boolean;
+
+export { APPS, type AppId, AppLauncher, AppLauncherFab, type AppLauncherProps, type AppTile, LauncherPanel, isCurrent, resolveApps };

package/dist/index.js

@@ -0,0 +1,188 @@
+"use client";
+
+// src/launcher.tsx
+import { Grid3x3 } from "lucide-react";
+
+// src/apps.ts
+import { Briefcase, FolderKanban, LayoutGrid } from "lucide-react";
+var APPS = [
+  {
+    id: "hrm",
+    name: "8People",
+    url: "https://people.8seneca.com",
+    icon: Briefcase,
+    color: "oklch(0.65 0.15 240)"
+  },
+  {
+    id: "plane",
+    name: "8Projects",
+    url: "https://projects.8seneca.com",
+    icon: FolderKanban,
+    color: "oklch(0.65 0.15 30)"
+  },
+  {
+    id: "portal",
+    name: "8Seneca Hub",
+    url: "https://portal.8seneca.com",
+    icon: LayoutGrid,
+    color: "oklch(0.65 0.15 150)"
+  }
+];
+function resolveApps(urls) {
+  if (!urls) return APPS;
+  return APPS.map((app) => {
+    const override = urls[app.id];
+    return override ? { ...app, url: override } : app;
+  });
+}
+function isCurrent(app, hostname) {
+  if (!hostname) return false;
+  try {
+    return new URL(app.url).hostname === hostname;
+  } catch {
+    return false;
+  }
+}
+
+// src/panel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TILE_CLASS = "flex flex-col items-center gap-1.5 rounded-xl p-3 no-underline transition-colors text-launcher-fg hover:bg-launcher-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-launcher-ring";
+function LauncherPanel({ tiles, hostname, label, id }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      role: "group",
+      "aria-label": label,
+      className: "w-72 rounded-2xl border border-launcher-border bg-launcher-surface p-4 shadow-lg",
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-3 px-2 text-xs font-medium uppercase tracking-wide text-launcher-muted", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: tiles.map((app) => {
+          const Icon = app.icon;
+          const current = isCurrent(app, hostname);
+          const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex h-10 w-10 items-center justify-center rounded-xl",
+                style: { backgroundColor: app.color },
+                children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-white", strokeWidth: 2, "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: app.name })
+          ] });
+          return current ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-current": "page",
+              className: `${TILE_CLASS} cursor-default bg-launcher-hover`,
+              children: body
+            },
+            app.id
+          ) : /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: app.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: TILE_CLASS,
+              children: body
+            },
+            app.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/use-launcher.ts
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+function useLauncher() {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const panelId = useId();
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const toggle = useCallback(() => setOpen((value) => !value), []);
+  const close = useCallback(() => setOpen(false), []);
+  return { open, toggle, close, rootRef, triggerRef, panelId };
+}
+function useHostname() {
+  const [hostname, setHostname] = useState("");
+  useEffect(() => setHostname(window.location.hostname), []);
+  return hostname;
+}
+
+// src/launcher.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TRIGGER_BASE = "inline-flex items-center justify-center rounded-full text-launcher-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-launcher-ring";
+function AppLauncher({ urls, label = "Your apps", align = "end" } = {}) {
+  const { open, toggle, rootRef, triggerRef, panelId } = useLauncher();
+  const hostname = useHostname();
+  const tiles = resolveApps(urls);
+  return /* @__PURE__ */ jsxs2("div", { ref: rootRef, className: "relative", children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: toggle,
+        "aria-haspopup": "true",
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        "aria-label": "Open app launcher",
+        className: `${TRIGGER_BASE} h-9 w-9 hover:bg-launcher-hover`,
+        children: /* @__PURE__ */ jsx2(Grid3x3, { className: "h-5 w-5", "aria-hidden": "true" })
+      }
+    ),
+    open && /* @__PURE__ */ jsx2("div", { className: `absolute top-11 z-50 ${align === "end" ? "right-0" : "left-0"}`, children: /* @__PURE__ */ jsx2(LauncherPanel, { tiles, hostname, label, id: panelId }) })
+  ] });
+}
+function AppLauncherFab({ urls, label = "Your apps" } = {}) {
+  const { open, toggle, rootRef, triggerRef, panelId } = useLauncher();
+  const hostname = useHostname();
+  const tiles = resolveApps(urls);
+  return /* @__PURE__ */ jsxs2("div", { ref: rootRef, className: "fixed bottom-6 right-6 z-50", children: [
+    open && /* @__PURE__ */ jsx2("div", { className: "absolute bottom-16 right-0", children: /* @__PURE__ */ jsx2(LauncherPanel, { tiles, hostname, label, id: panelId }) }),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: toggle,
+        "aria-haspopup": "true",
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        "aria-label": "Open app launcher",
+        title: "Open apps",
+        className: `${TRIGGER_BASE} size-12 bg-launcher-surface border border-launcher-border shadow-lg transition-transform hover:scale-105`,
+        children: /* @__PURE__ */ jsx2(Grid3x3, { className: "size-5", "aria-hidden": "true" })
+      }
+    )
+  ] });
+}
+export {
+  APPS,
+  AppLauncher,
+  AppLauncherFab,
+  LauncherPanel,
+  isCurrent,
+  resolveApps
+};

package/dist/styles.css

@@ -0,0 +1,14 @@
+/*
+ * Token namespace for the launcher. Resolution order per token:
+ *   1. --launcher-*        an app's explicit override
+ *   2. the shadcn variable  (hrm, portal — free)
+ *   3. a light-only literal (last resort)
+ */
+@theme {
+  --color-launcher-surface: var(--launcher-surface, var(--popover, oklch(1 0 0)));
+  --color-launcher-fg: var(--launcher-fg, var(--popover-foreground, oklch(0.145 0 0)));
+  --color-launcher-muted: var(--launcher-muted, var(--muted-foreground, oklch(0.55 0 0)));
+  --color-launcher-hover: var(--launcher-hover, var(--accent, oklch(0.96 0 0)));
+  --color-launcher-border: var(--launcher-border, var(--border, oklch(0.92 0 0)));
+  --color-launcher-ring: var(--launcher-ring, var(--ring, currentColor));
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "8seneca-app-launcher",
+  "version": "0.1.0",
+  "description": "9-dot app launcher shared across the 8seneca apps",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/8seneca-hub/8seneca-ui.git",
+    "directory": "packages/app-launcher"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "pnpm build && node --test test/*.test.mjs",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "pnpm test"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "lucide-react": ">=0.454"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "lucide-react": "^0.454.0",
+    "react": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.0"
+  }
+}