{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scope-picker-demo",
  "title": "Scope Picker Example",
  "author": "MR <contact@bimframe.co>",
  "description": "A full page rendering Scope Picker, with its own sample data — what \"Open in v0\" hands over, and what to copy when wiring the component into a real screen.",
  "registryDependencies": [
    "@cantera/aps-oauth-preset",
    "@cantera/scope-picker"
  ],
  "files": [
    {
      "path": "registry/examples/scope-picker-demo.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { ScopePicker, withRequiredScopes } from '@/components/ui/scope-picker'\nimport { apsScopeCatalog, apsScopePresets } from '@/lib/aps-oauth-preset'\n\nexport function ScopePickerDemo() {\n  const [value, setValue] = useState<string[]>(['data:read', 'viewables:read'])\n  // What actually goes on the wire: the selection, plus whatever the catalog\n  // marks required. The picker never backfills required scopes into `value`.\n  const scope = withRequiredScopes(apsScopeCatalog, value)\n\n  return (\n    <div className=\"flex w-full flex-col gap-4\">\n      <ScopePicker\n        scopes={apsScopeCatalog}\n        presets={apsScopePresets}\n        value={value}\n        onChange={setValue}\n        allowCustomScopes\n      />\n      <p className=\"border-border border-t pt-3 font-mono text-muted-foreground text-xs\">\n        scope={scope.length > 0 ? scope.join(' ') : '(none)'}\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/examples/scope-picker-demo.tsx"
    },
    {
      "path": "registry/examples/pages/scope-picker-demo-page.tsx",
      "content": "// Generated by scripts/build-examples.mts. Edit the demo, not this file.\nimport { ScopePickerDemo } from '@/components/examples/scope-picker-demo'\n\nexport default function Page() {\n  return (\n    <main className=\"flex min-h-svh items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-lg\">\n        <ScopePickerDemo />\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/examples/scope-picker/page.tsx"
    }
  ],
  "categories": [
    "authentication",
    "permissions",
    "forms"
  ],
  "type": "registry:example"
}