@fluid-app/portal-sdk 0.1.51 → 0.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-app/portal-sdk",
-  "version": "0.1.51",
+  "version": "0.1.52",
   "description": "SDK for building custom Fluid portals",
   "files": [
     "dist",
@@ -62,41 +62,41 @@
     "tsdown": "^0.21.0",
     "typescript": "^5",
     "zod": "4.3.5",
-    "@fluid-app/auth": "0.1.0",
     "@fluid-app/api-client-core": "0.1.0",
-    "@fluid-app/contacts-ui": "0.1.0",
-    "@fluid-app/fluidos-api-client": "0.1.0",
+    "@fluid-app/company-switcher-core": "0.1.0",
+    "@fluid-app/auth": "0.1.0",
     "@fluid-app/company-switcher-ui": "0.1.0",
     "@fluid-app/file-picker-api-client": "0.1.0",
-    "@fluid-app/company-switcher-core": "0.1.0",
-    "@fluid-app/messaging-api-client": "0.1.0",
+    "@fluid-app/contacts-ui": "0.1.0",
     "@fluid-app/fluid-pay-api-client": "0.1.0",
-    "@fluid-app/messaging-core": "0.1.0",
-    "@fluid-app/mysite-ui": "0.1.0",
+    "@fluid-app/fluidos-api-client": "0.1.0",
+    "@fluid-app/messaging-api-client": "0.1.0",
     "@fluid-app/messaging-ui": "0.1.0",
+    "@fluid-app/mysite-ui": "0.1.0",
+    "@fluid-app/messaging-core": "0.1.0",
     "@fluid-app/orders-api-client": "0.1.0",
+    "@fluid-app/orders-core": "0.1.0",
     "@fluid-app/orders-ui": "0.1.0",
     "@fluid-app/permissions": "0.1.0",
     "@fluid-app/portal-core": "0.1.23",
-    "@fluid-app/orders-core": "0.1.0",
     "@fluid-app/portal-react": "0.1.0",
     "@fluid-app/portal-widgets": "0.1.22",
     "@fluid-app/products-api-client": "0.1.0",
     "@fluid-app/products-core": "0.1.0",
     "@fluid-app/profile-core": "0.1.0",
-    "@fluid-app/query-persister": "0.1.0",
     "@fluid-app/profile-ui": "0.1.0",
+    "@fluid-app/query-persister": "0.1.0",
     "@fluid-app/shareables-api-client": "0.1.0",
     "@fluid-app/shareables-core": "0.1.0",
     "@fluid-app/shareables-ui": "0.1.0",
+    "@fluid-app/shop-ui": "0.1.0",
     "@fluid-app/subscriptions-api-client": "0.1.0",
     "@fluid-app/subscriptions-core": "0.1.0",
     "@fluid-app/subscriptions-ui": "0.1.0",
-    "@fluid-app/shop-ui": "0.1.0",
-    "@fluid-app/ui-primitives": "0.1.13",
     "@fluid-app/typescript-config": "0.0.0",
-    "@fluid-app/user-notes-api-client": "0.1.0",
+    "@fluid-app/ui-primitives": "0.1.13",
     "@fluid-app/user-contacts-api-client": "0.1.0",
+    "@fluid-app/user-notes-api-client": "0.1.0",
     "@fluid-app/user-tasks-api-client": "0.1.0"
   },
   "peerDependencies": {

package/styles/globals.css

@@ -1,187 +1,185 @@
 /*
- * Portal SDK – combined CSS for widget safelist patterns, animations,
- * and messaging custom utilities.
+ * Portal SDK – automatically imports and sets up all fluid required CSS.
  *
  * Import this in your app's main CSS file:
  *   @import "@fluid-app/portal-sdk/globals.css";
  */
 
-/* ── Tailwind safelist patterns (portal-widgets) ─────────────────────────────
- * Dynamic class names constructed at runtime by the widget/builder system.
- * Tailwind can't detect these by scanning JS, so we declare them explicitly.
- */
-/* prettier-ignore */
-@source inline("{even:,placeholder:,hover:,}{bg,text,border}-{background,foreground,primary,secondary,accent,border,muted,destructive}{-foreground,}{-{100..900..100},}{/{10..100..10},}");
-@source inline("border-{0,2,4}");
-@source inline("p{x,y,t,b,}-{0..10..2}");
-@source inline("text-{2xl,xl,lg,md,base,sm,xs}");
-@source inline("rounded-{none,sm,md,lg,xl,full}");
-@source inline("flex-{row,col,row-reverse,col-reverse}");
-@source inline("justify-{start,end,center,between,around,evenly}");
-@source inline("items-{start,end,center,stretch,baseline}");
-@source inline("grid-cols-{1..12..1}");
-@source inline("grid-rows-{auto,{1..12..1}}");
-@source inline("gap-{1,{0..8..2}}");
-@source inline("h-{2,4,8,16,24,32}");
-@source inline("object-{contain,cover,fill,none}");
-@source inline("aspect-{square,video}");
-@source inline("@md:grid-cols-{2,3}");
-@source inline("@md:grid-cols-[{1,2,3}fr_{1,2,3}fr]");
-@source inline("@md:grid-cols-[1fr_2fr_1fr]");
-
-/* ── Animations ──────────────────────────────────────────────────────────── */
-@import "tw-animate-css";
-
-/* ── Messaging custom utilities ──────────────────────────────────────────── */
-
-@utility text-messaging-1 {
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: 1.4;
-}
-
-@utility text-messaging-2 {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  line-height: 1.53846;
-}
+/* ── Package CSS imports ─────────────────────────────────────────────────── */
+@import "@fluid-app/company-switcher-ui/styles/company-switcher.css";
+@import "@fluid-app/contacts-ui/styles/contacts.css";
+@import "@fluid-app/messaging-ui/styles/messaging.css";
+@import "@fluid-app/orders-ui/styles/orders.css";
+@import "@fluid-app/shop-ui/styles/shop.css";
+@import "@fluid-app/profile-ui/styles/profile.css";
+@import "@fluid-app/shareables-ui/styles/shareables.css";
+@import "@fluid-app/subscriptions-ui/styles/subscriptions.css";
+@import "@fluid-app/mysite-ui/styles/mysite.css";
+@import "@fluid-app/ui-primitives/styles/ui-primitives.css";
+@import "@fluid-app/portal-widgets/globals.css";
+@import "@fluid-app/portal-react/globals.css";
+
+/* ── Source ──────────────────────────────────────────────────────────────── */
+@source "../src/**/*.{ts,tsx}";
+/* This is required for the published version */
+@source "../dist/**/*.{js,mjs}";
 
-@utility text-messaging-3 {
-  font-size: 0.8125rem;
-  font-weight: 400;
-  line-height: 1.53846;
-}
-
-@utility text-messaging-4 {
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.33333;
-}
-
-@utility text-messaging-5 {
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1.33333;
-}
-
-@utility text-messaging-6 {
-  font-size: 0.5625rem;
-  font-weight: 500;
-  line-height: 1.55556;
-}
-
-@utility text-messaging-7 {
-  font-size: 0.5rem;
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-@utility messaging-gradient {
-  background: linear-gradient(
-    27deg,
-    #111c28 8.33%,
-    #1b2839 25.04%,
-    #304054 88.17%,
-    #314155 91.67%
-  );
-  background: linear-gradient(
-    27deg,
-    color(display-p3 0.0772 0.1087 0.1529) 8.33%,
-    color(display-p3 0.1164 0.1572 0.2162) 25.04%,
-    color(display-p3 0.2007 0.2475 0.3221) 88.17%,
-    color(display-p3 0.2053 0.2525 0.328) 91.67%
-  );
+/*
+ * Register CSS variables as Tailwind theme values.
+ * `inline` means Tailwind won't emit its own --color-* declarations —
+ * we define them ourselves in :root below (and the theme engine overrides
+ * them at runtime via [data-theme="..."]).
+ */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius: var(--radius);
 }
 
-@utility capsize {
-  text-box: trim-both cap alphabetic;
+/* Light mode fallback tokens (OKLCH format) */
+:root {
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.145 0 0);
+  --color-primary: oklch(0.205 0 0);
+  --color-primary-foreground: oklch(0.985 0 0);
+  --color-secondary: oklch(0.97 0 0);
+  --color-secondary-foreground: oklch(0.205 0 0);
+  --color-muted: oklch(0.97 0 0);
+  --color-muted-foreground: oklch(0.556 0 0);
+  --color-accent: oklch(0.97 0 0);
+  --color-accent-foreground: oklch(0.205 0 0);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.922 0 0);
+
+  /* Short-name aliases (match css-generator globalCSSOverride) */
+  --background: var(--color-background);
+  --foreground: var(--color-foreground);
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-primary-foreground);
+  --secondary: var(--color-secondary);
+  --secondary-foreground: var(--color-secondary-foreground);
+  --muted: var(--color-muted);
+  --muted-foreground: var(--color-muted-foreground);
+  --accent: var(--color-accent);
+  --accent-foreground: var(--color-accent-foreground);
+  --destructive: var(--color-destructive);
+  --destructive-foreground: var(--color-destructive-foreground);
+  --border: var(--color-border);
+  --input: var(--color-border);
+  --ring: var(--color-primary);
+  --radius: 0.625rem;
+
+  /* Popover / Card aliases */
+  --popover: var(--color-background);
+  --popover-foreground: var(--color-foreground);
+  --card: var(--color-background);
+  --card-foreground: var(--color-foreground);
+
+  /* Sidebar aliases */
+  --sidebar: var(--color-muted);
+  --sidebar-foreground: var(--color-muted-foreground);
+  --sidebar-primary: var(--color-primary);
+  --sidebar-primary-foreground: var(--color-primary-foreground);
+  --sidebar-accent: var(--color-accent);
+  --sidebar-accent-foreground: var(--color-accent-foreground);
+  --sidebar-border: var(--color-border);
+  --sidebar-ring: var(--color-primary);
 }
 
-@utility children-pointer-events-auto {
-  & > * {
-    pointer-events: auto;
-  }
-}
-
-@utility list-nested-ordered {
-  list-style-type: decimal;
-
-  & & {
-    list-style-type: lower-alpha;
-  }
-
-  & & & {
-    list-style-type: lower-roman;
-  }
-
-  & & & & {
-    list-style-type: decimal;
-  }
-
-  & & & & & {
-    list-style-type: lower-alpha;
-  }
-
-  & & & & & & {
-    list-style-type: lower-roman;
-  }
-
-  & & & & & & & {
-    list-style-type: decimal;
-
-    & & {
-      padding-left: 0;
-    }
-  }
+/*
+ * Dark-mode fallback tokens.
+ * Applied when the user toggles dark mode but no API theme is loaded.
+ * The theme engine will override these with richer palette-derived values
+ * once a theme is fetched from the API.
+ */
+[data-theme-mode="dark"] {
+  --color-background: oklch(0.145 0 0);
+  --color-foreground: oklch(0.985 0 0);
+  --color-primary: oklch(0.985 0 0);
+  --color-primary-foreground: oklch(0.205 0 0);
+  --color-secondary: oklch(0.215 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(0.215 0 0);
+  --color-muted-foreground: oklch(0.708 0 0);
+  --color-accent: oklch(0.215 0 0);
+  --color-accent-foreground: oklch(0.985 0 0);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.3 0 0);
+
+  --background: var(--color-background);
+  --foreground: var(--color-foreground);
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-primary-foreground);
+  --secondary: var(--color-secondary);
+  --secondary-foreground: var(--color-secondary-foreground);
+  --muted: var(--color-muted);
+  --muted-foreground: var(--color-muted-foreground);
+  --accent: var(--color-accent);
+  --accent-foreground: var(--color-accent-foreground);
+  --destructive: var(--color-destructive);
+  --destructive-foreground: var(--color-destructive-foreground);
+  --border: var(--color-border);
+  --input: var(--color-border);
+  --ring: var(--color-primary);
+
+  --popover: var(--color-background);
+  --popover-foreground: var(--color-foreground);
+  --card: var(--color-background);
+  --card-foreground: var(--color-foreground);
+
+  --sidebar: var(--color-muted);
+  --sidebar-foreground: var(--color-muted-foreground);
+  --sidebar-primary: var(--color-primary);
+  --sidebar-primary-foreground: var(--color-primary-foreground);
+  --sidebar-accent: var(--color-accent);
+  --sidebar-accent-foreground: var(--color-accent-foreground);
+  --sidebar-border: var(--color-border);
+  --sidebar-ring: var(--color-primary);
 }
 
-@utility list-nested-unordered {
-  list-style-type: disc;
-
-  & & {
-    list-style-type: circle;
-  }
-
-  & & & {
-    list-style-type: square;
+@layer base {
+  * {
+    @apply border-border;
   }
-
-  & & & & {
-    list-style-type: disc;
-  }
-
-  & & & & & {
-    list-style-type: circle;
-  }
-
-  & & & & & & {
-    list-style-type: square;
-  }
-
-  & & & & & & & {
-    list-style-type: disc;
-
-    & & {
-      padding-left: 0;
-    }
+  body {
+    @apply bg-background text-foreground;
   }
 }
 
-@utility overlapping-children {
-  display: grid;
-
-  & > * {
-    grid-area: 1 / 1 / 2 / 2;
+/* Hide scrollbars while preserving scroll functionality */
+@layer utilities {
+  .scrollbar-none {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
   }
-}
-
-@utility content-auto {
-  content-visibility: auto;
-}
-
-@utility hide-date-picker {
-  &::-webkit-calendar-picker-indicator {
+  .scrollbar-none::-webkit-scrollbar {
     display: none;
-    -webkit-appearance: none;
   }
 }

package/styles/theme.css

@@ -1,169 +0,0 @@
-/*
- * Portal SDK – Default design tokens and Tailwind theme registration.
- *
- * Import this in your portal's main CSS file:
- *   @import "@fluid-app/portal-sdk/theme.css";
- *
- * The theme engine injects higher-specificity CSS via [data-theme="..."]
- * which overrides these fallback values at runtime for both light and dark modes.
- */
-
-/*
- * Register CSS variables as Tailwind theme values.
- * `inline` means Tailwind won't emit its own --color-* declarations —
- * we define them ourselves in :root below (and the theme engine overrides
- * them at runtime via [data-theme="..."]).
- */
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --radius: var(--radius);
-}
-
-/* Light mode fallback tokens (OKLCH format) */
-:root {
-  --color-background: oklch(1 0 0);
-  --color-foreground: oklch(0.145 0 0);
-  --color-primary: oklch(0.205 0 0);
-  --color-primary-foreground: oklch(0.985 0 0);
-  --color-secondary: oklch(0.97 0 0);
-  --color-secondary-foreground: oklch(0.205 0 0);
-  --color-muted: oklch(0.97 0 0);
-  --color-muted-foreground: oklch(0.556 0 0);
-  --color-accent: oklch(0.97 0 0);
-  --color-accent-foreground: oklch(0.205 0 0);
-  --color-destructive: oklch(0.577 0.245 27.325);
-  --color-destructive-foreground: oklch(0.985 0 0);
-  --color-border: oklch(0.922 0 0);
-
-  /* Short-name aliases (match css-generator globalCSSOverride) */
-  --background: var(--color-background);
-  --foreground: var(--color-foreground);
-  --primary: var(--color-primary);
-  --primary-foreground: var(--color-primary-foreground);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-secondary-foreground);
-  --muted: var(--color-muted);
-  --muted-foreground: var(--color-muted-foreground);
-  --accent: var(--color-accent);
-  --accent-foreground: var(--color-accent-foreground);
-  --destructive: var(--color-destructive);
-  --destructive-foreground: var(--color-destructive-foreground);
-  --border: var(--color-border);
-  --input: var(--color-border);
-  --ring: var(--color-primary);
-  --radius: 0.625rem;
-
-  /* Popover / Card aliases */
-  --popover: var(--color-background);
-  --popover-foreground: var(--color-foreground);
-  --card: var(--color-background);
-  --card-foreground: var(--color-foreground);
-
-  /* Sidebar aliases */
-  --sidebar: var(--color-muted);
-  --sidebar-foreground: var(--color-muted-foreground);
-  --sidebar-primary: var(--color-primary);
-  --sidebar-primary-foreground: var(--color-primary-foreground);
-  --sidebar-accent: var(--color-accent);
-  --sidebar-accent-foreground: var(--color-accent-foreground);
-  --sidebar-border: var(--color-border);
-  --sidebar-ring: var(--color-primary);
-}
-
-/*
- * Dark-mode fallback tokens.
- * Applied when the user toggles dark mode but no API theme is loaded.
- * The theme engine will override these with richer palette-derived values
- * once a theme is fetched from the API.
- */
-[data-theme-mode="dark"] {
-  --color-background: oklch(0.145 0 0);
-  --color-foreground: oklch(0.985 0 0);
-  --color-primary: oklch(0.985 0 0);
-  --color-primary-foreground: oklch(0.205 0 0);
-  --color-secondary: oklch(0.215 0 0);
-  --color-secondary-foreground: oklch(0.985 0 0);
-  --color-muted: oklch(0.215 0 0);
-  --color-muted-foreground: oklch(0.708 0 0);
-  --color-accent: oklch(0.215 0 0);
-  --color-accent-foreground: oklch(0.985 0 0);
-  --color-destructive: oklch(0.577 0.245 27.325);
-  --color-destructive-foreground: oklch(0.985 0 0);
-  --color-border: oklch(0.3 0 0);
-
-  --background: var(--color-background);
-  --foreground: var(--color-foreground);
-  --primary: var(--color-primary);
-  --primary-foreground: var(--color-primary-foreground);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-secondary-foreground);
-  --muted: var(--color-muted);
-  --muted-foreground: var(--color-muted-foreground);
-  --accent: var(--color-accent);
-  --accent-foreground: var(--color-accent-foreground);
-  --destructive: var(--color-destructive);
-  --destructive-foreground: var(--color-destructive-foreground);
-  --border: var(--color-border);
-  --input: var(--color-border);
-  --ring: var(--color-primary);
-
-  --popover: var(--color-background);
-  --popover-foreground: var(--color-foreground);
-  --card: var(--color-background);
-  --card-foreground: var(--color-foreground);
-
-  --sidebar: var(--color-muted);
-  --sidebar-foreground: var(--color-muted-foreground);
-  --sidebar-primary: var(--color-primary);
-  --sidebar-primary-foreground: var(--color-primary-foreground);
-  --sidebar-accent: var(--color-accent);
-  --sidebar-accent-foreground: var(--color-accent-foreground);
-  --sidebar-border: var(--color-border);
-  --sidebar-ring: var(--color-primary);
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Hide scrollbars while preserving scroll functionality */
-@layer utilities {
-  .scrollbar-none {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-  .scrollbar-none::-webkit-scrollbar {
-    display: none;
-  }
-}