@contractspec/bundle.library 3.4.2 → 3.5.0

package/dist/components/docs/specs/SpecsOverlaysPage.js

@@ -2,131 +2,131 @@
 // src/components/docs/specs/SpecsOverlaysPage.tsx
 import Link from "@contractspec/lib.ui-link";
 import { ChevronRight } from "lucide-react";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function SpecsOverlaysPage() {
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: "space-y-8",
     children: [
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h1", {
+          /* @__PURE__ */ jsx("h1", {
             className: "text-4xl font-bold",
             children: "Overlays"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsxs("p", {
             className: "text-muted-foreground",
             children: [
               "An ",
-              /* @__PURE__ */ jsxDEV("strong", {
+              /* @__PURE__ */ jsx("strong", {
                 children: "OverlaySpec"
-              }, undefined, false, undefined, this),
+              }),
               " allows tenants or users to customize UI layouts and field visibility without modifying the underlying application code. Overlays are cryptographically signed to ensure they respect policy boundaries and cannot introduce security vulnerabilities."
             ]
-          }, undefined, true, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "Why overlays matter"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "Different users have different needs. A power user might want to see all available fields and actions, while a casual user prefers a simplified interface. A tenant in a multi-tenant application might want to brand the UI or hide features they don't use."
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "Traditional approaches require either building multiple UIs or adding complex configuration logic throughout the codebase. OverlaySpecs provide a safer, more maintainable solution: users can customize their experience, but only within the bounds allowed by the underlying specs and policies."
-          }, undefined, false, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "What overlays can do"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("ul", {
+          }),
+          /* @__PURE__ */ jsxs("ul", {
             className: "text-muted-foreground list-inside list-disc space-y-2",
             children: [
-              /* @__PURE__ */ jsxDEV("li", {
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Hide or show fields"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Remove fields from forms or detail views (but only if the user has permission to see them in the first place)"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Reorder fields"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Change the order in which fields appear"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Rename labels"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Use different terminology that's more familiar to the user"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Change layouts"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Switch between list, grid, or card views"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Add help text"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Provide context-specific guidance"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Set default values"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Pre-fill forms with tenant-specific defaults"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Apply branding"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Customize colors, logos, and styling (within approved themes)"
                 ]
-              }, undefined, true, undefined, this)
+              })
             ]
-          }, undefined, true, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "Example OverlaySpec"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "Here's an overlay that customizes an order form:"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
+          }),
+          /* @__PURE__ */ jsx("div", {
             className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
-            children: /* @__PURE__ */ jsxDEV("pre", {
+            children: /* @__PURE__ */ jsx("pre", {
               children: `overlayId: acme-order-form
 version: '1.0.0'.0.0
 appliesTo:
@@ -165,244 +165,244 @@ signature:
   algorithm: EdDSA
   publicKey: "acme-corp-overlay-key"
   signature: "base64-encoded-signature"`
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
+            })
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "Safety guarantees"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "Overlays are powerful, but they must not compromise security or data integrity. ContractSpec enforces several guarantees:"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("ul", {
+          }),
+          /* @__PURE__ */ jsxs("ul", {
             className: "text-muted-foreground list-inside list-disc space-y-2",
             children: [
-              /* @__PURE__ */ jsxDEV("li", {
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Overlays cannot grant new permissions"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 They can only hide or rearrange what the user is already allowed to see"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Overlays cannot bypass validation"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Field types, constraints, and business rules from the underlying spec still apply"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Overlays must be signed"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Only authorized parties (typically tenant admins) can create overlays"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Overlays are versioned"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Changes to overlays are tracked and can be rolled back"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Overlays are audited"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Every overlay application is logged"
                 ]
-              }, undefined, true, undefined, this)
+              })
             ]
-          }, undefined, true, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "Creating overlays"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "Overlays can be created through:"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("ul", {
+          }),
+          /* @__PURE__ */ jsxs("ul", {
             className: "text-muted-foreground list-inside list-disc space-y-2",
             children: [
-              /* @__PURE__ */ jsxDEV("li", {
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Visual editor"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 A drag-and-drop interface for non-technical users"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "TypeScript/JSON"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 For developers who prefer code"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "API"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Programmatically create overlays for automation"
                 ]
-              }, undefined, true, undefined, this)
+              })
             ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "Once created, overlays must be signed using a private key. The corresponding public key is registered with ContractSpec, which verifies the signature before applying the overlay."
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsxs("p", {
             className: "text-muted-foreground",
             children: [
               "See",
               " ",
-              /* @__PURE__ */ jsxDEV(Link, {
+              /* @__PURE__ */ jsx(Link, {
                 href: "/docs/libraries/overlay-engine",
                 className: "text-violet-400 underline",
                 children: "Overlay Engine docs"
-              }, undefined, false, undefined, this),
+              }),
               " ",
               "and the",
               " ",
-              /* @__PURE__ */ jsxDEV(Link, {
+              /* @__PURE__ */ jsx(Link, {
                 href: "/docs/advanced/overlay-editor",
                 className: "text-violet-400 underline",
                 children: "Overlay Editor guide"
-              }, undefined, false, undefined, this),
+              }),
               " ",
               "for end-to-end workflows."
             ]
-          }, undefined, true, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "Overlay scope"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "Overlays can be scoped to:"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("ul", {
+          }),
+          /* @__PURE__ */ jsxs("ul", {
             className: "text-muted-foreground list-inside list-disc space-y-2",
             children: [
-              /* @__PURE__ */ jsxDEV("li", {
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Tenant"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 All users in a tenant see the same overlay"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "User"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Individual users can have personal overlays"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Role"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 All users with a specific role see the overlay"
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsxs("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("strong", {
+                  /* @__PURE__ */ jsx("strong", {
                     children: "Device"
-                  }, undefined, false, undefined, this),
+                  }),
                   " \u2013 Different overlays for mobile vs desktop"
                 ]
-              }, undefined, true, undefined, this)
+              })
             ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
+          }),
+          /* @__PURE__ */ jsx("p", {
             className: "text-muted-foreground",
             children: "If multiple overlays apply to the same user, they are merged in order of specificity (user overlays override role overlays, which override tenant overlays)."
-          }, undefined, false, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "space-y-4",
         children: [
-          /* @__PURE__ */ jsxDEV("h2", {
+          /* @__PURE__ */ jsx("h2", {
             className: "text-2xl font-bold",
             children: "Best practices"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("ul", {
+          }),
+          /* @__PURE__ */ jsxs("ul", {
             className: "text-muted-foreground list-inside list-disc space-y-2",
             children: [
-              /* @__PURE__ */ jsxDEV("li", {
+              /* @__PURE__ */ jsx("li", {
                 children: "Start with the default UI and only create overlays when users request specific changes."
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsx("li", {
                 children: "Document why each overlay modification was made\u2014this helps when reviewing or updating overlays."
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsx("li", {
                 children: "Test overlays thoroughly to ensure they don't break workflows or confuse users."
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsx("li", {
                 children: "Use tenant-level overlays for organizational customizations and user-level overlays for personal preferences."
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsx("li", {
                 children: "Regularly review overlays to remove ones that are no longer needed."
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
+              }),
+              /* @__PURE__ */ jsx("li", {
                 children: "Protect overlay signing keys carefully\u2014they control what customizations are allowed."
-              }, undefined, false, undefined, this)
+              })
             ]
-          }, undefined, true, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      }),
+      /* @__PURE__ */ jsxs("div", {
         className: "flex items-center gap-4 pt-4",
         children: [
-          /* @__PURE__ */ jsxDEV(Link, {
+          /* @__PURE__ */ jsx(Link, {
             href: "/docs/specs/policy",
             className: "btn-ghost",
             children: "Previous: Policy"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(Link, {
+          }),
+          /* @__PURE__ */ jsxs(Link, {
             href: "/docs/safety",
             className: "btn-primary",
             children: [
               "Next: Safety ",
-              /* @__PURE__ */ jsxDEV(ChevronRight, {
+              /* @__PURE__ */ jsx(ChevronRight, {
                 size: 16
-              }, undefined, false, undefined, this)
+              })
             ]
-          }, undefined, true, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 }
 export {
   SpecsOverlaysPage