Add Q as a UI component

[aditya-damerla128]

Summary

Closes #359.

Adds Q as a UI component backed by @mieweb/q, with a dedicated @mieweb/ui/q entry point so consumers can import Q directly from the UI package.

Changes

• Add Q component wrapper around @mieweb/q's AgentConfigGenerator.
• Add dedicated @mieweb/ui/q package export and tsup entry.
• Re-export the useful Q package surface from the Q entry point.
• Add Q presets:
  • full Twilio agent schema
  • agent-only schema that hides Twilio/telephony fields
• Add Storybook examples for the Q component and presets.
• Add a local type shim for @mieweb/q because the published package declares types but does not include the referenced .d.ts file.

Checks

• pnpm run typecheck
• pnpm run lint
• pnpm run test
• pnpm run build
• pnpm run format
• git diff --check -- package.json pnpm-lock.yaml tsup.config.ts src/q.ts src/components/Q/Q.tsx src/components/Q/Q.stories.tsx src/components/Q/index.ts src/components/Q/mieweb-q.d.ts src/components/Q/presets.ts
• pnpm run build-storybook

[Copilot]

Pull request overview

Adds a new first-class Q surface to @mieweb/ui by wrapping the @mieweb/q agent config generator and exposing it via a dedicated @mieweb/ui/q entry point, plus presets and Storybook examples.

Changes:

• Add Q wrapper component and presets (qAgentSchema, qTwilioAgentSchema, config factories).
• Add @mieweb/ui/q export surface + tsup entry for a dedicated bundle boundary.
• Add a local TypeScript shim for @mieweb/q and wire in the @mieweb/q dependency.

Reviewed changes

Copilot reviewed 7 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tsup.config.ts	Adds q and components/Q build entries; externalizes @mieweb/q.
src/q.ts	New @mieweb/ui/q entry re-exporting Q surface.
src/components/Q/Q.tsx	Adds Q wrapper around @mieweb/q’s AgentConfigGenerator.
src/components/Q/Q.stories.tsx	Adds Storybook examples for Q and presets.
src/components/Q/presets.ts	Adds Twilio + agent-only preset schemas and default configs.
src/components/Q/mieweb-q.d.ts	Adds local TS module declarations for @mieweb/q (+ /universal and css).
src/components/Q/index.ts	Defines the public re-export surface for @mieweb/ui/q.
package.json	Adds ./q export and introduces @mieweb/q as peer/dev dependency.
pnpm-lock.yaml	Locks @mieweb/q@1.0.0 and its dependency tree.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

Copilot reviewed 7 out of 9 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Suppressed comments (1)

pnpm-lock.yaml:7077

• @mieweb/q pulls in @mieweb/ui@0.2.4 plus lucide-react@0.344.0, whose peer range is react: ^16.5.1 || ^17 || ^18 (but this repo is on React 19). This can lead to peer-dependency warnings/failures in consumer installs (especially with strict peer deps) and potentially duplicate UI copies at runtime.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 9 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Suppressed comments (3)

pnpm-lock.yaml:7073

• The lockfile shows @mieweb/q@1.0.0 depends on @mieweb/ui@0.2.4. Adding @mieweb/ui/q may therefore pull a second, older copy of @mieweb/ui into consumer installs (in addition to the consumer’s top-level @mieweb/ui), which can lead to duplicated code/CSS and inconsistent component behavior. It would be safer if @mieweb/q treated @mieweb/ui as a peer dependency instead of a hard dependency (or if @mieweb/q were updated to a version that does).
  src/q.ts:1
• The new optional entry point src/q.ts is missing the usage docblock pattern that the other optional entry points (ag-grid/esheet/kerebron) include. Without it, consumers won't know they need to install the optional peer dependency and likely also need to include @mieweb/q’s stylesheet for correct rendering.

export * from './components/Q';

pnpm-lock.yaml:4352

• @mieweb/q@1.0.0 pulls in lucide-react@0.344.0, which only declares React peer support up to React 18. Since this package supports React 19, React 19 consumers may see peer-dependency warnings or strict-install failures when adding @mieweb/q. Consider updating @mieweb/q to a build that depends on a React 19-compatible lucide-react (or otherwise aligning that dependency).

[Copilot]

Pull request overview

Copilot reviewed 7 out of 9 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Suppressed comments (2)

pnpm-lock.yaml:7172

• The resolved @mieweb/q@1.0.0 dependency graph includes a direct dependency on @mieweb/ui@0.2.4. In consumer projects that install @mieweb/ui (this package) plus @mieweb/q to use @mieweb/ui/q, this can result in two copies of @mieweb/ui being installed/bundled, which risks duplicated styling/theme/context and increases bundle size.

If possible, prefer a @mieweb/q version that has @mieweb/ui as a peer dependency (or coordinate an upstream change) to avoid shipping a nested UI copy.
pnpm-lock.yaml:4400

• @mieweb/q pulls in lucide-react@0.344.0, whose peer dependency range does not include React 19 (react: ^16.5.1 || ^17.0.0 || ^18.0.0). This will produce peer-dependency warnings (and can be install-blocking in repos that treat peer mismatches as errors) for consumers adopting the new Q entry point.

Consider updating to a @mieweb/q release that depends on a lucide-react version that supports React 19 (or getting @mieweb/q updated upstream).

[garrity-miepub]

I would look at the colors used for the section headers. Right now its a solid blue that doesnt look like it is handled by the themes. I would recommend using something like the neutral gray 300 for the bg and the neutral gray 900 for the text.

And then make sure it supports dark mode too.

I would try to get it closer to something like this:

[aditya-damerla128]

Updated Q section headers to neutral gray (neutral-300 / neutral-900) and added dark-mode equivalents (neutral-700 / neutral-300). Also scoped Q form, active-tab, and Reset colors for dark mode, added a DarkMode Storybook story, and verified all five Q a11y stories pass.