@medialane/ui 0.18.0 → 0.20.0

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.
@@ -26,7 +26,28 @@ var import_jsx_runtime = require("react/jsx-runtime");
26
26
  var import_lucide_react = require("lucide-react");
27
27
  var import_ip_type_display = require("./ip-type-display.js");
28
28
  var import_address_display = require("./address-display.js");
29
+ var import_license_summary = require("../utils/license-summary.js");
29
30
  const isAddressLike = (v) => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());
31
+ function Cell({
32
+ icon,
33
+ label,
34
+ value,
35
+ wide
36
+ }) {
37
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
38
+ "div",
39
+ {
40
+ className: `flex flex-col justify-between gap-2 rounded-xl bg-muted/25 ring-1 ring-border/40 p-3.5 ${wide ? "col-span-2" : ""}`,
41
+ children: [
42
+ icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-primary/70", children: icon }) : null,
43
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-0.5", children: [
44
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground truncate", title: label, children: label }),
45
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-bold text-foreground truncate", children: value })
46
+ ] })
47
+ ]
48
+ }
49
+ );
50
+ }
30
51
  function AssetOverviewContent({
31
52
  attributes,
32
53
  hasTemplateData,
@@ -40,62 +61,50 @@ function AssetOverviewContent({
40
61
  const territory = attr("Territory");
41
62
  const aiPolicy = attr("AI Policy");
42
63
  const royalty = attr("Royalty");
43
- const standard = attr("Standard");
44
64
  const registration = attr("Registration");
45
- const hasLicenseData = licenseType || commercialUse || derivatives || attribution;
65
+ const summary = (0, import_license_summary.licenseSummary)(attributes);
66
+ const hasLicenseData = !!(licenseType || commercialUse || derivatives || attribution);
46
67
  const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));
47
- const rows = [
48
- { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShieldCheck, { className: "h-4 w-4" }), label: "License", value: licenseType },
49
- { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.DollarSign, { className: "h-4 w-4" }), label: "Commercial Use", value: commercialUse },
68
+ const facts = [
69
+ { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.DollarSign, { className: "h-4 w-4" }), label: "Commercial use", value: commercialUse },
50
70
  { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.GitBranch, { className: "h-4 w-4" }), label: "Derivatives", value: derivatives },
51
71
  { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserCheck, { className: "h-4 w-4" }), label: "Attribution", value: attribution },
52
72
  { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Globe, { className: "h-4 w-4" }), label: "Territory", value: territory },
53
- { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bot, { className: "h-4 w-4" }), label: "AI & Data Mining", value: aiPolicy },
73
+ { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bot, { className: "h-4 w-4" }), label: "AI & data mining", value: aiPolicy },
54
74
  { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Percent, { className: "h-4 w-4" }), label: "Royalty", value: royalty },
55
- { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { className: "h-4 w-4" }), label: "Registration", value: registration }
75
+ { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { className: "h-4 w-4" }), label: "Registered", value: registration }
56
76
  ].filter((row) => !!row.value);
57
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 space-y-6", children: [
77
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 space-y-7", children: [
58
78
  hasTemplateData ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ip_type_display.IPTypeDisplay, { attributes }) : null,
59
- hasLicenseData ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
60
- standard ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-3 rounded-xl border border-primary/15 bg-primary/5 px-4 py-3.5", children: [
61
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShieldCheck, { className: "h-5 w-5 text-primary shrink-0 mt-0.5" }),
62
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
63
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold", children: "Your intellectual property is protected worldwide" }),
64
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground mt-0.5 leading-relaxed", children: "Licensing terms are immutably stored on IPFS and recognized under international copyright law." })
79
+ hasLicenseData ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-3", children: [
80
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Rights" }),
81
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
82
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
83
+ "div",
84
+ {
85
+ "aria-hidden": true,
86
+ className: "aurora-purple pointer-events-none",
87
+ style: { position: "absolute", width: 260, height: 260, top: -40, left: "30%" }
88
+ }
89
+ ),
90
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]", children: [
91
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col-span-2 sm:row-span-2 flex flex-col justify-between gap-4 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-accent/10 ring-1 ring-primary/15 p-5", children: [
92
+ licenseType ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pill-badge self-start text-[10px] uppercase tracking-wider", children: licenseType }) : null,
93
+ summary ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-base sm:text-lg font-semibold leading-snug text-foreground", children: summary }) : null
94
+ ] }),
95
+ facts.map(({ icon, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Cell, { icon, label, value }, label))
65
96
  ] })
66
- ] }) : null,
67
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-2.5", children: rows.map(({ icon, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
68
- "div",
69
- {
70
- className: "rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30",
71
- children: [
72
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5 mb-1 text-muted-foreground/70", children: [
73
- icon,
74
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider truncate", children: label })
75
- ] }),
76
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold truncate", title: value, children: value })
77
- ]
78
- },
79
- label
80
- )) })
97
+ ] }),
98
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground/70", children: "Kept in permanent, tamper-proof storage \xB7 recognized under international copyright law" })
81
99
  ] }) : null,
82
- displayAttributes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
83
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2", children: "Attributes" }),
84
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-2.5", children: displayAttributes.map((attribute, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
85
- "div",
100
+ displayAttributes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-3", children: [
101
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Details" }),
102
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]", children: displayAttributes.map((attribute, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
103
+ Cell,
86
104
  {
87
- className: "rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30",
88
- children: [
89
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
90
- "p",
91
- {
92
- className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70 truncate",
93
- title: attribute.trait_type ?? "Trait",
94
- children: attribute.trait_type ?? "Trait"
95
- }
96
- ),
97
- isAddressLike(attribute.value) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_address_display.AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-semibold mt-1" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold mt-1 truncate", title: attribute.value ?? "\u2014", children: attribute.value ?? "\u2014" })
98
- ]
105
+ label: attribute.trait_type ?? "Trait",
106
+ wide: isAddressLike(attribute.value),
107
+ value: isAddressLike(attribute.value) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_address_display.AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-bold" }) : attribute.value ?? "\u2014"
99
108
  },
100
109
  index
101
110
  )) })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, ShieldCheck, UserCheck } from \"lucide-react\";\nimport { IPTypeDisplay } from \"./ip-type-display.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\ninterface AssetAttribute {\n trait_type?: string;\n value?: string;\n}\n\ninterface AssetOverviewContentProps {\n attributes: AssetAttribute[];\n hasTemplateData: boolean;\n isDisplayAttr: (attribute: AssetAttribute) => boolean;\n}\n\nconst isAddressLike = (v?: string): boolean => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());\n\n/**\n * Asset Overview tab the license receipts. A worldwide-protection banner, the\n * full license bento, then a refined attributes grid (uniform cards, copyable\n * address-like values, no rarity). The human one-line summary lives in the hero\n * column (see AssetLicenseSummary), not here.\n */\nexport function AssetOverviewContent({\n attributes,\n hasTemplateData,\n isDisplayAttr,\n}: AssetOverviewContentProps) {\n const attr = (trait: string) => attributes.find((attribute) => attribute.trait_type === trait)?.value;\n const licenseType = attr(\"License\");\n const commercialUse = attr(\"Commercial Use\");\n const derivatives = attr(\"Derivatives\");\n const attribution = attr(\"Attribution\");\n const territory = attr(\"Territory\");\n const aiPolicy = attr(\"AI Policy\");\n const royalty = attr(\"Royalty\");\n const standard = attr(\"Standard\");\n const registration = attr(\"Registration\");\n const hasLicenseData = licenseType || commercialUse || derivatives || attribution;\n const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));\n\n const rows = [\n { icon: <ShieldCheck className=\"h-4 w-4\" />, label: \"License\", value: licenseType },\n { icon: <DollarSign className=\"h-4 w-4\" />, label: \"Commercial Use\", value: commercialUse },\n { icon: <GitBranch className=\"h-4 w-4\" />, label: \"Derivatives\", value: derivatives },\n { icon: <UserCheck className=\"h-4 w-4\" />, label: \"Attribution\", value: attribution },\n { icon: <Globe className=\"h-4 w-4\" />, label: \"Territory\", value: territory },\n { icon: <Bot className=\"h-4 w-4\" />, label: \"AI & Data Mining\", value: aiPolicy },\n { icon: <Percent className=\"h-4 w-4\" />, label: \"Royalty\", value: royalty },\n { icon: <Calendar className=\"h-4 w-4\" />, label: \"Registration\", value: registration },\n ].filter((row) => !!row.value);\n\n return (\n <div className=\"mt-4 space-y-6\">\n {hasTemplateData ? <IPTypeDisplay attributes={attributes} /> : null}\n\n {hasLicenseData ? (\n <div className=\"space-y-3\">\n {standard ? (\n <div className=\"flex items-start gap-3 rounded-xl border border-primary/15 bg-primary/5 px-4 py-3.5\">\n <ShieldCheck className=\"h-5 w-5 text-primary shrink-0 mt-0.5\" />\n <div>\n <p className=\"text-sm font-semibold\">Your intellectual property is protected worldwide</p>\n <p className=\"text-xs text-muted-foreground mt-0.5 leading-relaxed\">\n Licensing terms are immutably stored on IPFS and recognized under international copyright law.\n </p>\n </div>\n </div>\n ) : null}\n\n <div className=\"grid grid-cols-2 sm:grid-cols-3 gap-2.5\">\n {rows.map(({ icon, label, value }) => (\n <div\n key={label}\n className=\"rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30\"\n >\n <div className=\"flex items-center gap-1.5 mb-1 text-muted-foreground/70\">\n {icon}\n <p className=\"text-[10px] font-medium uppercase tracking-wider truncate\">{label}</p>\n </div>\n <p className=\"text-sm font-semibold truncate\" title={value}>{value}</p>\n </div>\n ))}\n </div>\n </div>\n ) : null}\n\n {/* Refined attributes uniform cards, copyable address values, no rarity. */}\n {displayAttributes.length > 0 ? (\n <div>\n <p className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2\">Attributes</p>\n <div className=\"grid grid-cols-2 sm:grid-cols-3 gap-2.5\">\n {displayAttributes.map((attribute, index) => (\n <div\n key={index}\n className=\"rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30\"\n >\n <p\n className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70 truncate\"\n title={attribute.trait_type ?? \"Trait\"}\n >\n {attribute.trait_type ?? \"Trait\"}\n </p>\n {isAddressLike(attribute.value) ? (\n <AddressDisplay address={attribute.value!} chars={4} className=\"text-sm font-semibold mt-1\" />\n ) : (\n <p className=\"text-sm font-semibold mt-1 truncate\" title={attribute.value ?? \"—\"}>\n {attribute.value ?? \"—\"}\n </p>\n )}\n </div>\n ))}\n </div>\n </div>\n ) : null}\n\n {!hasTemplateData && !hasLicenseData && displayAttributes.length === 0 ? (\n <p className=\"text-sm text-muted-foreground\">No additional details available.</p>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, UserCheck } from \"lucide-react\";\nimport { IPTypeDisplay } from \"./ip-type-display.js\";\nimport { AddressDisplay } from \"./address-display.js\";\nimport { licenseSummary } from \"../utils/license-summary.js\";\n\ninterface AssetAttribute {\n trait_type?: string;\n value?: string;\n}\n\ninterface AssetOverviewContentProps {\n attributes: AssetAttribute[];\n hasTemplateData: boolean;\n isDisplayAttr: (attribute: AssetAttribute) => boolean;\n}\n\nconst isAddressLike = (v?: string): boolean => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());\n\n/** A standard bento square: a brand-tinted icon, an uppercase label, a bold value.\n * `wide` stretches it across two columns for an emphasized detail. */\nfunction Cell({\n icon,\n label,\n value,\n wide,\n}: {\n icon?: ReactNode;\n label: string;\n value: ReactNode;\n wide?: boolean;\n}) {\n return (\n <div\n className={`flex flex-col justify-between gap-2 rounded-xl bg-muted/25 ring-1 ring-border/40 p-3.5 ${\n wide ? \"col-span-2\" : \"\"\n }`}\n >\n {icon ? <span className=\"text-primary/70\">{icon}</span> : null}\n <div className=\"space-y-0.5\">\n <p className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground truncate\" title={label}>\n {label}\n </p>\n <div className=\"text-sm font-bold text-foreground truncate\">{value}</div>\n </div>\n </div>\n );\n}\n\n/**\n * Asset Overview tab, as a Bento 2.0 grid: an asymmetrical lattice of rounded\n * compartments on a soft brand light-leak, uniform gaps throughout. The license\n * summary is the emphasized cell (stretched 2×2, brand-gradient wash + license\n * stamp + emerald trust seal); each right is a standard square; Details follow.\n * Uses only design-system tokens (brand-* / primary / aurora / emerald-for-trust).\n */\nexport function AssetOverviewContent({\n attributes,\n hasTemplateData,\n isDisplayAttr,\n}: AssetOverviewContentProps) {\n const attr = (trait: string) => attributes.find((attribute) => attribute.trait_type === trait)?.value;\n const licenseType = attr(\"License\");\n const commercialUse = attr(\"Commercial Use\");\n const derivatives = attr(\"Derivatives\");\n const attribution = attr(\"Attribution\");\n const territory = attr(\"Territory\");\n const aiPolicy = attr(\"AI Policy\");\n const royalty = attr(\"Royalty\");\n const registration = attr(\"Registration\");\n const summary = licenseSummary(attributes);\n const hasLicenseData = !!(licenseType || commercialUse || derivatives || attribution);\n const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));\n\n const facts = [\n { icon: <DollarSign className=\"h-4 w-4\" />, label: \"Commercial use\", value: commercialUse },\n { icon: <GitBranch className=\"h-4 w-4\" />, label: \"Derivatives\", value: derivatives },\n { icon: <UserCheck className=\"h-4 w-4\" />, label: \"Attribution\", value: attribution },\n { icon: <Globe className=\"h-4 w-4\" />, label: \"Territory\", value: territory },\n { icon: <Bot className=\"h-4 w-4\" />, label: \"AI & data mining\", value: aiPolicy },\n { icon: <Percent className=\"h-4 w-4\" />, label: \"Royalty\", value: royalty },\n { icon: <Calendar className=\"h-4 w-4\" />, label: \"Registered\", value: registration },\n ].filter((row) => !!row.value);\n\n return (\n <div className=\"mt-4 space-y-7\">\n {hasTemplateData ? <IPTypeDisplay attributes={attributes} /> : null}\n\n {hasLicenseData ? (\n <section className=\"space-y-3\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Rights</h3>\n <div className=\"relative\">\n {/* soft brand light-leak behind the lattice */}\n <div\n aria-hidden\n className=\"aurora-purple pointer-events-none\"\n style={{ position: \"absolute\", width: 260, height: 260, top: -40, left: \"30%\" }}\n />\n <div className=\"relative grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]\">\n {/* emphasized cell — the license summary, stretched 2×2 */}\n <div className=\"col-span-2 sm:row-span-2 flex flex-col justify-between gap-4 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-accent/10 ring-1 ring-primary/15 p-5\">\n {licenseType ? (\n <span className=\"pill-badge self-start text-[10px] uppercase tracking-wider\">{licenseType}</span>\n ) : null}\n {summary ? (\n <p className=\"text-base sm:text-lg font-semibold leading-snug text-foreground\">{summary}</p>\n ) : null}\n </div>\n\n {facts.map(({ icon, label, value }) => (\n <Cell key={label} icon={icon} label={label} value={value} />\n ))}\n </div>\n </div>\n <p className=\"text-xs text-muted-foreground/70\">\n Kept in permanent, tamper-proof storage · recognized under international copyright law\n </p>\n </section>\n ) : null}\n\n {displayAttributes.length > 0 ? (\n <section className=\"space-y-3\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Details</h3>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]\">\n {displayAttributes.map((attribute, index) => (\n <Cell\n key={index}\n label={attribute.trait_type ?? \"Trait\"}\n wide={isAddressLike(attribute.value)}\n value={\n isAddressLike(attribute.value) ? (\n <AddressDisplay address={attribute.value!} chars={4} className=\"text-sm font-bold\" />\n ) : (\n attribute.value ?? \"—\"\n )\n }\n />\n ))}\n </div>\n </section>\n ) : null}\n\n {!hasTemplateData && !hasLicenseData && displayAttributes.length === 0 ? (\n <p className=\"text-sm text-muted-foreground\">No additional details available.</p>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
@@ -10,10 +10,11 @@ interface AssetOverviewContentProps {
10
10
  isDisplayAttr: (attribute: AssetAttribute) => boolean;
11
11
  }
12
12
  /**
13
- * Asset Overview tab the license receipts. A worldwide-protection banner, the
14
- * full license bento, then a refined attributes grid (uniform cards, copyable
15
- * address-like values, no rarity). The human one-line summary lives in the hero
16
- * column (see AssetLicenseSummary), not here.
13
+ * Asset Overview tab, as a Bento 2.0 grid: an asymmetrical lattice of rounded
14
+ * compartments on a soft brand light-leak, uniform gaps throughout. The license
15
+ * summary is the emphasized cell (stretched 2×2, brand-gradient wash + license
16
+ * stamp + emerald trust seal); each right is a standard square; Details follow.
17
+ * Uses only design-system tokens (brand-* / primary / aurora / emerald-for-trust).
17
18
  */
18
19
  declare function AssetOverviewContent({ attributes, hasTemplateData, isDisplayAttr, }: AssetOverviewContentProps): react_jsx_runtime.JSX.Element;
19
20
 
@@ -10,10 +10,11 @@ interface AssetOverviewContentProps {
10
10
  isDisplayAttr: (attribute: AssetAttribute) => boolean;
11
11
  }
12
12
  /**
13
- * Asset Overview tab the license receipts. A worldwide-protection banner, the
14
- * full license bento, then a refined attributes grid (uniform cards, copyable
15
- * address-like values, no rarity). The human one-line summary lives in the hero
16
- * column (see AssetLicenseSummary), not here.
13
+ * Asset Overview tab, as a Bento 2.0 grid: an asymmetrical lattice of rounded
14
+ * compartments on a soft brand light-leak, uniform gaps throughout. The license
15
+ * summary is the emphasized cell (stretched 2×2, brand-gradient wash + license
16
+ * stamp + emerald trust seal); each right is a standard square; Details follow.
17
+ * Uses only design-system tokens (brand-* / primary / aurora / emerald-for-trust).
17
18
  */
18
19
  declare function AssetOverviewContent({ attributes, hasTemplateData, isDisplayAttr, }: AssetOverviewContentProps): react_jsx_runtime.JSX.Element;
19
20
 
@@ -1,9 +1,30 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, ShieldCheck, UserCheck } from "lucide-react";
3
+ import { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, UserCheck } from "lucide-react";
4
4
  import { IPTypeDisplay } from "./ip-type-display.js";
5
5
  import { AddressDisplay } from "./address-display.js";
6
+ import { licenseSummary } from "../utils/license-summary.js";
6
7
  const isAddressLike = (v) => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());
8
+ function Cell({
9
+ icon,
10
+ label,
11
+ value,
12
+ wide
13
+ }) {
14
+ return /* @__PURE__ */ jsxs(
15
+ "div",
16
+ {
17
+ className: `flex flex-col justify-between gap-2 rounded-xl bg-muted/25 ring-1 ring-border/40 p-3.5 ${wide ? "col-span-2" : ""}`,
18
+ children: [
19
+ icon ? /* @__PURE__ */ jsx("span", { className: "text-primary/70", children: icon }) : null,
20
+ /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
21
+ /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground truncate", title: label, children: label }),
22
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-bold text-foreground truncate", children: value })
23
+ ] })
24
+ ]
25
+ }
26
+ );
27
+ }
7
28
  function AssetOverviewContent({
8
29
  attributes,
9
30
  hasTemplateData,
@@ -17,62 +38,50 @@ function AssetOverviewContent({
17
38
  const territory = attr("Territory");
18
39
  const aiPolicy = attr("AI Policy");
19
40
  const royalty = attr("Royalty");
20
- const standard = attr("Standard");
21
41
  const registration = attr("Registration");
22
- const hasLicenseData = licenseType || commercialUse || derivatives || attribution;
42
+ const summary = licenseSummary(attributes);
43
+ const hasLicenseData = !!(licenseType || commercialUse || derivatives || attribution);
23
44
  const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));
24
- const rows = [
25
- { icon: /* @__PURE__ */ jsx(ShieldCheck, { className: "h-4 w-4" }), label: "License", value: licenseType },
26
- { icon: /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4" }), label: "Commercial Use", value: commercialUse },
45
+ const facts = [
46
+ { icon: /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4" }), label: "Commercial use", value: commercialUse },
27
47
  { icon: /* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4" }), label: "Derivatives", value: derivatives },
28
48
  { icon: /* @__PURE__ */ jsx(UserCheck, { className: "h-4 w-4" }), label: "Attribution", value: attribution },
29
49
  { icon: /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4" }), label: "Territory", value: territory },
30
- { icon: /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4" }), label: "AI & Data Mining", value: aiPolicy },
50
+ { icon: /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4" }), label: "AI & data mining", value: aiPolicy },
31
51
  { icon: /* @__PURE__ */ jsx(Percent, { className: "h-4 w-4" }), label: "Royalty", value: royalty },
32
- { icon: /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }), label: "Registration", value: registration }
52
+ { icon: /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }), label: "Registered", value: registration }
33
53
  ].filter((row) => !!row.value);
34
- return /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-6", children: [
54
+ return /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-7", children: [
35
55
  hasTemplateData ? /* @__PURE__ */ jsx(IPTypeDisplay, { attributes }) : null,
36
- hasLicenseData ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
37
- standard ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-primary/15 bg-primary/5 px-4 py-3.5", children: [
38
- /* @__PURE__ */ jsx(ShieldCheck, { className: "h-5 w-5 text-primary shrink-0 mt-0.5" }),
39
- /* @__PURE__ */ jsxs("div", { children: [
40
- /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Your intellectual property is protected worldwide" }),
41
- /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 leading-relaxed", children: "Licensing terms are immutably stored on IPFS and recognized under international copyright law." })
56
+ hasLicenseData ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
57
+ /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Rights" }),
58
+ /* @__PURE__ */ jsxs("div", { className: "relative", children: [
59
+ /* @__PURE__ */ jsx(
60
+ "div",
61
+ {
62
+ "aria-hidden": true,
63
+ className: "aurora-purple pointer-events-none",
64
+ style: { position: "absolute", width: 260, height: 260, top: -40, left: "30%" }
65
+ }
66
+ ),
67
+ /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]", children: [
68
+ /* @__PURE__ */ jsxs("div", { className: "col-span-2 sm:row-span-2 flex flex-col justify-between gap-4 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-accent/10 ring-1 ring-primary/15 p-5", children: [
69
+ licenseType ? /* @__PURE__ */ jsx("span", { className: "pill-badge self-start text-[10px] uppercase tracking-wider", children: licenseType }) : null,
70
+ summary ? /* @__PURE__ */ jsx("p", { className: "text-base sm:text-lg font-semibold leading-snug text-foreground", children: summary }) : null
71
+ ] }),
72
+ facts.map(({ icon, label, value }) => /* @__PURE__ */ jsx(Cell, { icon, label, value }, label))
42
73
  ] })
43
- ] }) : null,
44
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-2.5", children: rows.map(({ icon, label, value }) => /* @__PURE__ */ jsxs(
45
- "div",
46
- {
47
- className: "rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30",
48
- children: [
49
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1 text-muted-foreground/70", children: [
50
- icon,
51
- /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium uppercase tracking-wider truncate", children: label })
52
- ] }),
53
- /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold truncate", title: value, children: value })
54
- ]
55
- },
56
- label
57
- )) })
74
+ ] }),
75
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70", children: "Kept in permanent, tamper-proof storage \xB7 recognized under international copyright law" })
58
76
  ] }) : null,
59
- displayAttributes.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
60
- /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2", children: "Attributes" }),
61
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-2.5", children: displayAttributes.map((attribute, index) => /* @__PURE__ */ jsxs(
62
- "div",
77
+ displayAttributes.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
78
+ /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Details" }),
79
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]", children: displayAttributes.map((attribute, index) => /* @__PURE__ */ jsx(
80
+ Cell,
63
81
  {
64
- className: "rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30",
65
- children: [
66
- /* @__PURE__ */ jsx(
67
- "p",
68
- {
69
- className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70 truncate",
70
- title: attribute.trait_type ?? "Trait",
71
- children: attribute.trait_type ?? "Trait"
72
- }
73
- ),
74
- isAddressLike(attribute.value) ? /* @__PURE__ */ jsx(AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-semibold mt-1" }) : /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold mt-1 truncate", title: attribute.value ?? "\u2014", children: attribute.value ?? "\u2014" })
75
- ]
82
+ label: attribute.trait_type ?? "Trait",
83
+ wide: isAddressLike(attribute.value),
84
+ value: isAddressLike(attribute.value) ? /* @__PURE__ */ jsx(AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-bold" }) : attribute.value ?? "\u2014"
76
85
  },
77
86
  index
78
87
  )) })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, ShieldCheck, UserCheck } from \"lucide-react\";\nimport { IPTypeDisplay } from \"./ip-type-display.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\ninterface AssetAttribute {\n trait_type?: string;\n value?: string;\n}\n\ninterface AssetOverviewContentProps {\n attributes: AssetAttribute[];\n hasTemplateData: boolean;\n isDisplayAttr: (attribute: AssetAttribute) => boolean;\n}\n\nconst isAddressLike = (v?: string): boolean => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());\n\n/**\n * Asset Overview tab the license receipts. A worldwide-protection banner, the\n * full license bento, then a refined attributes grid (uniform cards, copyable\n * address-like values, no rarity). The human one-line summary lives in the hero\n * column (see AssetLicenseSummary), not here.\n */\nexport function AssetOverviewContent({\n attributes,\n hasTemplateData,\n isDisplayAttr,\n}: AssetOverviewContentProps) {\n const attr = (trait: string) => attributes.find((attribute) => attribute.trait_type === trait)?.value;\n const licenseType = attr(\"License\");\n const commercialUse = attr(\"Commercial Use\");\n const derivatives = attr(\"Derivatives\");\n const attribution = attr(\"Attribution\");\n const territory = attr(\"Territory\");\n const aiPolicy = attr(\"AI Policy\");\n const royalty = attr(\"Royalty\");\n const standard = attr(\"Standard\");\n const registration = attr(\"Registration\");\n const hasLicenseData = licenseType || commercialUse || derivatives || attribution;\n const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));\n\n const rows = [\n { icon: <ShieldCheck className=\"h-4 w-4\" />, label: \"License\", value: licenseType },\n { icon: <DollarSign className=\"h-4 w-4\" />, label: \"Commercial Use\", value: commercialUse },\n { icon: <GitBranch className=\"h-4 w-4\" />, label: \"Derivatives\", value: derivatives },\n { icon: <UserCheck className=\"h-4 w-4\" />, label: \"Attribution\", value: attribution },\n { icon: <Globe className=\"h-4 w-4\" />, label: \"Territory\", value: territory },\n { icon: <Bot className=\"h-4 w-4\" />, label: \"AI & Data Mining\", value: aiPolicy },\n { icon: <Percent className=\"h-4 w-4\" />, label: \"Royalty\", value: royalty },\n { icon: <Calendar className=\"h-4 w-4\" />, label: \"Registration\", value: registration },\n ].filter((row) => !!row.value);\n\n return (\n <div className=\"mt-4 space-y-6\">\n {hasTemplateData ? <IPTypeDisplay attributes={attributes} /> : null}\n\n {hasLicenseData ? (\n <div className=\"space-y-3\">\n {standard ? (\n <div className=\"flex items-start gap-3 rounded-xl border border-primary/15 bg-primary/5 px-4 py-3.5\">\n <ShieldCheck className=\"h-5 w-5 text-primary shrink-0 mt-0.5\" />\n <div>\n <p className=\"text-sm font-semibold\">Your intellectual property is protected worldwide</p>\n <p className=\"text-xs text-muted-foreground mt-0.5 leading-relaxed\">\n Licensing terms are immutably stored on IPFS and recognized under international copyright law.\n </p>\n </div>\n </div>\n ) : null}\n\n <div className=\"grid grid-cols-2 sm:grid-cols-3 gap-2.5\">\n {rows.map(({ icon, label, value }) => (\n <div\n key={label}\n className=\"rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30\"\n >\n <div className=\"flex items-center gap-1.5 mb-1 text-muted-foreground/70\">\n {icon}\n <p className=\"text-[10px] font-medium uppercase tracking-wider truncate\">{label}</p>\n </div>\n <p className=\"text-sm font-semibold truncate\" title={value}>{value}</p>\n </div>\n ))}\n </div>\n </div>\n ) : null}\n\n {/* Refined attributes uniform cards, copyable address values, no rarity. */}\n {displayAttributes.length > 0 ? (\n <div>\n <p className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2\">Attributes</p>\n <div className=\"grid grid-cols-2 sm:grid-cols-3 gap-2.5\">\n {displayAttributes.map((attribute, index) => (\n <div\n key={index}\n className=\"rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30\"\n >\n <p\n className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70 truncate\"\n title={attribute.trait_type ?? \"Trait\"}\n >\n {attribute.trait_type ?? \"Trait\"}\n </p>\n {isAddressLike(attribute.value) ? (\n <AddressDisplay address={attribute.value!} chars={4} className=\"text-sm font-semibold mt-1\" />\n ) : (\n <p className=\"text-sm font-semibold mt-1 truncate\" title={attribute.value ?? \"—\"}>\n {attribute.value ?? \"—\"}\n </p>\n )}\n </div>\n ))}\n </div>\n </div>\n ) : null}\n\n {!hasTemplateData && !hasLicenseData && displayAttributes.length === 0 ? (\n <p className=\"text-sm text-muted-foreground\">No additional details available.</p>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, UserCheck } from \"lucide-react\";\nimport { IPTypeDisplay } from \"./ip-type-display.js\";\nimport { AddressDisplay } from \"./address-display.js\";\nimport { licenseSummary } from \"../utils/license-summary.js\";\n\ninterface AssetAttribute {\n trait_type?: string;\n value?: string;\n}\n\ninterface AssetOverviewContentProps {\n attributes: AssetAttribute[];\n hasTemplateData: boolean;\n isDisplayAttr: (attribute: AssetAttribute) => boolean;\n}\n\nconst isAddressLike = (v?: string): boolean => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());\n\n/** A standard bento square: a brand-tinted icon, an uppercase label, a bold value.\n * `wide` stretches it across two columns for an emphasized detail. */\nfunction Cell({\n icon,\n label,\n value,\n wide,\n}: {\n icon?: ReactNode;\n label: string;\n value: ReactNode;\n wide?: boolean;\n}) {\n return (\n <div\n className={`flex flex-col justify-between gap-2 rounded-xl bg-muted/25 ring-1 ring-border/40 p-3.5 ${\n wide ? \"col-span-2\" : \"\"\n }`}\n >\n {icon ? <span className=\"text-primary/70\">{icon}</span> : null}\n <div className=\"space-y-0.5\">\n <p className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground truncate\" title={label}>\n {label}\n </p>\n <div className=\"text-sm font-bold text-foreground truncate\">{value}</div>\n </div>\n </div>\n );\n}\n\n/**\n * Asset Overview tab, as a Bento 2.0 grid: an asymmetrical lattice of rounded\n * compartments on a soft brand light-leak, uniform gaps throughout. The license\n * summary is the emphasized cell (stretched 2×2, brand-gradient wash + license\n * stamp + emerald trust seal); each right is a standard square; Details follow.\n * Uses only design-system tokens (brand-* / primary / aurora / emerald-for-trust).\n */\nexport function AssetOverviewContent({\n attributes,\n hasTemplateData,\n isDisplayAttr,\n}: AssetOverviewContentProps) {\n const attr = (trait: string) => attributes.find((attribute) => attribute.trait_type === trait)?.value;\n const licenseType = attr(\"License\");\n const commercialUse = attr(\"Commercial Use\");\n const derivatives = attr(\"Derivatives\");\n const attribution = attr(\"Attribution\");\n const territory = attr(\"Territory\");\n const aiPolicy = attr(\"AI Policy\");\n const royalty = attr(\"Royalty\");\n const registration = attr(\"Registration\");\n const summary = licenseSummary(attributes);\n const hasLicenseData = !!(licenseType || commercialUse || derivatives || attribution);\n const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));\n\n const facts = [\n { icon: <DollarSign className=\"h-4 w-4\" />, label: \"Commercial use\", value: commercialUse },\n { icon: <GitBranch className=\"h-4 w-4\" />, label: \"Derivatives\", value: derivatives },\n { icon: <UserCheck className=\"h-4 w-4\" />, label: \"Attribution\", value: attribution },\n { icon: <Globe className=\"h-4 w-4\" />, label: \"Territory\", value: territory },\n { icon: <Bot className=\"h-4 w-4\" />, label: \"AI & data mining\", value: aiPolicy },\n { icon: <Percent className=\"h-4 w-4\" />, label: \"Royalty\", value: royalty },\n { icon: <Calendar className=\"h-4 w-4\" />, label: \"Registered\", value: registration },\n ].filter((row) => !!row.value);\n\n return (\n <div className=\"mt-4 space-y-7\">\n {hasTemplateData ? <IPTypeDisplay attributes={attributes} /> : null}\n\n {hasLicenseData ? (\n <section className=\"space-y-3\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Rights</h3>\n <div className=\"relative\">\n {/* soft brand light-leak behind the lattice */}\n <div\n aria-hidden\n className=\"aurora-purple pointer-events-none\"\n style={{ position: \"absolute\", width: 260, height: 260, top: -40, left: \"30%\" }}\n />\n <div className=\"relative grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]\">\n {/* emphasized cell — the license summary, stretched 2×2 */}\n <div className=\"col-span-2 sm:row-span-2 flex flex-col justify-between gap-4 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-accent/10 ring-1 ring-primary/15 p-5\">\n {licenseType ? (\n <span className=\"pill-badge self-start text-[10px] uppercase tracking-wider\">{licenseType}</span>\n ) : null}\n {summary ? (\n <p className=\"text-base sm:text-lg font-semibold leading-snug text-foreground\">{summary}</p>\n ) : null}\n </div>\n\n {facts.map(({ icon, label, value }) => (\n <Cell key={label} icon={icon} label={label} value={value} />\n ))}\n </div>\n </div>\n <p className=\"text-xs text-muted-foreground/70\">\n Kept in permanent, tamper-proof storage · recognized under international copyright law\n </p>\n </section>\n ) : null}\n\n {displayAttributes.length > 0 ? (\n <section className=\"space-y-3\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Details</h3>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]\">\n {displayAttributes.map((attribute, index) => (\n <Cell\n key={index}\n label={attribute.trait_type ?? \"Trait\"}\n wide={isAddressLike(attribute.value)}\n value={\n isAddressLike(attribute.value) ? (\n <AddressDisplay address={attribute.value!} chars={4} className=\"text-sm font-bold\" />\n ) : (\n attribute.value ?? \"—\"\n )\n }\n />\n ))}\n </div>\n </section>\n ) : null}\n\n {!hasTemplateData && !hasLicenseData && displayAttributes.length === 0 ? (\n <p className=\"text-sm text-muted-foreground\">No additional details available.</p>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@medialane/ui",
3
- "version": "0.18.0",
3
+ "version": "0.20.0",
4
4
  "description": "Shared UI components for Medialane apps",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",