@12-apps/ui 6.10.1 → 6.11.1

package/dist/chunk-KD34ODAZ.js

@@ -0,0 +1,124 @@
+import {
+  SaveViewModal
+} from "./chunk-GYLOBDUC.js";
+import {
+  ManageViewsDialog
+} from "./chunk-WTJ2643W.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  SavedViewsMenu
+} from "./chunk-JCSZUDY4.js";
+import {
+  Alert
+} from "./chunk-GQ75VOPI.js";
+
+// src/components/data-display/DataViews/data-views-table-parts.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ViewMutationErrorAlert({
+  error,
+  onClose,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (!error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      variant: "danger",
+      title: copy.nav.updateFailed,
+      description: error,
+      closable: true,
+      closeLabel: copy.nav.dismissError,
+      onClose,
+      "data-testid": `${testIdPrefix}-views-mutation-error`
+    }
+  );
+}
+function ViewsMenuSlot({
+  views,
+  activeViewName,
+  applyView,
+  selectMain,
+  openCreate,
+  openEdit,
+  handleDelete,
+  patchView,
+  onManageAll,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    SavedViewsMenu,
+    {
+      labels: copy.savedViewsMenu,
+      views,
+      activeViewName,
+      onApply: applyView,
+      onSelectMain: selectMain,
+      onSaveCurrent: openCreate,
+      onEdit: openEdit,
+      onDelete: (view) => void handleDelete(view),
+      onSetDefault: (view) => void patchView(view, { isDefault: true }),
+      onTogglePin: (view) => void patchView(view, { pinned: !view.pinned }),
+      onToggleShare: (view) => void patchView(view, { shared: !view.shared }),
+      onManageAll,
+      testIdPrefix: `${testIdPrefix}-views`
+    }
+  );
+}
+function ViewDialogs({
+  saveOpen,
+  onCloseSave,
+  currentState,
+  fields,
+  columns,
+  editing,
+  onSave,
+  manageOpen,
+  onCloseManage,
+  views,
+  onEditFromManage,
+  onDelete,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SaveViewModal,
+      {
+        open: saveOpen,
+        onClose: onCloseSave,
+        currentState,
+        fields,
+        columns,
+        editing,
+        onSave,
+        testIdPrefix: `${testIdPrefix}-views`
+      },
+      editing ? `edit-${editing.id}` : "create"
+    ),
+    /* @__PURE__ */ jsx(
+      ManageViewsDialog,
+      {
+        confirmCopy: copy.confirmAction,
+        open: manageOpen,
+        onClose: onCloseManage,
+        views,
+        onEdit: onEditFromManage,
+        onDelete,
+        testIdPrefix: `${testIdPrefix}-views`
+      }
+    )
+  ] });
+}
+
+export {
+  ViewMutationErrorAlert,
+  ViewsMenuSlot,
+  ViewDialogs
+};
+//# sourceMappingURL=chunk-KD34ODAZ.js.map

package/dist/chunk-KD34ODAZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-table-parts.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Alert } from \"../Alert\";\nimport { SavedViewsMenu } from \"../../layout/ContentToolbar\";\n\nimport {\n  type DataViewColumn,\n  type DataViewState,\n  type FilterFieldConfig,\n  type SavedViewSummary,\n} from \"./data-views-types\";\nimport { ManageViewsDialog } from \"./ManageViewsDialog\";\nimport { SaveViewModal, type SaveViewPayload } from \"./SaveViewModal\";\n\n/**\n * A rejected pin/share/default/delete surfaced inline (FUT-100) — the menus\n * close on click, so this Alert is the only signal that survives the action.\n */\nexport function ViewMutationErrorAlert({\n  error,\n  onClose,\n  testIdPrefix,\n}: {\n  error: string | null;\n  onClose: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  if (!error) {\n    return null;\n  }\n  return (\n    <Alert\n      variant=\"danger\"\n      title={copy.nav.updateFailed}\n      description={error}\n      closable\n      closeLabel={copy.nav.dismissError}\n      onClose={onClose}\n      data-testid={`${testIdPrefix}-views-mutation-error`}\n    />\n  );\n}\n\ninterface ViewsMenuSlotProps {\n  views: SavedViewSummary[];\n  /** Name of the currently-applied view, shown in the trigger instead of \"Visões\". */\n  activeViewName?: string;\n  applyView: (view: SavedViewSummary) => void;\n  /** Reset to the built-in no-filter \"Main vision\" default. */\n  selectMain: () => void;\n  openCreate: () => void;\n  openEdit: (view: SavedViewSummary) => void;\n  handleDelete: (view: SavedViewSummary) => void;\n  patchView: (\n    view: SavedViewSummary,\n    changes: Partial<Pick<SavedViewSummary, \"isDefault\" | \"pinned\" | \"shared\">>,\n  ) => Promise<void>;\n  onManageAll: () => void;\n  testIdPrefix: string;\n}\n\n/**\n * The saved-views Connector (FUT-89): binds the backend-backed SavedView state +\n * mutations to the stateless `@12-apps/ui` SavedViewsMenu. All persistence lives here\n * (via the passed handlers); the UI component itself stays data-free.\n */\nexport function ViewsMenuSlot({\n  views,\n  activeViewName,\n  applyView,\n  selectMain,\n  openCreate,\n  openEdit,\n  handleDelete,\n  patchView,\n  onManageAll,\n  testIdPrefix,\n}: ViewsMenuSlotProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <SavedViewsMenu<SavedViewSummary>\n      labels={copy.savedViewsMenu}\n      views={views}\n      activeViewName={activeViewName}\n      onApply={applyView}\n      onSelectMain={selectMain}\n      onSaveCurrent={openCreate}\n      onEdit={openEdit}\n      onDelete={(view) => void handleDelete(view)}\n      onSetDefault={(view) => void patchView(view, { isDefault: true })}\n      onTogglePin={(view) => void patchView(view, { pinned: !view.pinned })}\n      onToggleShare={(view) => void patchView(view, { shared: !view.shared })}\n      onManageAll={onManageAll}\n      testIdPrefix={`${testIdPrefix}-views`}\n    />\n  );\n}\n\ninterface ViewDialogsProps<T extends Record<string, unknown>> {\n  saveOpen: boolean;\n  onCloseSave: () => void;\n  currentState: DataViewState;\n  fields: FilterFieldConfig<T>[];\n  columns: DataViewColumn<T>[];\n  editing: SavedViewSummary | null;\n  onSave: (payload: SaveViewPayload) => Promise<void>;\n  manageOpen: boolean;\n  onCloseManage: () => void;\n  views: SavedViewSummary[];\n  onEditFromManage: (view: SavedViewSummary) => void;\n  onDelete: (view: SavedViewSummary) => void;\n  testIdPrefix: string;\n}\n\n/** The save-view modal + the manage-views dialog (FUT-89). */\nexport function ViewDialogs<T extends Record<string, unknown>>({\n  saveOpen,\n  onCloseSave,\n  currentState,\n  fields,\n  columns,\n  editing,\n  onSave,\n  manageOpen,\n  onCloseManage,\n  views,\n  onEditFromManage,\n  onDelete,\n  testIdPrefix,\n}: ViewDialogsProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <>\n      {/* Keyed by the view being edited: the form seeds its fields with\n          `useState`, which only runs on MOUNT, so a modal that stayed mounted\n          from a previous open reused those values — \"Renomear e editar\" opened\n          with an empty Nome once \"Salvar visão\" had been opened first. */}\n      <SaveViewModal<T>\n        key={editing ? `edit-${editing.id}` : \"create\"}\n        open={saveOpen}\n        onClose={onCloseSave}\n        currentState={currentState}\n        fields={fields}\n        columns={columns}\n        editing={editing}\n        onSave={onSave}\n        testIdPrefix={`${testIdPrefix}-views`}\n      />\n      <ManageViewsDialog confirmCopy={copy.confirmAction}\n        open={manageOpen}\n        onClose={onCloseManage}\n        views={views}\n        onEdit={onEditFromManage}\n        onDelete={onDelete}\n        testIdPrefix={`${testIdPrefix}-views`}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiCI,SAqGA,UArGA,KAqGA,YArGA;AAdG,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAO,KAAK,IAAI;AAAA,MAChB,aAAa;AAAA,MACb,UAAQ;AAAA,MACR,YAAY,KAAK,IAAI;AAAA,MACrB;AAAA,MACA,eAAa,GAAG,YAAY;AAAA;AAAA,EAC9B;AAEJ;AAyBO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,QAAM,OAAO,iBAAiB;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,cAAc;AAAA,MACd,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,UAAU,CAAC,SAAS,KAAK,aAAa,IAAI;AAAA,MAC1C,cAAc,CAAC,SAAS,KAAK,UAAU,MAAM,EAAE,WAAW,KAAK,CAAC;AAAA,MAChE,aAAa,CAAC,SAAS,KAAK,UAAU,MAAM,EAAE,QAAQ,CAAC,KAAK,OAAO,CAAC;AAAA,MACpE,eAAe,CAAC,SAAS,KAAK,UAAU,MAAM,EAAE,QAAQ,CAAC,KAAK,OAAO,CAAC;AAAA,MACtE;AAAA,MACA,cAAc,GAAG,YAAY;AAAA;AAAA,EAC/B;AAEJ;AAmBO,SAAS,YAA+C;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AACzC,QAAM,OAAO,iBAAiB;AAC9B,SACE,iCAKE;AAAA;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM;AAAA,QACN,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,GAAG,YAAY;AAAA;AAAA,MARxB,UAAU,QAAQ,QAAQ,EAAE,KAAK;AAAA,IASxC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QAAkB,aAAa,KAAK;AAAA,QACnC,MAAM;AAAA,QACN,SAAS;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA,cAAc,GAAG,YAAY;AAAA;AAAA,IAC/B;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-KEXYN5F5.js

@@ -0,0 +1,103 @@
+import {
+  arrowColor,
+  emphasisStyles,
+  getSizeStyles,
+  variantStyles
+} from "./chunk-KB6AGBMD.js";
+import {
+  resolveTooltipProps,
+  usePinnedTooltip
+} from "./chunk-SCRN2RE4.js";
+
+// src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx
+import { Tooltip as MuiTooltip } from "@mui/material";
+import { styled } from "@mui/material";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledTooltip = styled(MuiTooltip, {
+  shouldForwardProp: (prop) => !["customVariant", "customSize", "glow", "pulse"].includes(prop)
+})(({ theme, customVariant, customSize, glow, pulse }) => {
+  const sizeStyles = getSizeStyles(customSize);
+  return {
+    "& .MuiTooltip-tooltip": {
+      borderRadius: theme.spacing(1),
+      fontSize: sizeStyles.fontSize,
+      padding: sizeStyles.padding,
+      fontWeight: 500,
+      transition: "all 0.3s ease",
+      position: "relative",
+      overflow: "hidden",
+      ...variantStyles(theme, customVariant),
+      ...emphasisStyles(theme, glow, pulse)
+    },
+    "& .MuiTooltip-arrow": {
+      color: arrowColor(theme, customVariant)
+    }
+  };
+});
+var InteractiveTooltip = React.forwardRef(
+  (rawProps, ref) => {
+    const {
+      variant,
+      size,
+      glow,
+      pulse,
+      maxWidth,
+      dataTestId,
+      hoverContent,
+      pinnedContent,
+      clickable,
+      onPin,
+      onUnpin,
+      className,
+      children,
+      ...props
+    } = resolveTooltipProps(rawProps);
+    const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({
+      clickable,
+      onPin,
+      onUnpin
+    });
+    const tooltipContent = isPinned ? pinnedContent : hoverContent;
+    const childElement = children;
+    const childWithProps = React.cloneElement(childElement, {
+      onClick: (e) => {
+        handleClick(e);
+        childElement.props.onClick?.(e);
+      },
+      "data-testid": dataTestId ? `${dataTestId}-trigger` : void 0
+    });
+    return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className, children: /* @__PURE__ */ jsx(
+      StyledTooltip,
+      {
+        ref,
+        customVariant: variant,
+        customSize: size,
+        glow,
+        pulse,
+        title: tooltipContent,
+        open: isPinned ? isControlledOpen : void 0,
+        enterDelay: isPinned ? 0 : 100,
+        leaveDelay: 0,
+        disableHoverListener: isPinned,
+        disableFocusListener: isPinned,
+        disableTouchListener: isPinned,
+        slotProps: {
+          tooltip: {
+            sx: { maxWidth },
+            role: "tooltip",
+            ...dataTestId && { "data-testid": `${dataTestId}-content` }
+          }
+        },
+        ...props,
+        children: childWithProps
+      }
+    ) });
+  }
+);
+InteractiveTooltip.displayName = "InteractiveTooltip";
+
+export {
+  InteractiveTooltip
+};
+//# sourceMappingURL=chunk-KEXYN5F5.js.map

package/dist/chunk-KEXYN5F5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx"],"sourcesContent":["import { Tooltip as MuiTooltip } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React from 'react';\n\nimport { resolveTooltipProps, usePinnedTooltip } from './InteractiveTooltip.hooks';\nimport {\n  arrowColor,\n  emphasisStyles,\n  getSizeStyles,\n  variantStyles,\n} from './InteractiveTooltip.styles';\nimport type { InteractiveTooltipProps } from './InteractiveTooltip.types';\n\nconst StyledTooltip = styled(MuiTooltip, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customSize?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, glow, pulse }) => {\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    '& .MuiTooltip-tooltip': {\n      borderRadius: theme.spacing(1),\n      fontSize: sizeStyles.fontSize,\n      padding: sizeStyles.padding,\n      fontWeight: 500,\n      transition: 'all 0.3s ease',\n      position: 'relative',\n      overflow: 'hidden',\n      ...variantStyles(theme, customVariant),\n      ...emphasisStyles(theme, glow, pulse),\n    },\n\n    '& .MuiTooltip-arrow': {\n      color: arrowColor(theme, customVariant),\n    },\n  };\n});\n\nexport const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTooltipProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      size,\n      glow,\n      pulse,\n      maxWidth,\n      dataTestId,\n      hoverContent,\n      pinnedContent,\n      clickable,\n      onPin,\n      onUnpin,\n      className,\n      children,\n      ...props\n    } = resolveTooltipProps(rawProps);\n\n    const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({\n      clickable,\n      onPin,\n      onUnpin,\n    });\n\n    // Determine which content to show\n    const tooltipContent = isPinned ? pinnedContent : hoverContent;\n\n    // Child with click handler and ref\n    const childElement = children as React.ReactElement<{\n      onClick?: (e: React.MouseEvent) => void;\n      'data-testid'?: string;\n    }>;\n\n    const childWithProps = React.cloneElement(childElement, {\n      onClick: (e: React.MouseEvent) => {\n        handleClick(e);\n        // Call original onClick if it exists\n        childElement.props.onClick?.(e);\n      },\n      'data-testid': dataTestId ? `${dataTestId}-trigger` : undefined,\n    });\n\n    return (\n      <div ref={wrapperRef} className={className}>\n        <StyledTooltip\n          ref={ref}\n          customVariant={variant}\n          customSize={size}\n          glow={glow}\n          pulse={pulse}\n          title={tooltipContent}\n          open={isPinned ? isControlledOpen : undefined}\n          enterDelay={isPinned ? 0 : 100}\n          leaveDelay={0}\n          disableHoverListener={isPinned}\n          disableFocusListener={isPinned}\n          disableTouchListener={isPinned}\n          slotProps={{\n            tooltip: {\n              sx: { maxWidth },\n              role: 'tooltip',\n              ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),\n            },\n          }}\n          {...props}\n        >\n          {childWithProps}\n        </StyledTooltip>\n      </div>\n    );\n  },\n);\n\nInteractiveTooltip.displayName = 'InteractiveTooltip';\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,WAAW,kBAAkB;AACtC,SAAS,cAAc;AACvB,OAAO,WAAW;AAsFV;AA3ER,IAAM,gBAAgB,OAAO,YAAY;AAAA,EACvC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,cAAc,QAAQ,OAAO,EAAE,SAAS,IAAc;AAC7E,CAAC,EAKE,CAAC,EAAE,OAAO,eAAe,YAAY,MAAM,MAAM,MAAM;AACxD,QAAM,aAAa,cAAc,UAAU;AAE3C,SAAO;AAAA,IACL,yBAAyB;AAAA,MACvB,cAAc,MAAM,QAAQ,CAAC;AAAA,MAC7B,UAAU,WAAW;AAAA,MACrB,SAAS,WAAW;AAAA,MACpB,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,MACV,GAAG,cAAc,OAAO,aAAa;AAAA,MACrC,GAAG,eAAe,OAAO,MAAM,KAAK;AAAA,IACtC;AAAA,IAEA,uBAAuB;AAAA,MACrB,OAAO,WAAW,OAAO,aAAa;AAAA,IACxC;AAAA,EACF;AACF,CAAC;AAEM,IAAM,qBAAqB,MAAM;AAAA,EACtC,CAAC,UAAU,QAAQ;AACjB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,oBAAoB,QAAQ;AAEhC,UAAM,EAAE,UAAU,kBAAkB,YAAY,YAAY,IAAI,iBAAiB;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAGD,UAAM,iBAAiB,WAAW,gBAAgB;AAGlD,UAAM,eAAe;AAKrB,UAAM,iBAAiB,MAAM,aAAa,cAAc;AAAA,MACtD,SAAS,CAAC,MAAwB;AAChC,oBAAY,CAAC;AAEb,qBAAa,MAAM,UAAU,CAAC;AAAA,MAChC;AAAA,MACA,eAAe,aAAa,GAAG,UAAU,aAAa;AAAA,IACxD,CAAC;AAED,WACE,oBAAC,SAAI,KAAK,YAAY,WACpB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAe;AAAA,QACf,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,MAAM,WAAW,mBAAmB;AAAA,QACpC,YAAY,WAAW,IAAI;AAAA,QAC3B,YAAY;AAAA,QACZ,sBAAsB;AAAA,QACtB,sBAAsB;AAAA,QACtB,sBAAsB;AAAA,QACtB,WAAW;AAAA,UACT,SAAS;AAAA,YACP,IAAI,EAAE,SAAS;AAAA,YACf,MAAM;AAAA,YACN,GAAI,cAAc,EAAE,eAAe,GAAG,UAAU,WAAW;AAAA,UAC7D;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;","names":[]}

package/dist/chunk-KG2D7C2M.js

@@ -0,0 +1,289 @@
+// src/components/data-display/TimingDiagram/TimingDiagram.views.tsx
+import { alpha, Box, styled, Tooltip, Typography, useTheme } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var phaseColors = {
+  dns: "#9C27B0",
+  // Purple
+  connect: "#2196F3",
+  // Blue
+  ssl: "#00BCD4",
+  // Cyan
+  request: "#4CAF50",
+  // Green
+  response: "#FF9800"
+  // Orange
+};
+var formatTime = (ms) => {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+var colorOf = (phase) => phaseColors[phase.key];
+var widthOf = (percentages, phase) => percentages[phase.key] ?? 0;
+var withTooltip = (phase, enabled, element) => enabled ? /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    title: `${phase.label}: ${formatTime(phase.value)}`,
+    placement: "top",
+    role: "tooltip",
+    "aria-describedby": `tooltip-${phase.key}`,
+    children: element
+  },
+  phase.key
+) : element;
+var WaterfallContainer = styled(Box)(({ theme }) => ({
+  position: "relative",
+  width: "100%",
+  marginTop: theme.spacing(2)
+}));
+var WaterfallBar = styled(Box, {
+  shouldForwardProp: (prop) => !["phaseColor", "offset", "width", "animated"].includes(prop)
+})(({ theme, phaseColor, offset, width, animated }) => ({
+  position: "absolute",
+  height: 32,
+  left: `${offset}%`,
+  width: `${width}%`,
+  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,
+  borderRadius: theme.shape.borderRadius,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.getContrastText(phaseColor),
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,
+  transition: animated ? "all 0.5s ease" : "none",
+  animation: animated ? "slideIn 0.5s ease" : "none",
+  "@keyframes slideIn": {
+    from: {
+      transform: "translateX(-20px)",
+      opacity: 0
+    },
+    to: {
+      transform: "translateX(0)",
+      opacity: 1
+    }
+  },
+  "&:hover": {
+    transform: "translateY(-2px)",
+    boxShadow: `0 4px 12px ${alpha(phaseColor, 0.5)}`,
+    zIndex: 10
+  }
+}));
+var TimelineAxis = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  marginTop: theme.spacing(1),
+  paddingTop: theme.spacing(1),
+  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+}));
+var TimeLabel = styled(Typography)(({ theme }) => ({
+  fontSize: "0.7rem",
+  color: theme.palette.text.secondary,
+  fontWeight: 500
+}));
+var WaterfallView = ({
+  phases,
+  percentages,
+  data,
+  animated,
+  showLabels,
+  showTooltips,
+  height
+}) => {
+  let offset = 0;
+  return /* @__PURE__ */ jsxs(WaterfallContainer, { style: { height: height + 40 }, "data-variant": "waterfall", children: [
+    phases.map((phase, index) => {
+      const width = widthOf(percentages, phase);
+      const currentOffset = offset;
+      offset += width;
+      return withTooltip(
+        phase,
+        showTooltips,
+        /* @__PURE__ */ jsx(
+          WaterfallBar,
+          {
+            "data-testid": `timing-segment-${phase.key}`,
+            phaseColor: colorOf(phase),
+            offset: currentOffset,
+            width,
+            animated,
+            "data-animated": animated.toString(),
+            style: {
+              top: index * 8,
+              width: `${width}%`,
+              left: `${currentOffset}%`
+            },
+            children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
+          },
+          phase.key
+        )
+      );
+    }),
+    /* @__PURE__ */ jsxs(TimelineAxis, { style: { marginTop: height }, children: [
+      /* @__PURE__ */ jsx(TimeLabel, { children: "0ms" }),
+      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total / 2) }),
+      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total) })
+    ] })
+  ] });
+};
+var StackedBar = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "animated"
+})(({ theme, animated }) => ({
+  display: "flex",
+  width: "100%",
+  height: 40,
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  boxShadow: theme.shadows[2],
+  ...animated && {
+    "& > div": {
+      animation: "expandWidth 0.8s ease"
+    },
+    "@keyframes expandWidth": {
+      from: { width: 0 },
+      to: { width: "100%" }
+    }
+  }
+}));
+var StackedSegment = styled(Box, {
+  shouldForwardProp: (prop) => !["phaseColor", "width"].includes(prop)
+})(({ phaseColor, width }) => ({
+  width: `${width}%`,
+  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#fff",
+  fontSize: "0.7rem",
+  fontWeight: 600,
+  position: "relative",
+  transition: "all 0.3s ease",
+  "&:hover": {
+    filter: "brightness(1.1)",
+    zIndex: 1
+  }
+}));
+var StackedView = ({
+  phases,
+  percentages,
+  data,
+  animated,
+  showLabels,
+  showTooltips
+}) => /* @__PURE__ */ jsxs(Box, { "data-variant": "stacked", children: [
+  /* @__PURE__ */ jsx(StackedBar, { animated, "data-animated": animated.toString(), children: phases.map((phase) => {
+    const width = widthOf(percentages, phase);
+    return withTooltip(
+      phase,
+      showTooltips,
+      /* @__PURE__ */ jsx(
+        StackedSegment,
+        {
+          "data-testid": `timing-segment-${phase.key}`,
+          phaseColor: colorOf(phase),
+          width,
+          style: { width: `${width}%` },
+          children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
+        },
+        phase.key
+      )
+    );
+  }) }),
+  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mt: 1 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "0ms" }),
+    /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", fontWeight: "bold", children: [
+      "Total: ",
+      formatTime(data.total)
+    ] })
+  ] })
+] });
+var HorizontalBar = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2)
+}));
+var HorizontalSegment = styled(Box, {
+  shouldForwardProp: (prop) => !["phaseColor", "width", "animated"].includes(prop)
+})(({ theme, phaseColor, animated }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(2),
+  "& .label": {
+    minWidth: 80,
+    fontSize: "0.85rem",
+    fontWeight: 500,
+    color: theme.palette.text.secondary
+  },
+  "& .bar": {
+    flex: 1,
+    height: 24,
+    borderRadius: theme.shape.borderRadius,
+    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,
+    position: "relative",
+    overflow: "hidden",
+    boxShadow: `0 2px 6px ${alpha(phaseColor, 0.25)}`,
+    ...animated && {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `linear-gradient(90deg, transparent 0%, ${alpha("#fff", 0.3)} 50%, transparent 100%)`,
+        animation: "shimmer 2s infinite"
+      },
+      "@keyframes shimmer": {
+        from: { transform: "translateX(-100%)" },
+        to: { transform: "translateX(100%)" }
+      }
+    }
+  },
+  "& .value": {
+    minWidth: 60,
+    textAlign: "right",
+    fontSize: "0.85rem",
+    fontWeight: 600,
+    color: phaseColor
+  }
+}));
+var HorizontalView = ({
+  phases,
+  percentages,
+  data,
+  animated
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(HorizontalBar, { "data-variant": "horizontal", children: [
+    phases.map((phase) => /* @__PURE__ */ jsxs(
+      HorizontalSegment,
+      {
+        "data-testid": `timing-segment-${phase.key}`,
+        phaseColor: colorOf(phase),
+        width: widthOf(percentages, phase),
+        animated,
+        "data-animated": animated.toString(),
+        children: [
+          /* @__PURE__ */ jsx(Typography, { className: "label", children: phase.label }),
+          /* @__PURE__ */ jsx(Box, { className: "bar", style: { width: `${percentages[phase.key]}%` } }),
+          /* @__PURE__ */ jsx(Typography, { className: "value", "data-testid": "timing-label", children: formatTime(phase.value) })
+        ]
+      },
+      phase.key
+    )),
+    /* @__PURE__ */ jsx(Box, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "bold", color: "primary", children: [
+      "Total Time: ",
+      formatTime(data.total)
+    ] }) })
+  ] });
+};
+
+export {
+  phaseColors,
+  formatTime,
+  WaterfallView,
+  StackedView,
+  HorizontalView
+};
+//# sourceMappingURL=chunk-KG2D7C2M.js.map

package/dist/chunk-KG2D7C2M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.views.tsx"],"sourcesContent":["import { alpha, Box, styled, Tooltip, Typography, useTheme } from '@mui/material';\nimport type { FC, ReactElement } from 'react';\nimport React from 'react';\n\nimport type { TimingData } from './TimingDiagram.types';\n\n// Color configurations\nexport const phaseColors = {\n  dns: '#9C27B0', // Purple\n  connect: '#2196F3', // Blue\n  ssl: '#00BCD4', // Cyan\n  request: '#4CAF50', // Green\n  response: '#FF9800', // Orange\n};\n\nexport type PhaseKey = keyof typeof phaseColors;\n\nexport interface Phase {\n  key: string;\n  label: string;\n  value?: number;\n}\n\nexport interface TimingViewProps {\n  phases: Phase[];\n  percentages: Record<string, number>;\n  data: TimingData;\n  animated: boolean;\n  showLabels: boolean;\n  showTooltips: boolean;\n  height: number;\n}\n\nexport const formatTime = (ms: number): string => {\n  if (ms < 1000) return `${ms}ms`;\n  return `${(ms / 1000).toFixed(2)}s`;\n};\n\nconst colorOf = (phase: Phase): string => phaseColors[phase.key as PhaseKey];\nconst widthOf = (percentages: Record<string, number>, phase: Phase): number =>\n  percentages[phase.key] ?? 0;\n\n// Waterfall and stacked both offer the same hover explanation of a segment; only\n// whether tooltips are on at all varies.\nconst withTooltip = (\n  phase: Phase,\n  enabled: boolean,\n  element: ReactElement,\n): ReactElement =>\n  enabled ? (\n    <Tooltip\n      key={phase.key}\n      title={`${phase.label}: ${formatTime(phase.value!)}`}\n      placement=\"top\"\n      role=\"tooltip\"\n      aria-describedby={`tooltip-${phase.key}`}\n    >\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n\nconst WaterfallContainer = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  width: '100%',\n  marginTop: theme.spacing(2),\n}));\n\nconst WaterfallBar = styled(Box, {\n  shouldForwardProp: (prop) =>\n    !['phaseColor', 'offset', 'width', 'animated'].includes(prop as string),\n})<{\n  phaseColor: string;\n  offset: number;\n  width: number;\n  animated: boolean;\n}>(({ theme, phaseColor, offset, width, animated }) => ({\n  position: 'absolute',\n  height: 32,\n  left: `${offset}%`,\n  width: `${width}%`,\n  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,\n  borderRadius: theme.shape.borderRadius,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: theme.palette.getContrastText(phaseColor),\n  fontSize: '0.75rem',\n  fontWeight: 500,\n  boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,\n  transition: animated ? 'all 0.5s ease' : 'none',\n  animation: animated ? 'slideIn 0.5s ease' : 'none',\n  '@keyframes slideIn': {\n    from: {\n      transform: 'translateX(-20px)',\n      opacity: 0,\n    },\n    to: {\n      transform: 'translateX(0)',\n      opacity: 1,\n    },\n  },\n  '&:hover': {\n    transform: 'translateY(-2px)',\n    boxShadow: `0 4px 12px ${alpha(phaseColor, 0.5)}`,\n    zIndex: 10,\n  },\n}));\n\nconst TimelineAxis = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  marginTop: theme.spacing(1),\n  paddingTop: theme.spacing(1),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst TimeLabel = styled(Typography)(({ theme }) => ({\n  fontSize: '0.7rem',\n  color: theme.palette.text.secondary,\n  fontWeight: 500,\n}));\n\nexport const WaterfallView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n  showLabels,\n  showTooltips,\n  height,\n}) => {\n  // Each bar starts where the previous one ended, so the row reads as a timeline.\n  let offset = 0;\n\n  return (\n    <WaterfallContainer style={{ height: height + 40 }} data-variant=\"waterfall\">\n      {phases.map((phase, index) => {\n        const width = widthOf(percentages, phase);\n        const currentOffset = offset;\n        offset += width;\n\n        return withTooltip(\n          phase,\n          showTooltips,\n          <WaterfallBar\n            key={phase.key}\n            data-testid={`timing-segment-${phase.key}`}\n            phaseColor={colorOf(phase)}\n            offset={currentOffset}\n            width={width}\n            animated={animated}\n            data-animated={animated.toString()}\n            style={{\n              top: index * 8,\n              width: `${width}%`,\n              left: `${currentOffset}%`,\n            }}\n          >\n            {showLabels && width > 10 && (\n              <span data-testid=\"timing-label\">{formatTime(phase.value!)}</span>\n            )}\n          </WaterfallBar>,\n        );\n      })}\n      <TimelineAxis style={{ marginTop: height }}>\n        <TimeLabel>0ms</TimeLabel>\n        <TimeLabel>{formatTime(data.total / 2)}</TimeLabel>\n        <TimeLabel>{formatTime(data.total)}</TimeLabel>\n      </TimelineAxis>\n    </WaterfallContainer>\n  );\n};\n\nconst StackedBar = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'animated',\n})<{ animated: boolean }>(({ theme, animated }) => ({\n  display: 'flex',\n  width: '100%',\n  height: 40,\n  borderRadius: theme.shape.borderRadius,\n  overflow: 'hidden',\n  boxShadow: theme.shadows[2],\n  ...(animated && {\n    '& > div': {\n      animation: 'expandWidth 0.8s ease',\n    },\n    '@keyframes expandWidth': {\n      from: { width: 0 },\n      to: { width: '100%' },\n    },\n  }),\n}));\n\nconst StackedSegment = styled(Box, {\n  shouldForwardProp: (prop) => !['phaseColor', 'width'].includes(prop as string),\n})<{ phaseColor: string; width: number }>(({ phaseColor, width }) => ({\n  width: `${width}%`,\n  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '#fff',\n  fontSize: '0.7rem',\n  fontWeight: 600,\n  position: 'relative',\n  transition: 'all 0.3s ease',\n  '&:hover': {\n    filter: 'brightness(1.1)',\n    zIndex: 1,\n  },\n}));\n\nexport const StackedView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n  showLabels,\n  showTooltips,\n}) => (\n  <Box data-variant=\"stacked\">\n    <StackedBar animated={animated} data-animated={animated.toString()}>\n      {phases.map((phase) => {\n        const width = widthOf(percentages, phase);\n\n        return withTooltip(\n          phase,\n          showTooltips,\n          <StackedSegment\n            key={phase.key}\n            data-testid={`timing-segment-${phase.key}`}\n            phaseColor={colorOf(phase)}\n            width={width}\n            style={{ width: `${width}%` }}\n          >\n            {showLabels && width > 10 && (\n              <span data-testid=\"timing-label\">{formatTime(phase.value!)}</span>\n            )}\n          </StackedSegment>,\n        );\n      })}\n    </StackedBar>\n    <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        0ms\n      </Typography>\n      <Typography variant=\"caption\" color=\"text.secondary\" fontWeight=\"bold\">\n        Total: {formatTime(data.total)}\n      </Typography>\n    </Box>\n  </Box>\n);\n\nconst HorizontalBar = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(2),\n}));\n\nconst HorizontalSegment = styled(Box, {\n  shouldForwardProp: (prop) => !['phaseColor', 'width', 'animated'].includes(prop as string),\n})<{\n  phaseColor: string;\n  width: number;\n  animated: boolean;\n}>(({ theme, phaseColor, animated }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(2),\n  '& .label': {\n    minWidth: 80,\n    fontSize: '0.85rem',\n    fontWeight: 500,\n    color: theme.palette.text.secondary,\n  },\n  '& .bar': {\n    flex: 1,\n    height: 24,\n    borderRadius: theme.shape.borderRadius,\n    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,\n    position: 'relative',\n    overflow: 'hidden',\n    boxShadow: `0 2px 6px ${alpha(phaseColor, 0.25)}`,\n    ...(animated && {\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: `linear-gradient(90deg, transparent 0%, ${alpha('#fff', 0.3)} 50%, transparent 100%)`,\n        animation: 'shimmer 2s infinite',\n      },\n      '@keyframes shimmer': {\n        from: { transform: 'translateX(-100%)' },\n        to: { transform: 'translateX(100%)' },\n      },\n    }),\n  },\n  '& .value': {\n    minWidth: 60,\n    textAlign: 'right',\n    fontSize: '0.85rem',\n    fontWeight: 600,\n    color: phaseColor,\n  },\n}));\n\nexport const HorizontalView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <HorizontalBar data-variant=\"horizontal\">\n      {phases.map((phase) => (\n        <HorizontalSegment\n          key={phase.key}\n          data-testid={`timing-segment-${phase.key}`}\n          phaseColor={colorOf(phase)}\n          width={widthOf(percentages, phase)}\n          animated={animated}\n          data-animated={animated.toString()}\n        >\n          <Typography className=\"label\">{phase.label}</Typography>\n          <Box className=\"bar\" style={{ width: `${percentages[phase.key]}%` }} />\n          <Typography className=\"value\" data-testid=\"timing-label\">\n            {formatTime(phase.value!)}\n          </Typography>\n        </HorizontalSegment>\n      ))}\n      <Box sx={{ mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }}>\n        <Typography variant=\"body2\" fontWeight=\"bold\" color=\"primary\">\n          Total Time: {formatTime(data.total)}\n        </Typography>\n      </Box>\n    </HorizontalBar>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-KHG57NAE.js

@@ -0,0 +1,25 @@
+// src/components/data-display/DataViews/data-views-copy-context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var DataViewsCopyContext = createContext(null);
+function DataViewsCopyProvider({
+  copy,
+  children
+}) {
+  return /* @__PURE__ */ jsx(DataViewsCopyContext.Provider, { value: copy, children });
+}
+function useDataViewsCopy() {
+  const copy = useContext(DataViewsCopyContext);
+  if (!copy) {
+    throw new Error(
+      "DataViews components must be rendered inside <DataViewsCopyProvider copy={\u2026}>. @12-apps/ui ships no default copy; pass PT_BR_DATA_VIEWS_COPY to keep the pt-BR wording."
+    );
+  }
+  return copy;
+}
+
+export {
+  DataViewsCopyProvider,
+  useDataViewsCopy
+};
+//# sourceMappingURL=chunk-KHG57NAE.js.map

package/dist/chunk-KHG57NAE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-copy-context.tsx"],"sourcesContent":["import { createContext, useContext, type JSX, type ReactNode } from \"react\";\n\nimport type { DataViewsCopy } from \"./data-views-copy\";\n\n/**\n * The words this component family renders, put in scope once by the host.\n *\n * Context rather than a prop per component for the same reason\n * `data-views-layout-context` uses one: the nineteen files here are a single\n * surface mounted once, and threading words through leaves a host never names\n * is the prop-drilling context exists to avoid.\n */\nconst DataViewsCopyContext = createContext<DataViewsCopy | null>(null);\n\nexport function DataViewsCopyProvider({\n  copy,\n  children,\n}: {\n  copy: DataViewsCopy;\n  children: ReactNode;\n}): JSX.Element {\n  return <DataViewsCopyContext.Provider value={copy}>{children}</DataViewsCopyContext.Provider>;\n}\n\n/**\n * The copy in scope.\n *\n * THROWS outside a provider rather than falling back. There is no meaningful\n * empty answer: a saved-views dialog with no words is broken, and any default\n * would be the origin host's Portuguese — which is the exact thing this config\n * exists to stop being silent. Failing at the first render names the wiring\n * mistake; blank buttons would hide it.\n */\nexport function useDataViewsCopy(): DataViewsCopy {\n  const copy = useContext(DataViewsCopyContext);\n  if (!copy) {\n    throw new Error(\n      \"DataViews components must be rendered inside <DataViewsCopyProvider copy={…}>. \" +\n        \"@12-apps/ui ships no default copy; pass PT_BR_DATA_VIEWS_COPY to keep the pt-BR wording.\",\n    );\n  }\n  return copy;\n}\n"],"mappings":";AAAA,SAAS,eAAe,kBAA4C;AAqB3D;AATT,IAAM,uBAAuB,cAAoC,IAAI;AAE9D,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAGgB;AACd,SAAO,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,MAAO,UAAS;AAC/D;AAWO,SAAS,mBAAkC;AAChD,QAAM,OAAO,WAAW,oBAAoB;AAC5C,MAAI,CAAC,MAAM;AACT,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}