@burdenoff/microfe-devportal 2026.626.2 → 2026.626.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,7 +11,7 @@ var c = ({ title: c, description: l, backLink: u, backLabel: d, actions: f, chil
11
11
  return n === e ? t : n;
12
12
  })("devportal.back", "Back");
13
13
  return /* @__PURE__ */ a("div", {
14
- className: t("flex flex-col gap-6 p-6", m),
14
+ className: t("flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-10 xl:px-12", m),
15
15
  children: [/* @__PURE__ */ a("div", {
16
16
  className: t("flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", y && "relative overflow-hidden rounded-card border border-border-seam/60 px-5 py-5 sm:px-6 sm:py-6"),
17
17
  children: [
@@ -1 +1 @@
1
- {"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/devportal/components/PageLayout.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { AuroraBackground, PagePurpose } from \"@burdenoff/fe-libs/ui\";\nimport { cn } from \"../utils/cn\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\n\ninterface PageLayoutProps {\n title: ReactNode;\n description?: string;\n backLink?: string;\n backLabel?: string;\n actions?: ReactNode;\n children: ReactNode;\n className?: string;\n fullWidth?: boolean;\n /**\n * Plain-language \"story\" for the page — WHAT it is for and the real use-case\n * — rendered as a calm {@link PagePurpose} under the header so every page is\n * self-explanatory for a new user. Keep it to one or two sentences.\n */\n purpose?: ReactNode;\n /** Optional \"Learn more\" link rendered at the end of the purpose line. */\n purposeLearnMoreHref?: string;\n purposeLearnMoreLabel?: string;\n /**\n * When true the page header sits over a subtle living-glass aurora backdrop\n * (Boff UI 2.0). Reserve this for the MFE's primary/overview page — one\n * aurora per MFE. The backdrop is decorative (-z-10) and never moves content.\n */\n heroBackdrop?: boolean;\n}\n\n/**\n * Standard page layout with header, optional back link, and actions\n */\nexport const PageLayout: FC<PageLayoutProps> = ({\n title,\n description,\n backLink,\n backLabel,\n actions,\n children,\n className,\n fullWidth = false,\n purpose,\n purposeLearnMoreHref,\n purposeLearnMoreLabel,\n heroBackdrop = false,\n}) => {\n const { navigate, basePath } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const resolvedBackLabel = backLabel ?? tr(\"devportal.back\", \"Back\");\n\n const handleBack = () => {\n if (!navigate || !backLink) return;\n\n const normalizedBasePath = basePath?.endsWith(\"/\")\n ? basePath.slice(0, -1)\n : basePath || \"\";\n const normalizedBackLink = backLink.startsWith(\"/\")\n ? backLink\n : `/${backLink}`;\n const alreadyIncludesBasePath =\n normalizedBasePath.length > 0 &&\n (normalizedBackLink === normalizedBasePath ||\n normalizedBackLink.startsWith(`${normalizedBasePath}/`));\n\n navigate(\n alreadyIncludesBasePath\n ? normalizedBackLink\n : `${normalizedBasePath}${normalizedBackLink}`,\n );\n };\n\n return (\n <div className={cn(\"flex flex-col gap-6 p-6\", className)}>\n {/* Header — optionally over a subtle living-glass aurora backdrop */}\n <div\n className={cn(\n \"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\",\n heroBackdrop &&\n \"relative overflow-hidden rounded-card border border-border-seam/60 px-5 py-5 sm:px-6 sm:py-6\",\n )}\n >\n {heroBackdrop && <AuroraBackground intensity=\"subtle\" />}\n <div className=\"flex flex-col gap-1\">\n {backLink && (\n <button\n onClick={handleBack}\n className=\"mb-2 flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft size={16} />\n {resolvedBackLabel}\n </button>\n )}\n <h1 className=\"text-2xl font-bold tracking-tight\">{title}</h1>\n {description && <p className=\"text-text-secondary\">{description}</p>}\n {purpose && (\n <PagePurpose\n className=\"mt-1 max-w-2xl\"\n learnMoreHref={purposeLearnMoreHref}\n learnMoreLabel={purposeLearnMoreLabel}\n >\n {purpose}\n </PagePurpose>\n )}\n </div>\n {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n </div>\n\n {/* Content */}\n <div className={cn(!fullWidth && \"max-w-7xl\")}>{children}</div>\n </div>\n );\n};\n\n/**\n * Section within a page\n */\nexport const PageSection: FC<\n {\n title?: string;\n description?: string;\n actions?: ReactNode;\n children: ReactNode;\n className?: string;\n } & HTMLAttributes<HTMLElement>\n> = ({ title, description, actions, children, className, ...rest }) => (\n <section className={cn(\"space-y-4\", className)} {...rest}>\n {(title || actions) && (\n <div className=\"flex items-center justify-between\">\n <div>\n {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n {description && (\n <p className=\"text-sm text-text-secondary\">{description}</p>\n )}\n </div>\n {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n </div>\n )}\n {children}\n </section>\n);\n"],"mappings":";;;;;;;AAoCA,IAAa,KAAmC,EAC9C,UACA,gBACA,aACA,cACA,YACA,aACA,cACA,eAAY,IACZ,YACA,yBACA,0BACA,kBAAe,SACX;CACJ,IAAM,EAAE,aAAU,gBAAa,GAAc,EACvC,EAAE,SAAM,GAAS,EAKjB,IAAoB,OAJd,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEM,kBAAkB,OAAO;AAuBnE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,2BAA2B,EAAU;YAAxD,CAEE,kBAAC,OAAD;GACE,WAAW,EACT,sEACA,KACE,+FACH;aALH;IAOG,KAAgB,kBAAC,GAAD,EAAkB,WAAU,UAAW,CAAA;IACxD,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,KACC,kBAAC,UAAD;OACE,eAnCa;AACvB,YAAI,CAAC,KAAY,CAAC,EAAU;QAE5B,IAAM,IAAqB,GAAU,SAAS,IAAI,GAC9C,EAAS,MAAM,GAAG,GAAG,GACrB,KAAY,IACV,IAAqB,EAAS,WAAW,IAAI,GAC/C,IACA,IAAI;AAMR,UAJE,EAAmB,SAAS,MAC3B,MAAuB,KACtB,EAAmB,WAAW,GAAG,EAAmB,GAAG,IAIrD,IACA,GAAG,IAAqB,IAC7B;;OAkBS,WAAU;iBAFZ,CAIE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA,EACtB,EACM;;MAEX,kBAAC,MAAD;OAAI,WAAU;iBAAqC;OAAW,CAAA;MAC7D,KAAe,kBAAC,KAAD;OAAG,WAAU;iBAAuB;OAAgB,CAAA;MACnE,KACC,kBAAC,GAAD;OACE,WAAU;OACV,eAAe;OACf,gBAAgB;iBAEf;OACW,CAAA;MAEZ;;IACL,KAAW,kBAAC,OAAD;KAAK,WAAU;eAA2B;KAAc,CAAA;IAChE;MAGN,kBAAC,OAAD;GAAK,WAAW,EAAG,CAAC,KAAa,YAAY;GAAG;GAAe,CAAA,CAC3D;;GAOG,KAQR,EAAE,UAAO,gBAAa,YAAS,aAAU,cAAW,GAAG,QAC1D,kBAAC,WAAD;CAAS,WAAW,EAAG,aAAa,EAAU;CAAE,GAAI;WAApD,EACI,KAAS,MACT,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACG,KAAS,kBAAC,MAAD;GAAI,WAAU;aAAyB;GAAW,CAAA,EAC3D,KACC,kBAAC,KAAD;GAAG,WAAU;aAA+B;GAAgB,CAAA,CAE1D,EAAA,CAAA,EACL,KAAW,kBAAC,OAAD;GAAK,WAAU;aAA2B;GAAc,CAAA,CAChE;KAEP,EACO"}
1
+ {"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/devportal/components/PageLayout.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { AuroraBackground, PagePurpose } from \"@burdenoff/fe-libs/ui\";\nimport { cn } from \"../utils/cn\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\n\ninterface PageLayoutProps {\n title: ReactNode;\n description?: string;\n backLink?: string;\n backLabel?: string;\n actions?: ReactNode;\n children: ReactNode;\n className?: string;\n fullWidth?: boolean;\n /**\n * Plain-language \"story\" for the page — WHAT it is for and the real use-case\n * — rendered as a calm {@link PagePurpose} under the header so every page is\n * self-explanatory for a new user. Keep it to one or two sentences.\n */\n purpose?: ReactNode;\n /** Optional \"Learn more\" link rendered at the end of the purpose line. */\n purposeLearnMoreHref?: string;\n purposeLearnMoreLabel?: string;\n /**\n * When true the page header sits over a subtle living-glass aurora backdrop\n * (Boff UI 2.0). Reserve this for the MFE's primary/overview page — one\n * aurora per MFE. The backdrop is decorative (-z-10) and never moves content.\n */\n heroBackdrop?: boolean;\n}\n\n/**\n * Standard page layout with header, optional back link, and actions\n */\nexport const PageLayout: FC<PageLayoutProps> = ({\n title,\n description,\n backLink,\n backLabel,\n actions,\n children,\n className,\n fullWidth = false,\n purpose,\n purposeLearnMoreHref,\n purposeLearnMoreLabel,\n heroBackdrop = false,\n}) => {\n const { navigate, basePath } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const resolvedBackLabel = backLabel ?? tr(\"devportal.back\", \"Back\");\n\n const handleBack = () => {\n if (!navigate || !backLink) return;\n\n const normalizedBasePath = basePath?.endsWith(\"/\")\n ? basePath.slice(0, -1)\n : basePath || \"\";\n const normalizedBackLink = backLink.startsWith(\"/\")\n ? backLink\n : `/${backLink}`;\n const alreadyIncludesBasePath =\n normalizedBasePath.length > 0 &&\n (normalizedBackLink === normalizedBasePath ||\n normalizedBackLink.startsWith(`${normalizedBasePath}/`));\n\n navigate(\n alreadyIncludesBasePath\n ? normalizedBackLink\n : `${normalizedBasePath}${normalizedBackLink}`,\n );\n };\n\n return (\n <div className={cn(\"flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-10 xl:px-12\", className)}>\n {/* Header — optionally over a subtle living-glass aurora backdrop */}\n <div\n className={cn(\n \"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\",\n heroBackdrop &&\n \"relative overflow-hidden rounded-card border border-border-seam/60 px-5 py-5 sm:px-6 sm:py-6\",\n )}\n >\n {heroBackdrop && <AuroraBackground intensity=\"subtle\" />}\n <div className=\"flex flex-col gap-1\">\n {backLink && (\n <button\n onClick={handleBack}\n className=\"mb-2 flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft size={16} />\n {resolvedBackLabel}\n </button>\n )}\n <h1 className=\"text-2xl font-bold tracking-tight\">{title}</h1>\n {description && <p className=\"text-text-secondary\">{description}</p>}\n {purpose && (\n <PagePurpose\n className=\"mt-1 max-w-2xl\"\n learnMoreHref={purposeLearnMoreHref}\n learnMoreLabel={purposeLearnMoreLabel}\n >\n {purpose}\n </PagePurpose>\n )}\n </div>\n {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n </div>\n\n {/* Content */}\n <div className={cn(!fullWidth && \"max-w-7xl\")}>{children}</div>\n </div>\n );\n};\n\n/**\n * Section within a page\n */\nexport const PageSection: FC<\n {\n title?: string;\n description?: string;\n actions?: ReactNode;\n children: ReactNode;\n className?: string;\n } & HTMLAttributes<HTMLElement>\n> = ({ title, description, actions, children, className, ...rest }) => (\n <section className={cn(\"space-y-4\", className)} {...rest}>\n {(title || actions) && (\n <div className=\"flex items-center justify-between\">\n <div>\n {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n {description && (\n <p className=\"text-sm text-text-secondary\">{description}</p>\n )}\n </div>\n {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n </div>\n )}\n {children}\n </section>\n);\n"],"mappings":";;;;;;;AAoCA,IAAa,KAAmC,EAC9C,UACA,gBACA,aACA,cACA,YACA,aACA,cACA,eAAY,IACZ,YACA,yBACA,0BACA,kBAAe,SACX;CACJ,IAAM,EAAE,aAAU,gBAAa,GAAc,EACvC,EAAE,SAAM,GAAS,EAKjB,IAAoB,OAJd,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEM,kBAAkB,OAAO;AAuBnE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,2EAA2E,EAAU;YAAxG,CAEE,kBAAC,OAAD;GACE,WAAW,EACT,sEACA,KACE,+FACH;aALH;IAOG,KAAgB,kBAAC,GAAD,EAAkB,WAAU,UAAW,CAAA;IACxD,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,KACC,kBAAC,UAAD;OACE,eAnCa;AACvB,YAAI,CAAC,KAAY,CAAC,EAAU;QAE5B,IAAM,IAAqB,GAAU,SAAS,IAAI,GAC9C,EAAS,MAAM,GAAG,GAAG,GACrB,KAAY,IACV,IAAqB,EAAS,WAAW,IAAI,GAC/C,IACA,IAAI;AAMR,UAJE,EAAmB,SAAS,MAC3B,MAAuB,KACtB,EAAmB,WAAW,GAAG,EAAmB,GAAG,IAIrD,IACA,GAAG,IAAqB,IAC7B;;OAkBS,WAAU;iBAFZ,CAIE,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA,EACtB,EACM;;MAEX,kBAAC,MAAD;OAAI,WAAU;iBAAqC;OAAW,CAAA;MAC7D,KAAe,kBAAC,KAAD;OAAG,WAAU;iBAAuB;OAAgB,CAAA;MACnE,KACC,kBAAC,GAAD;OACE,WAAU;OACV,eAAe;OACf,gBAAgB;iBAEf;OACW,CAAA;MAEZ;;IACL,KAAW,kBAAC,OAAD;KAAK,WAAU;eAA2B;KAAc,CAAA;IAChE;MAGN,kBAAC,OAAD;GAAK,WAAW,EAAG,CAAC,KAAa,YAAY;GAAG;GAAe,CAAA,CAC3D;;GAOG,KAQR,EAAE,UAAO,gBAAa,YAAS,aAAU,cAAW,GAAG,QAC1D,kBAAC,WAAD;CAAS,WAAW,EAAG,aAAa,EAAU;CAAE,GAAI;WAApD,EACI,KAAS,MACT,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACG,KAAS,kBAAC,MAAD;GAAI,WAAU;aAAyB;GAAW,CAAA,EAC3D,KACC,kBAAC,KAAD;GAAG,WAAU;aAA+B;GAAgB,CAAA,CAE1D,EAAA,CAAA,EACL,KAAW,kBAAC,OAAD;GAAK,WAAU;aAA2B;GAAc,CAAA,CAChE;KAEP,EACO"}