gbs-add-block 2.1.0 → 2.3.0

package/source/beta-components/tooltip/passport.json

@@ -0,0 +1,170 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Tooltip",
+    "folder": "tooltip",
+    "exports": [
+      "Tooltip"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.3.0",
+    "files": [
+      "core/index.ts",
+      "core/types.ts",
+      "core/visibility.ts",
+      "index.ts",
+      "react/Tooltip.tsx",
+      "react/props.ts"
+    ],
+    "sourceHash": "sha256:8e0de012f56b518fd5c68d2ee98a73f4d1435cb9d61e59f277cc377d609dd17f"
+  },
+  "props": [
+    {
+      "name": "align",
+      "type": "enum",
+      "values": [
+        "center",
+        "end",
+        "start"
+      ],
+      "typeText": "TooltipAlign | undefined",
+      "required": false,
+      "default": "center",
+      "origin": "derived",
+      "description": "Default `center`, which is only meaningful with `side` top or bottom.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "children",
+      "type": "other",
+      "typeText": "ReactElement<{ [attribute: string]: unknown; }, string | import(\"react\").JSXElementConstructor<any>>",
+      "required": true,
+      "origin": "derived",
+      "description": "The control it describes: a single element, cloned with a ref, the pointer\r\nand focus handlers, and `aria-describedby`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<TooltipSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "closeDelay",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 120,
+      "origin": "derived",
+      "description": "Wait before hiding, in ms. Default 120, so crossing a gap does not flicker.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "content",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": true,
+      "origin": "derived",
+      "description": "The short label. Keep it to a few words.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "delay",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 400,
+      "origin": "derived",
+      "description": "Wait before showing on hover, in ms. Default 400. Focus never waits.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived"
+    },
+    {
+      "name": "gap",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 6,
+      "origin": "derived",
+      "description": "Distance from the control. Default 6.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "side",
+      "type": "enum",
+      "values": [
+        "bottom",
+        "left",
+        "right",
+        "top"
+      ],
+      "typeText": "TooltipSide | undefined",
+      "required": false,
+      "default": "top",
+      "origin": "derived",
+      "description": "Default `top`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "style",
+      "type": "other",
+      "typeText": "CSSProperties | undefined",
+      "required": false,
+      "origin": "derived"
+    }
+  ],
+  "events": [],
+  "slots": [
+    "root",
+    "content"
+  ],
+  "states": [
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [],
+    "required": []
+  },
+  "composition": {},
+  "operations": {},
+  "intentDomains": [],
+  "safeMutations": {},
+  "examples": [],
+  "coverage": {
+    "propsTotal": 12,
+    "propsDescribed": 7,
+    "describedPct": 58,
+    "authoredSections": [
+      "accessibility"
+    ]
+  }
+}

package/source/beta-components/tooltip/styles.css

@@ -1,73 +1,71 @@
-/*
- * Tooltip styles.
- *
- * Tokens read the shared --gbs-* variables when they are set on an ancestor
- * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `gbs` layer. Declare
- * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
- * utilities;` — and anything in a later layer, Tailwind utilities included,
- * overrides them.
- */
-
-@layer gbs {
-  .tt-root {
-    /* Inverted against the page, the way a tooltip is expected to read. */
-    --tt-bg: var(--gbs-tooltip-bg, light-dark(#18181b, #f4f4f5));
-    --tt-fg: var(--gbs-tooltip-fg, light-dark(#fafafa, #18181b));
-    --tt-radius: var(--gbs-radius, var(--dg-radius, 8px));
-    --tt-font-size: calc(var(--gbs-font-size, var(--dg-font-size, 13px)) - 1px);
-    --tt-max-width: 240px;
-    --tt-duration: 120ms;
-
-    position: fixed;
-    inset: auto;
-    z-index: 70;
-    width: max-content;
-    max-width: min(var(--tt-max-width), calc(100vw - 16px));
-    margin: 0;
-    padding: 0;
-    border: 0;
-    border-radius: var(--tt-radius);
-    background: var(--tt-bg);
-    color: var(--tt-fg);
-    color-scheme: inherit;
-    font-size: var(--tt-font-size);
-    line-height: 1.4;
-    /* It follows the pointer's business, never takes it. */
-    pointer-events: none;
-  }
-
-  :where(.dark, [data-theme="dark"]) .tt-root {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) .tt-root {
-    color-scheme: light;
-  }
-
-  .tt-root:popover-open {
-    animation: tt-in var(--tt-duration) ease;
-  }
-  @keyframes tt-in {
-    from {
-      opacity: 0;
-      scale: 0.97;
-    }
-  }
-
-  .tt-content {
-    padding: 5px 8px;
-    text-wrap: pretty;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .tt-root:popover-open {
-      animation: none;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .tt-root {
-      border: 1px solid CanvasText;
-    }
-  }
-}
+/*
+ * Tooltip styles.
+ *
+ * Tokens read the shared --gbs-* variables when they are set on an ancestor
+ * (set them on :root to theme every component at once) and fall back to the
+ * same default palette otherwise. Rules are unlayered: they beat a framework
+ * reset on specificity, and lose to anything you pass through `className`.
+ * With Tailwind v4, import this file after the framework and inside its
+ * components layer - see the README.
+ */
+
+.tt-root {
+  /* Inverted against the page, the way a tooltip is expected to read. */
+  --tt-bg: var(--gbs-tooltip-bg, light-dark(#18181b, #f4f4f5));
+  --tt-fg: var(--gbs-tooltip-fg, light-dark(#fafafa, #18181b));
+  --tt-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --tt-font-size: calc(var(--gbs-font-size, var(--dg-font-size, 13px)) - 1px);
+  --tt-max-width: 240px;
+  --tt-duration: 120ms;
+
+  position: fixed;
+  inset: auto;
+  z-index: 70;
+  width: max-content;
+  max-width: min(var(--tt-max-width), calc(100vw - 16px));
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--tt-radius);
+  background: var(--tt-bg);
+  color: var(--tt-fg);
+  color-scheme: inherit;
+  font-size: var(--tt-font-size);
+  line-height: 1.4;
+  /* It follows the pointer's business, never takes it. */
+  pointer-events: none;
+}
+
+:where(.dark, [data-theme="dark"]) .tt-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .tt-root {
+  color-scheme: light;
+}
+
+.tt-root:popover-open {
+  animation: tt-in var(--tt-duration) ease;
+}
+@keyframes tt-in {
+  from {
+    opacity: 0;
+    scale: 0.97;
+  }
+}
+
+.tt-content {
+  padding: 5px 8px;
+  text-wrap: pretty;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tt-root:popover-open {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .tt-root {
+    border: 1px solid CanvasText;
+  }
+}

package/tools/env.cjs

@@ -0,0 +1,61 @@
+/*
+ * Reads `.env` at the repository root, so a key can live in a file instead of
+ * being re-exported into every new shell.
+ *
+ * Written rather than installed for the same reason as everything else here:
+ * this is twenty lines, and `dotenv` would be a dependency the published
+ * package has to carry for a dev-only tool.
+ *
+ * A real environment variable always wins. That ordering matters — CI sets
+ * secrets in the environment, and a stale `.env` on someone's laptop silently
+ * overriding them would be a genuinely confusing afternoon.
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+/** Parses the `KEY=value` subset: comments, blank lines, optional quotes. */
+function parse(text) {
+  const out = {};
+  for (const line of text.split(/\r?\n/)) {
+    const trimmed = line.trim();
+    if (trimmed === "" || trimmed.startsWith("#")) continue;
+
+    const equals = trimmed.indexOf("=");
+    if (equals === -1) continue;
+
+    const key = trimmed.slice(0, equals).trim().replace(/^export\s+/, "");
+    let value = trimmed.slice(equals + 1).trim();
+
+    if (
+      (value.startsWith('"') && value.endsWith('"') && value.length > 1) ||
+      (value.startsWith("'") && value.endsWith("'") && value.length > 1)
+    ) {
+      value = value.slice(1, -1);
+    }
+    if (key) out[key] = value;
+  }
+  return out;
+}
+
+/**
+ * Fills in anything the environment does not already define.
+ *
+ * @returns the names loaded — never the values, which should not be logged.
+ */
+function load(root = process.cwd()) {
+  const file = path.join(root, ".env");
+  if (!fs.existsSync(file)) return [];
+
+  const loaded = [];
+  for (const [key, value] of Object.entries(parse(fs.readFileSync(file, "utf8")))) {
+    if (process.env[key] !== undefined) continue;
+    process.env[key] = value;
+    // A blank line in `.env.example` that nobody filled in is not a key, and
+    // reporting it as one implies a credential that is not there.
+    if (value !== "") loaded.push(key);
+  }
+  return loaded;
+}
+
+module.exports = { load, parse };

package/tools/passport/cli.cjs

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+/*
+ * Passport CLI used inside this repository.
+ *
+ *   node tools/passport/cli.cjs            generate / refresh passport.json
+ *   node tools/passport/cli.cjs --check    CI gate; writes nothing, exits 1 on drift
+ *
+ * The consumer-facing entry point is `gbs-add-block --passport`, which calls the
+ * same functions against the copied component-lib folder.
+ */
+
+const path = require("path");
+const fs = require("fs");
+const { generate, check } = require("./index.cjs");
+
+const REPO = path.resolve(__dirname, "..", "..");
+const LIB = path.join(REPO, "source", "beta-components");
+const COVERAGE_THRESHOLD = 40; // ratchet upward over time
+
+const args = process.argv.slice(2);
+const wantCheck = args.includes("--check");
+const quiet = args.includes("--quiet");
+const libraryVersion = JSON.parse(fs.readFileSync(path.join(REPO, "package.json"), "utf8")).version;
+
+const opts = {
+  libRoot: LIB,
+  repoRoot: REPO,
+  libraryVersion,
+  includeLocal: false,
+  coverageThreshold: COVERAGE_THRESHOLD,
+};
+
+function main() {
+  if (wantCheck) {
+    const { report, errors, warnings } = check(opts);
+    for (const row of report) {
+      if (row.ok && row.problems.length === 0) {
+        if (!quiet) console.log(`  ${row.component}: OK`);
+        continue;
+      }
+      for (const p of row.problems) {
+        const mark = p.level === "error" ? "✗" : "!";
+        console.log(`  ${mark} ${p.component}: ${p.message}`);
+      }
+    }
+    console.log(
+      `\n${report.length} components · ${errors} error(s) · ${warnings} warning(s)`,
+    );
+    if (errors > 0) {
+      console.error("\nPassports are out of date. Run `npm run passport` and commit the result.");
+      process.exit(1);
+    }
+    return;
+  }
+
+  const { results, written } = generate(opts);
+  const errors = results.flatMap((r) => r.issues.filter((i) => i.level === "error"));
+  const warns = results.flatMap((r) => r.issues.filter((i) => i.level === "warn"));
+
+  for (const e of errors) console.error(`  ✗ ${e.component}: ${e.message}`);
+  if (!quiet) for (const w of warns) console.log(`  ! ${w.component}: ${w.message}`);
+
+  console.log(
+    `\n${results.length} passports generated · ${written.length} file(s) changed · ` +
+      `${errors.length} error(s) · ${warns.length} warning(s)`,
+  );
+  if (written.length && !quiet) for (const f of written) console.log(`    ${f}`);
+  if (errors.length > 0) process.exit(1);
+}
+
+try {
+  main();
+} catch (error) {
+  if (error.code === "ETYPESCRIPT_MISSING" || error.code === "EBADJSON") {
+    console.error(error.message);
+    process.exit(1);
+  }
+  throw error;
+}