@mx-cartographer/experiences 9.4.20 → 9.4.21

package/dist/investments/components/HoldingTable.es.js

@@ -1,20 +1,20 @@
-import { useGlobalCopyStore as b } from "../../common/context/hooks.es.js";
+import { useGlobalCopyStore as p } from "../../common/context/hooks.es.js";
 import { HeaderCell as n } from "./HeaderCell.es.js";
 import "react";
 import l from "@mui/material/Stack";
-import { Text as t } from "@mxenabled/mxui";
+import { Text as i } from "@mxenabled/mxui";
 import C from "@mui/material/Paper";
-import { Icon as u } from "@mxenabled/mx-icons";
+import { Icon as h } from "@mxenabled/mx-icons";
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { useTheme as S } from "@mui/material/styles";
 import F from "@mui/material/IconButton";
-import _ from "@mui/material/TextField";
-import { DataGridPro as I } from "@mui/x-data-grid-pro";
-var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBasisClick: f, handleCostBasisChange: y, handleCostBasisKeyDown: v, handleCostBasisBlur: w }) => {
-  const { investments: o } = b(), p = S().palette.mode === "dark", c = "success.main", h = p ? "grey.300" : "grey.700", a = (e, i = "lesserThan") => i === "greaterThan" ? e >= 0 ? c : h : e <= 0 ? h : c, D = [
+import L from "@mui/material/TextField";
+import { DataGridPro as _ } from "@mui/x-data-grid-pro";
+var O = ({ data: u, editingHoldingId: m, currentEditedCostBasis: x, handleCostBasisClick: f, handleCostBasisChange: v, handleCostBasisKeyDown: y, handleCostBasisBlur: w }) => {
+  const { investments: t } = p(), b = S().palette.mode === "dark", c = "success.main", g = b ? "grey.300" : "grey.700", a = (e, o = "lesserThan") => o === "greaterThan" ? e >= 0 ? c : g : e <= 0 ? g : c, D = [
     {
       field: "qty",
-      headerName: o.overview.qty_header,
+      headerName: t.overview.qty_header,
       sortable: !1,
       width: 48,
       align: "center",
@@ -22,7 +22,7 @@ var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
     },
     {
       field: "holding",
-      headerName: o.overview.holding_header,
+      headerName: t.overview.holding_header,
       flex: 1,
       renderHeader: n,
       renderCell: (e) => /* @__PURE__ */ r(l, {
@@ -31,10 +31,10 @@ var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
           gap: 16,
           flexDirection: "row"
         },
-        children: /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ r(t, {
+        children: /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ r(i, {
           sx: { fontWeight: 700 },
           children: e.row.holding
-        }), /* @__PURE__ */ r(t, {
+        }), /* @__PURE__ */ r(i, {
           sx: {
             color: "text.secondary",
             fontWeight: 400
@@ -46,22 +46,22 @@ var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
     },
     {
       field: "costBasis",
-      headerName: o.overview.cost_basis_header,
+      headerName: t.overview.cost_basis_header,
       width: 132,
       renderHeader: n,
       renderCell: (e) => {
-        const i = m === e.row.id;
+        const o = m === e.row.id;
         return /* @__PURE__ */ d(l, {
           sx: {
             alignItems: "center",
             flexDirection: "row",
             gap: 4
           },
-          children: [i ? /* @__PURE__ */ r(_, {
+          children: [o ? /* @__PURE__ */ r(L, {
             autoFocus: !0,
             onBlur: () => w(e.row.id),
-            onChange: y,
-            onKeyDown: (s) => v(s, e.row.id),
+            onChange: v,
+            onKeyDown: (s) => y(s, e.row.id),
             size: "small",
             sx: {
               fontSize: 14,
@@ -75,25 +75,25 @@ var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
               "& .MuiOutlinedInput-notchedOutline": { border: "none" }
             },
             value: x
-          }) : /* @__PURE__ */ r(t, {
+          }) : /* @__PURE__ */ r(i, {
             sx: {
               fontSize: 14,
               width: 57
             },
             variant: "body2",
-            children: e.value?.toLocaleString("en-US", {
+            children: e.row.gainLossAvailable ? e.value?.toLocaleString("en-US", {
               currency: "USD",
               maximumFractionDigits: 2,
               minimumFractionDigits: 2,
               style: "currency"
-            })
+            }) : "—"
           }), /* @__PURE__ */ r(F, {
-            onClick: () => f(e.row.id, e.row.costBasis),
+            onClick: () => f(e.row.id, e.row.rawCostBasis),
             sx: {
               minWidth: 12,
               minHeight: 12
             },
-            children: /* @__PURE__ */ r(u, {
+            children: /* @__PURE__ */ r(h, {
               name: "stylus",
               size: 12,
               sx: { color: "grey.700" }
@@ -106,19 +106,19 @@ var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
     },
     {
       field: "totalGainLoss",
-      headerName: o.overview.total_gain_loss_header,
+      headerName: t.overview.total_gain_loss_header,
       width: 196,
       renderHeader: n,
       renderCell: (e) => {
-        const i = e.row.costBasis, s = i ? e.row.totalGainLoss / i * 100 : 0;
-        return /* @__PURE__ */ d(l, {
+        const o = e.row.gainLossBasis, s = o ? e.row.totalGainLoss / o * 100 : 0;
+        return e.row.gainLossAvailable ? /* @__PURE__ */ d(l, {
           sx: {
             alignItems: "center",
             flexDirection: "row",
             gap: 2
           },
           children: [
-            e.value !== 0 && /* @__PURE__ */ r(u, {
+            e.value !== 0 && /* @__PURE__ */ r(h, {
               name: e.value > 0 ? "trending_up" : "trending_down",
               size: 16,
               sx: {
@@ -127,20 +127,20 @@ var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
                 verticalAlign: "middle"
               }
             }),
-            /* @__PURE__ */ r(t, {
+            /* @__PURE__ */ r(i, {
               sx: {
                 color: a(e.value),
                 fontWeight: e.value > 0 ? 700 : 400
               },
               variant: "body2",
-              children: i ? `${s.toFixed(2)}%` : "0.00%"
+              children: o ? `${s.toFixed(2)}%` : "0.00%"
             }),
-            /* @__PURE__ */ r(t, {
+            /* @__PURE__ */ r(i, {
               sx: { color: "text.secondary" },
               variant: "caption",
               children: "|"
             }),
-            /* @__PURE__ */ r(t, {
+            /* @__PURE__ */ r(i, {
               sx: {
                 color: a(e.value),
                 fontWeight: e.value > 0 ? 700 : 400
@@ -154,6 +154,10 @@ var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
               })
             })
           ]
+        }) : /* @__PURE__ */ r(i, {
+          sx: { color: "text.secondary" },
+          variant: "body2",
+          children: "—"
         });
       },
       align: "right",
@@ -162,10 +166,10 @@ var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
     },
     {
       field: "marketValue",
-      headerName: o.overview.market_value_header,
+      headerName: t.overview.market_value_header,
       width: 132,
       renderHeader: n,
-      renderCell: (e) => /* @__PURE__ */ r(t, {
+      renderCell: (e) => /* @__PURE__ */ r(i, {
         sx: { fontWeight: 700 },
         variant: "body2",
         children: e.value?.toLocaleString("en-US", {
@@ -184,13 +188,13 @@ var O = ({ data: g, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
       boxShadow: "none",
       width: "100%"
     },
-    children: /* @__PURE__ */ r(I, {
+    children: /* @__PURE__ */ r(_, {
       columns: D,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       disableRowSelectionOnClick: !0,
       hideFooter: !0,
-      rows: g,
+      rows: u,
       slotProps: { baseIconButton: { sx: { display: "none" } } }
     })
   });

package/dist/investments/components/HoldingTable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoldingTable.es.js","names":[],"sources":["../../../src/investments/components/HoldingTable.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport Paper from '@mui/material/Paper'\nimport IconButton from '@mui/material/IconButton'\nimport TextField from '@mui/material/TextField'\nimport { useTheme } from '@mui/material/styles'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\n\nimport { HeaderCell } from './HeaderCell'\n\ninterface HoldingDetail {\n  id: string\n  description: string\n  qty: number\n  holding: string\n  costBasis: number\n  totalGainLoss: number\n  marketValue: number\n}\n\ninterface HoldingsTableProps {\n  data: HoldingDetail[]\n  editingHoldingId: string | null\n  currentEditedCostBasis: string\n  handleCostBasisClick: (holdingId: string, currentCostBasis: number) => void\n  handleCostBasisChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  handleCostBasisKeyDown: (event: React.KeyboardEvent<HTMLInputElement>, id: string) => void\n  handleCostBasisBlur: (id: string) => void\n}\n\nconst HoldingsTable: React.FC<HoldingsTableProps> = ({\n  data,\n  editingHoldingId,\n  currentEditedCostBasis,\n  handleCostBasisClick,\n  handleCostBasisChange,\n  handleCostBasisKeyDown,\n  handleCostBasisBlur,\n}) => {\n  const { investments: copy } = useGlobalCopyStore()\n  const theme = useTheme()\n\n  const isDarkMode = theme.palette.mode === 'dark'\n  const gainDisplayColor = 'success.main'\n  const lossDisplayColor = isDarkMode ? 'grey.300' : 'grey.700'\n\n  const gainLossDisplayColor = (value: number, type: string = 'lesserThan') => {\n    if (type === 'greaterThan') {\n      return value >= 0 ? gainDisplayColor : lossDisplayColor\n    }\n    return value <= 0 ? lossDisplayColor : gainDisplayColor\n  }\n\n  const columns: GridColDef[] = [\n    {\n      field: 'qty',\n      headerName: copy.overview.qty_header,\n      sortable: false,\n      width: 48,\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'holding',\n      headerName: copy.overview.holding_header,\n      flex: 1,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Stack sx={{ alignItems: 'center', gap: 16, flexDirection: 'row' }}>\n          <Stack>\n            {/* TODO :InstitutionLogo in future */}\n            <Text sx={{ fontWeight: 700 }}>{params.row.holding}</Text>\n            <Text sx={{ color: 'text.secondary', fontWeight: 400 }} variant=\"tiny\">\n              {params.row.description}\n            </Text>\n          </Stack>\n        </Stack>\n      ),\n    },\n    {\n      field: 'costBasis',\n      headerName: copy.overview.cost_basis_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const isCurrentlyEditing = editingHoldingId === params.row.id\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n            {isCurrentlyEditing ? (\n              <TextField\n                autoFocus={true}\n                onBlur={() => handleCostBasisBlur(params.row.id)}\n                onChange={handleCostBasisChange}\n                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>\n                  handleCostBasisKeyDown(e, params.row.id)\n                }\n                size=\"small\"\n                sx={{\n                  fontSize: 14,\n                  width: 57,\n                  '& .MuiInputBase-input': {\n                    padding: '4px 0',\n                    textAlign: 'center',\n                    fontWeight: 600,\n                    color: 'text.primary',\n                  },\n                  '& .MuiOutlinedInput-notchedOutline': {\n                    border: 'none',\n                  },\n                }}\n                value={currentEditedCostBasis}\n              />\n            ) : (\n              <Text sx={{ fontSize: 14, width: 57 }} variant=\"body2\">\n                {params.value?.toLocaleString('en-US', {\n                  currency: 'USD',\n                  maximumFractionDigits: 2,\n                  minimumFractionDigits: 2,\n                  style: 'currency',\n                })}\n              </Text>\n            )}\n            <IconButton\n              onClick={() => handleCostBasisClick(params.row.id, params.row.costBasis)}\n              sx={{ minWidth: 12, minHeight: 12 }}\n            >\n              <Icon name={'stylus'} size={12} sx={{ color: 'grey.700' }} />\n            </IconButton>\n          </Stack>\n        )\n      },\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'totalGainLoss',\n      headerName: copy.overview.total_gain_loss_header,\n      width: 196,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const costBasis = params.row.costBasis\n        const gainLossPercentage = costBasis ? (params.row.totalGainLoss / costBasis) * 100 : 0\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 2 }}>\n            {params.value !== 0 && (\n              <Icon\n                name={params.value > 0 ? 'trending_up' : 'trending_down'}\n                size={16}\n                sx={{\n                  color: gainLossDisplayColor(params.value),\n                  mr: 1,\n                  verticalAlign: 'middle',\n                }}\n              />\n            )}\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {costBasis ? `${gainLossPercentage.toFixed(2)}%` : '0.00%'}\n            </Text>\n            <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n              |\n            </Text>\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {Math.abs(params.value).toLocaleString('en-US', {\n                currency: 'USD',\n                maximumFractionDigits: 2,\n                minimumFractionDigits: 2,\n                style: 'currency',\n              })}\n            </Text>\n          </Stack>\n        )\n      },\n      align: 'right',\n      headerAlign: 'right',\n      sortable: false,\n    },\n    {\n      field: 'marketValue',\n      headerName: copy.overview.market_value_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text sx={{ fontWeight: 700 }} variant={'body2'}>\n          {params.value?.toLocaleString('en-US', {\n            currency: 'USD',\n            maximumFractionDigits: 2,\n            minimumFractionDigits: 2,\n            style: 'currency',\n          })}\n        </Text>\n      ),\n      align: 'right',\n      headerAlign: 'right',\n    },\n  ]\n\n  return (\n    <Paper\n      sx={{\n        boxShadow: 'none',\n        width: '100%',\n      }}\n    >\n      <DataGridPro\n        columns={columns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        disableRowSelectionOnClick={true}\n        hideFooter={true}\n        rows={data}\n        slotProps={{ baseIconButton: { sx: { display: 'none' } } }}\n      />\n    </Paper>\n  )\n}\n\nexport default HoldingsTable\n"],"mappings":"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"}
+{"version":3,"file":"HoldingTable.es.js","names":[],"sources":["../../../src/investments/components/HoldingTable.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport Paper from '@mui/material/Paper'\nimport IconButton from '@mui/material/IconButton'\nimport TextField from '@mui/material/TextField'\nimport { useTheme } from '@mui/material/styles'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\n\nimport { HeaderCell } from './HeaderCell'\n\ninterface HoldingDetail {\n  id: string\n  description: string\n  qty: number\n  holding: string\n  costBasis: number\n  rawCostBasis: number\n  totalGainLoss: number\n  gainLossAvailable: boolean\n  gainLossBasis: number\n  marketValue: number\n}\n\ninterface HoldingsTableProps {\n  data: HoldingDetail[]\n  editingHoldingId: string | null\n  currentEditedCostBasis: string\n  handleCostBasisClick: (holdingId: string, currentCostBasis: number) => void\n  handleCostBasisChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  handleCostBasisKeyDown: (event: React.KeyboardEvent<HTMLInputElement>, id: string) => void\n  handleCostBasisBlur: (id: string) => void\n}\n\nconst HoldingsTable: React.FC<HoldingsTableProps> = ({\n  data,\n  editingHoldingId,\n  currentEditedCostBasis,\n  handleCostBasisClick,\n  handleCostBasisChange,\n  handleCostBasisKeyDown,\n  handleCostBasisBlur,\n}) => {\n  const { investments: copy } = useGlobalCopyStore()\n  const theme = useTheme()\n\n  const isDarkMode = theme.palette.mode === 'dark'\n  const gainDisplayColor = 'success.main'\n  const lossDisplayColor = isDarkMode ? 'grey.300' : 'grey.700'\n\n  const gainLossDisplayColor = (value: number, type: string = 'lesserThan') => {\n    if (type === 'greaterThan') {\n      return value >= 0 ? gainDisplayColor : lossDisplayColor\n    }\n    return value <= 0 ? lossDisplayColor : gainDisplayColor\n  }\n\n  const columns: GridColDef[] = [\n    {\n      field: 'qty',\n      headerName: copy.overview.qty_header,\n      sortable: false,\n      width: 48,\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'holding',\n      headerName: copy.overview.holding_header,\n      flex: 1,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Stack sx={{ alignItems: 'center', gap: 16, flexDirection: 'row' }}>\n          <Stack>\n            {/* TODO :InstitutionLogo in future */}\n            <Text sx={{ fontWeight: 700 }}>{params.row.holding}</Text>\n            <Text sx={{ color: 'text.secondary', fontWeight: 400 }} variant=\"tiny\">\n              {params.row.description}\n            </Text>\n          </Stack>\n        </Stack>\n      ),\n    },\n    {\n      field: 'costBasis',\n      headerName: copy.overview.cost_basis_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const isCurrentlyEditing = editingHoldingId === params.row.id\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n            {isCurrentlyEditing ? (\n              <TextField\n                autoFocus={true}\n                onBlur={() => handleCostBasisBlur(params.row.id)}\n                onChange={handleCostBasisChange}\n                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>\n                  handleCostBasisKeyDown(e, params.row.id)\n                }\n                size=\"small\"\n                sx={{\n                  fontSize: 14,\n                  width: 57,\n                  '& .MuiInputBase-input': {\n                    padding: '4px 0',\n                    textAlign: 'center',\n                    fontWeight: 600,\n                    color: 'text.primary',\n                  },\n                  '& .MuiOutlinedInput-notchedOutline': {\n                    border: 'none',\n                  },\n                }}\n                value={currentEditedCostBasis}\n              />\n            ) : (\n              <Text sx={{ fontSize: 14, width: 57 }} variant=\"body2\">\n                {params.row.gainLossAvailable\n                  ? params.value?.toLocaleString('en-US', {\n                      currency: 'USD',\n                      maximumFractionDigits: 2,\n                      minimumFractionDigits: 2,\n                      style: 'currency',\n                    })\n                  : '—'}\n              </Text>\n            )}\n            <IconButton\n              onClick={() => handleCostBasisClick(params.row.id, params.row.rawCostBasis)}\n              sx={{ minWidth: 12, minHeight: 12 }}\n            >\n              <Icon name={'stylus'} size={12} sx={{ color: 'grey.700' }} />\n            </IconButton>\n          </Stack>\n        )\n      },\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'totalGainLoss',\n      headerName: copy.overview.total_gain_loss_header,\n      width: 196,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const gainLossBasis = params.row.gainLossBasis\n        const gainLossPercentage = gainLossBasis\n          ? (params.row.totalGainLoss / gainLossBasis) * 100\n          : 0\n        // No known cost basis — show \"—\" instead of a fabricated 0/100%.\n        if (!params.row.gainLossAvailable) {\n          return (\n            <Text sx={{ color: 'text.secondary' }} variant=\"body2\">\n              —\n            </Text>\n          )\n        }\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 2 }}>\n            {params.value !== 0 && (\n              <Icon\n                name={params.value > 0 ? 'trending_up' : 'trending_down'}\n                size={16}\n                sx={{\n                  color: gainLossDisplayColor(params.value),\n                  mr: 1,\n                  verticalAlign: 'middle',\n                }}\n              />\n            )}\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {gainLossBasis ? `${gainLossPercentage.toFixed(2)}%` : '0.00%'}\n            </Text>\n            <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n              |\n            </Text>\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {Math.abs(params.value).toLocaleString('en-US', {\n                currency: 'USD',\n                maximumFractionDigits: 2,\n                minimumFractionDigits: 2,\n                style: 'currency',\n              })}\n            </Text>\n          </Stack>\n        )\n      },\n      align: 'right',\n      headerAlign: 'right',\n      sortable: false,\n    },\n    {\n      field: 'marketValue',\n      headerName: copy.overview.market_value_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text sx={{ fontWeight: 700 }} variant={'body2'}>\n          {params.value?.toLocaleString('en-US', {\n            currency: 'USD',\n            maximumFractionDigits: 2,\n            minimumFractionDigits: 2,\n            style: 'currency',\n          })}\n        </Text>\n      ),\n      align: 'right',\n      headerAlign: 'right',\n    },\n  ]\n\n  return (\n    <Paper\n      sx={{\n        boxShadow: 'none',\n        width: '100%',\n      }}\n    >\n      <DataGridPro\n        columns={columns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        disableRowSelectionOnClick={true}\n        hideFooter={true}\n        rows={data}\n        slotProps={{ baseIconButton: { sx: { display: 'none' } } }}\n      />\n    </Paper>\n  )\n}\n\nexport default HoldingsTable\n"],"mappings":"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"}