{"_id":"@ariada-org/scan-flow-ui","name":"@ariada-org/scan-flow-ui","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@ariada-org/scan-flow-ui","version":"0.1.1","description":"Brand-themed React components shared by ariada-web and draculascan: URLInput, ScanProgress, Scorecard, ShareButtons, CrossSellCTAs.","license":"EUPL-1.2","publishConfig":{"access":"public"},"type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.js"},"./fixtures/sample-events":{"types":"./dist/fixtures/sample-events.d.ts","import":"./dist/fixtures/sample-events.js"}},"dependencies":{"@ariada-org/core":"0.1.1"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@playwright/test":"^1.60.0","@testing-library/react":"^16.1.0","@types/node":"^22.10.2","@types/react":"^19.0.2","@types/react-dom":"^19.0.2","esbuild":"^0.27.0","happy-dom":"^20.9.0","react":"^19.0.0","react-dom":"^19.0.0","rimraf":"^6.0.1","typescript":"^5.7.2","vitest":"^4.1.0"},"engines":{"node":">=22"},"repository":{"type":"git","url":"git+https://github.com/ariada-org/ariada.git","directory":"packages/scan-flow-ui"},"scripts":{"build":"tsc -p tsconfig.json","typecheck":"tsc -p tsconfig.json --noEmit","lint":"eslint src","test":"vitest run","test:e2e":"playwright test","test:e2e:ui":"playwright test --ui","test:e2e:update":"playwright test --update-snapshots","clean":"rimraf dist coverage playwright-report test-results"},"_id":"@ariada-org/scan-flow-ui@0.1.1","bugs":{"url":"https://github.com/ariada-org/ariada/issues"},"homepage":"https://github.com/ariada-org/ariada#readme","_integrity":"sha512-fKh7bPF0a5TyP7KGrDNnWjRnPOFPTwCHxA+Kthd5oP6LBW1WokFkFVQuMWO03xFHXqPpaIShWR35GPYlpCWcQA==","_resolved":"/private/var/folders/2c/_42xj0l179z8yc7wmp5k91s00000gn/T/559348ded402fefa5ab9c946559a404b/ariada-org-scan-flow-ui-0.1.1.tgz","_from":"file:ariada-org-scan-flow-ui-0.1.1.tgz","_nodeVersion":"26.5.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-fKh7bPF0a5TyP7KGrDNnWjRnPOFPTwCHxA+Kthd5oP6LBW1WokFkFVQuMWO03xFHXqPpaIShWR35GPYlpCWcQA==","shasum":"d2ed9fea8ac9ff892266ac1cfe7d478cc29d2f7d","tarball":"https://registry.npmjs.org/@ariada-org/scan-flow-ui/-/scan-flow-ui-0.1.1.tgz","fileCount":50,"unpackedSize":115585,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHrJ2iZ000qY/Z09zYLyKZ9f1UbE0BQ9YUuonBTVODRJAiBJ6jVZ8l3gA8zVOiIn7Ec2MFarIyZSdNh6G95pCtb7MA=="}]},"_npmUser":{"name":"agonist","email":"ab@agonist.ai"},"directories":{},"maintainers":[{"name":"agonist","email":"ab@agonist.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/scan-flow-ui_0.1.1_1784942576751_0.6162324412100855"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-25T01:22:56.632Z","0.1.1":"2026-07-25T01:22:56.948Z","modified":"2026-07-25T01:22:57.112Z"},"maintainers":[{"name":"agonist","email":"ab@agonist.ai"}],"description":"Brand-themed React components shared by ariada-web and draculascan: URLInput, ScanProgress, Scorecard, ShareButtons, CrossSellCTAs.","homepage":"https://github.com/ariada-org/ariada#readme","repository":{"type":"git","url":"git+https://github.com/ariada-org/ariada.git","directory":"packages/scan-flow-ui"},"bugs":{"url":"https://github.com/ariada-org/ariada/issues"},"license":"EUPL-1.2","readme":"# @ariada-org/scan-flow-ui\n\nBrand-themed React components shared by `ariada-web` and `draculascan`. The\n**base** UI layer of the scan flow — not the character-themed Dracula layer\n(that lives in [`@ariada-org/dracula-agent`](../dracula-agent)).\n\n| Field           | Value                                                  |\n| --------------- | ------------------------------------------------------ |\n| Package name    | `@ariada-org/scan-flow-ui`                                 |\n| Version         | 0.1.0                                                  |\n| Licence         | EUPL-1.2 (European Union Public Licence)               |\n| Runtime         | React `^19` (peer dep)                                 |\n| Theming         | CSS custom properties — no hex literals in JS          |\n| REUSE-compliant | yes — `REUSE.toml` + per-file SPDX headers             |\n\n## Components\n\n| Component       | Purpose                                                                  |\n| --------------- | ------------------------------------------------------------------------ |\n| `URLInput`      | Public scan form; accessible labels + alert region                       |\n| `ScanProgress`  | SSE consumer, debounced live region, optional `characterSlot`            |\n| `Scorecard`     | Score + triple-encoded severity badges + finding table; `depth` prop     |\n| `ShareButtons`  | Twitter / LinkedIn / Bluesky / copy / embed                              |\n| `CrossSellCTAs` | Branded link list with click callback for attribution                    |\n| `EmbedBadge`    | Small badge preview — live Web Component lives in `@ariada-org/embed-badge`  |\n\n## Theme contract\n\nThe components consume CSS custom properties from `<html>` only. They never\nimport brand hex literals so a single bundle can serve both brands.\n\n```ts\nimport {\n  applyTheme,\n  ARIADA_THEME,\n  DRACULA_THEME,\n} from '@ariada-org/scan-flow-ui';\n\napplyTheme(ARIADA_THEME);  // ariada-web\napplyTheme(DRACULA_THEME); // draculascan\n```\n\nCustom-property surface (see `src/theme.ts` for the full list):\n\n- `--brand-primary`, `--brand-accent`, `--brand-tone`\n- `--font-display`, `--font-body`\n- `--border-radius`\n- `--severity-critical`, `--severity-serious`, `--severity-moderate`, `--severity-minor`\n- `--icon-variant`\n\nThese tokens are sourced from [`@ariada-org/brand-tokens`](../ariada-brand-tokens)\nin production sites; the package contains the default fallback values inline\nso the components stay usable when consumed standalone.\n\n## Usage\n\n```tsx\nimport {\n  URLInput,\n  ScanProgress,\n  Scorecard,\n  ShareButtons,\n  CrossSellCTAs,\n  applyTheme,\n  ARIADA_THEME,\n} from '@ariada-org/scan-flow-ui';\n\n// Once, at app startup:\napplyTheme(ARIADA_THEME);\n\n// In a page:\nfunction ScanPage() {\n  return (\n    <>\n      <URLInput onSubmit={(url) => beginScan(url)} />\n      <ScanProgress events={sseEvents} />\n      <Scorecard report={report} depth=\"summary\" />\n      <ShareButtons url={shareUrl} score={report.score} />\n      <CrossSellCTAs onCtaClick={(id) => track(id)} />\n    </>\n  );\n}\n```\n\n## Accessibility\n\nEvery component is built constraints-first:\n\n- semantic markup (form `<label>`s, `<button>` not `<div role=\"button\">`);\n- focus-visible states, ≥ 3px focus ring;\n- triple-encoded severity (icon + colour + text), never colour alone;\n- live regions debounced (200 ms) to avoid screen-reader chatter.\n\n## Testing\n\nTests run with vitest + happy-dom + `@testing-library/react`:\n\n```bash\npnpm --filter @ariada-org/scan-flow-ui test\n```\n\nSmoke tests cover the four primary components (`URLInput`, `Scorecard`,\n`ScanProgress`, `ShareButtons`). Coverage will grow as the public surface\nstabilises.\n\n## Layout\n\n```\nsrc/\n  index.ts              — public exports\n  theme.ts              — applyTheme + theme constants\n  URLInput.tsx          — scan-input form\n  ScanProgress.tsx      — SSE consumer + characterSlot\n  Scorecard.tsx         — score + finding table\n  ShareButtons.tsx      — share targets\n  CrossSellCTAs.tsx     — branded CTAs\n  EmbedBadge.tsx        — badge preview\n  types.ts              — shared types\n  fixtures/sample-events.ts — synthetic ScanEvents for tests\n  __tests__/            — vitest + happy-dom + RTL\n```\n\n## Licence\n\nEUPL-1.2 — see `LICENSE`. Per-file SPDX headers + `REUSE.toml` keep\nmachine-readable metadata in sync.\n\n## Security\n\nVulnerability reports → `https://github.com/ariada-org/ariada/security/advisories/new`\nor `security@ariada.org`. See `SECURITY.md`.\n","readmeFilename":"README.md","_rev":"1-d631e96df2a29b50fc2bc8af8f0c531a"}