@voltro/ui-shadcn 0.68.0 → 0.69.1

package/dist/signal.css

@@ -261,3 +261,66 @@
 .signal-marketing-close::before { background: radial-gradient(ellipse at 20% 30%, #7c3aed29, transparent 65%); }
 .signal-marketing-close .group { background: linear-gradient(115deg, #6d28d9, #7c3aed 48%, #8a49ed); color: #fff; border-radius: 4px; box-shadow: 0 5px 20px -9px #7c3aed66; }
 @media(max-width:760px) { .signal-marketing-close { padding: 40px 24px; } }
+
+/* Shared operating workspace: Cloud and local dashboards use the same shell. */
+.signal-workspace { position: relative; isolation: isolate; }
+.signal-workspace .signal-workspace-field { height: 600px; bottom: auto; opacity: .65; mask-image: linear-gradient(#000, #000 35%, transparent); }
+.signal-workspace-field .field-contours { top: -220px; opacity: .6; }
+.signal-workspace-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
+.signal-workspace-heading { min-width: 0; }
+.signal-workspace-title { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
+.signal-workspace-title h1 { font-size: 3rem; line-height: 1.12; font-weight: 650; letter-spacing: -.035em; overflow-wrap: anywhere; }
+.signal-workspace-description { max-width: 70ch; margin-top: 16px; color: var(--muted-foreground); font-size: 16px; line-height: 1.65; }
+.signal-workspace-description code { color: var(--foreground); font-size: .875em; }
+.signal-workspace-action { flex-shrink: 0; }
+.signal-workspace [data-slot="card"] { border-radius: 6px; box-shadow: none; }
+.signal-workspace [data-slot="button"] { box-shadow: none; border-radius: 4px; }
+.signal-workspace [data-slot="button"].bg-primary { background: var(--signal-violet) linear-gradient(115deg, #6d28d9, #7c3aed 48%, #8a49ed); }
+.signal-workspace-page { padding-block: 40px 80px; }
+@media (max-width: 760px) {
+  .signal-workspace-page { padding-block: 28px 48px; }
+  .signal-workspace-header { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 30px; }
+  .signal-workspace-title h1 { font-size: 2.25rem; }
+  .signal-workspace-description { font-size: 14px; margin-top: 12px; }
+}
+
+.signal-workspace-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 24px; min-height: 116px; padding: 24px 4px; border-bottom: 1px solid var(--border); transition: background-color 180ms, border-color 180ms; }
+.signal-workspace-item:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); border-bottom-color: var(--signal-line); }
+.signal-workspace-item-icon { width: 44px; height: 44px; border: 1px solid var(--signal-line); border-radius: 6px; display: grid; place-items: center; color: var(--signal-accent-ink); background: var(--background); }
+.signal-workspace-item-icon svg { width: 20px; height: 20px; }
+.signal-workspace-item-copy { display: grid; gap: 8px; min-width: 0; }
+.signal-workspace-item-title { font-size: 20px; line-height: 1.3; font-weight: 550; letter-spacing: -.02em; overflow-wrap: anywhere; }
+.signal-workspace-item-description { font-size: 13px; color: var(--muted-foreground); overflow-wrap: anywhere; line-height: 1.6; }
+.signal-workspace-item-detail { display: flex; align-items: center; gap: 20px; color: var(--muted-foreground); font-size: 12px; }
+.signal-workspace-item-open { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 44px; margin-left: 24px; font-size: 13px; color: var(--signal-accent-ink); }
+.signal-workspace-item-open svg { height: 18px; width: 18px; transition: transform 180ms var(--signal-ease); }
+.signal-workspace-item:hover .signal-workspace-item-open svg { transform: translateX(4px); }
+.signal-workspace-item { width: 100%; text-align: left; cursor: pointer; }
+@media (max-width: 1000px) { .signal-workspace-item-detail { flex-direction: column; align-items: flex-start; gap: 8px; } }
+@media (max-width: 760px) {
+  .signal-workspace-item { grid-template-columns: 36px minmax(0, 1fr) 24px; gap: 12px; padding-block: 20px; }
+  .signal-workspace-item-icon { width: 36px; height: 36px; align-self: start; }
+  .signal-workspace-item-title { font-size: 18px; }
+  .signal-workspace-item-detail { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
+  .signal-workspace-item-open { grid-column: 3; grid-row: 1 / span 2; margin-left: 0; }
+  .signal-workspace-item-open > span { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .signal-workspace-item, .signal-workspace-item-open svg { transition: none; }
+  .signal-workspace-item:hover .signal-workspace-item-open svg { transform: none; }
+}
+
+.signal-workspace-tabs { display: flex; gap: 28px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
+.signal-workspace-tabs > :is(a, span) { flex-shrink: 0; display: inline-flex; min-height: 48px; align-items: center; padding: 0 1px; border-bottom: 2px solid transparent; color: var(--muted-foreground); font-size: 14px; }
+.signal-workspace-tabs > [aria-current="page"] { color: var(--foreground); border-bottom-color: var(--signal-light); background: transparent; }
+.signal-workspace-tabs > a:not([aria-current="page"]):hover { color: var(--foreground); border-bottom-color: var(--signal-line); }
+
+/* Operating chrome keeps navigation close to the task surface. */
+.signal-workspace-compact { --signal-header-height: 88px; }
+.signal-workspace-compact .signal-workspace-page { padding-top: 8px; }
+.signal-workspace-compact .signal-workspace-tabs { margin-bottom: 16px; }
+@media (max-width: 760px) {
+  .signal-workspace-compact { --signal-header-height: 138px; }
+  .signal-workspace-compact .signal-header { padding-block: 12px; gap: 12px; }
+  .signal-workspace-compact .signal-workspace-tabs { gap: 24px; margin-bottom: 12px; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voltro/ui-shadcn",
-  "version": "0.68.0",
+  "version": "0.69.1",
   "description": "Voltro's first-party shadcn/ui kit: Tailwind v4 design tokens (light + dark), 30+ primitives, layout compositions, styled widgets for the @voltro/ui seam, and the canonical theme/language preference-cookie helpers.",
   "keywords": [
     "voltro",
@@ -52,7 +52,7 @@
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@shikijs/langs": "^4.4.3",
     "@shikijs/themes": "^4.4.3",
-    "@voltro/ui": "0.68.0",
+    "@voltro/ui": "0.69.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "shiki": "^4.4.3",

package/src/compositions/signalWorkspace.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react'
+import { cn } from '../cn'
+import { AppShell } from './appShell'
+import { SignalField } from './signalField'
+import { PackageIcon } from '../primitives/docIcons'
+
+export interface SignalWorkspaceProps {
+  readonly brand: ReactNode
+  readonly header: ReactNode
+  readonly children: ReactNode
+  readonly className?: string
+  /** Signed-out pages can supply their own full-height, animated field. */
+  readonly field?: boolean
+}
+
+/** Shared Cloud/local operating shell. Import `@voltro/ui-shadcn/signal.css`. */
+export function SignalWorkspace({ brand, header, children, className, field = true }: SignalWorkspaceProps): ReactNode {
+  return <AppShell brand={brand} header={header} className={cn('signal-operate signal-stage signal-workspace', className)}>
+    {field && <SignalField className="signal-workspace-field" />}
+    {children}
+  </AppShell>
+}
+
+export interface SignalWorkspaceHeaderProps {
+  readonly title: ReactNode
+  readonly description?: ReactNode
+  readonly badge?: ReactNode
+  readonly action?: ReactNode
+}
+
+/** One heading, description and action rhythm for workspace pages in either host. */
+export function SignalWorkspaceHeader({ title, description, badge, action }: SignalWorkspaceHeaderProps): ReactNode {
+  return <div className="signal-workspace-header">
+    <div className="signal-workspace-heading">
+      <div className="signal-workspace-title"><h1>{title}</h1>{badge}</div>
+      {description && <p className="signal-workspace-description">{description}</p>}
+    </div>
+    {action && <div className="signal-workspace-action">{action}</div>}
+  </div>
+}
+
+export interface SignalWorkspaceItemProps {
+  readonly title: string
+  readonly description: ReactNode
+  readonly detail?: ReactNode
+  readonly actionLabel: string
+  readonly renderLink: (className: string, children: ReactNode) => ReactNode
+}
+
+/** Open workspace row; the host supplies its typed link or selection button. */
+export function SignalWorkspaceItem({ title, description, detail, actionLabel, renderLink }: SignalWorkspaceItemProps): ReactNode {
+  return renderLink('signal-workspace-item', <>
+    <span className="signal-workspace-item-icon" aria-hidden="true"><PackageIcon /></span>
+    <span className="signal-workspace-item-copy">
+      <span className="signal-workspace-item-title">{title}</span>
+      <span className="signal-workspace-item-description">{description}</span>
+    </span>
+    <span className="signal-workspace-item-detail">{detail}</span>
+    <span className="signal-workspace-item-open"><span>{actionLabel}</span>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M4 12h16m-6-6 6 6-6 6" /></svg>
+    </span>
+  </>)
+}

package/src/index.ts

@@ -160,5 +160,6 @@ export { SearchModal, SearchTrigger } from './primitives/searchModal'
 export type { SearchModalProps, SearchModalLabels } from './primitives/searchModal'
 
 export { SignalField, type SignalFieldProps } from './compositions/signalField'
+export { SignalWorkspace, SignalWorkspaceHeader, SignalWorkspaceItem, type SignalWorkspaceProps, type SignalWorkspaceHeaderProps, type SignalWorkspaceItemProps } from './compositions/signalWorkspace'
 export { SignalPreferences, SignalSearch, SignalHeaderAction, type SignalPreferencesProps, type SignalSearchProps } from './compositions/signalControls'
 export { SignalHeader, type SignalHeaderProps, type SignalNavigationLink } from './compositions/signalHeader'

package/src/primitives/checkbox.tsx

@@ -26,8 +26,8 @@ export const Checkbox = ({ className, indeterminate, ...props }: CheckboxProps):
         className={cn(
           'peer size-4 appearance-none rounded-[4px] border shadow-xs outline-none',
           'border-input bg-transparent dark:bg-input/30',
-          'checked:bg-primary checked:border-primary',
-          'indeterminate:bg-primary indeterminate:border-primary',
+          'checked:bg-primary checked:border-primary dark:checked:bg-primary',
+          'indeterminate:bg-primary indeterminate:border-primary dark:indeterminate:bg-primary',
           'transition-[color,box-shadow]',
           'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
           'disabled:cursor-not-allowed disabled:opacity-50',

package/src/signal.css

@@ -261,3 +261,66 @@
 .signal-marketing-close::before { background: radial-gradient(ellipse at 20% 30%, #7c3aed29, transparent 65%); }
 .signal-marketing-close .group { background: linear-gradient(115deg, #6d28d9, #7c3aed 48%, #8a49ed); color: #fff; border-radius: 4px; box-shadow: 0 5px 20px -9px #7c3aed66; }
 @media(max-width:760px) { .signal-marketing-close { padding: 40px 24px; } }
+
+/* Shared operating workspace: Cloud and local dashboards use the same shell. */
+.signal-workspace { position: relative; isolation: isolate; }
+.signal-workspace .signal-workspace-field { height: 600px; bottom: auto; opacity: .65; mask-image: linear-gradient(#000, #000 35%, transparent); }
+.signal-workspace-field .field-contours { top: -220px; opacity: .6; }
+.signal-workspace-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
+.signal-workspace-heading { min-width: 0; }
+.signal-workspace-title { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
+.signal-workspace-title h1 { font-size: 3rem; line-height: 1.12; font-weight: 650; letter-spacing: -.035em; overflow-wrap: anywhere; }
+.signal-workspace-description { max-width: 70ch; margin-top: 16px; color: var(--muted-foreground); font-size: 16px; line-height: 1.65; }
+.signal-workspace-description code { color: var(--foreground); font-size: .875em; }
+.signal-workspace-action { flex-shrink: 0; }
+.signal-workspace [data-slot="card"] { border-radius: 6px; box-shadow: none; }
+.signal-workspace [data-slot="button"] { box-shadow: none; border-radius: 4px; }
+.signal-workspace [data-slot="button"].bg-primary { background: var(--signal-violet) linear-gradient(115deg, #6d28d9, #7c3aed 48%, #8a49ed); }
+.signal-workspace-page { padding-block: 40px 80px; }
+@media (max-width: 760px) {
+  .signal-workspace-page { padding-block: 28px 48px; }
+  .signal-workspace-header { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 30px; }
+  .signal-workspace-title h1 { font-size: 2.25rem; }
+  .signal-workspace-description { font-size: 14px; margin-top: 12px; }
+}
+
+.signal-workspace-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 24px; min-height: 116px; padding: 24px 4px; border-bottom: 1px solid var(--border); transition: background-color 180ms, border-color 180ms; }
+.signal-workspace-item:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); border-bottom-color: var(--signal-line); }
+.signal-workspace-item-icon { width: 44px; height: 44px; border: 1px solid var(--signal-line); border-radius: 6px; display: grid; place-items: center; color: var(--signal-accent-ink); background: var(--background); }
+.signal-workspace-item-icon svg { width: 20px; height: 20px; }
+.signal-workspace-item-copy { display: grid; gap: 8px; min-width: 0; }
+.signal-workspace-item-title { font-size: 20px; line-height: 1.3; font-weight: 550; letter-spacing: -.02em; overflow-wrap: anywhere; }
+.signal-workspace-item-description { font-size: 13px; color: var(--muted-foreground); overflow-wrap: anywhere; line-height: 1.6; }
+.signal-workspace-item-detail { display: flex; align-items: center; gap: 20px; color: var(--muted-foreground); font-size: 12px; }
+.signal-workspace-item-open { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 44px; margin-left: 24px; font-size: 13px; color: var(--signal-accent-ink); }
+.signal-workspace-item-open svg { height: 18px; width: 18px; transition: transform 180ms var(--signal-ease); }
+.signal-workspace-item:hover .signal-workspace-item-open svg { transform: translateX(4px); }
+.signal-workspace-item { width: 100%; text-align: left; cursor: pointer; }
+@media (max-width: 1000px) { .signal-workspace-item-detail { flex-direction: column; align-items: flex-start; gap: 8px; } }
+@media (max-width: 760px) {
+  .signal-workspace-item { grid-template-columns: 36px minmax(0, 1fr) 24px; gap: 12px; padding-block: 20px; }
+  .signal-workspace-item-icon { width: 36px; height: 36px; align-self: start; }
+  .signal-workspace-item-title { font-size: 18px; }
+  .signal-workspace-item-detail { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
+  .signal-workspace-item-open { grid-column: 3; grid-row: 1 / span 2; margin-left: 0; }
+  .signal-workspace-item-open > span { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .signal-workspace-item, .signal-workspace-item-open svg { transition: none; }
+  .signal-workspace-item:hover .signal-workspace-item-open svg { transform: none; }
+}
+
+.signal-workspace-tabs { display: flex; gap: 28px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
+.signal-workspace-tabs > :is(a, span) { flex-shrink: 0; display: inline-flex; min-height: 48px; align-items: center; padding: 0 1px; border-bottom: 2px solid transparent; color: var(--muted-foreground); font-size: 14px; }
+.signal-workspace-tabs > [aria-current="page"] { color: var(--foreground); border-bottom-color: var(--signal-light); background: transparent; }
+.signal-workspace-tabs > a:not([aria-current="page"]):hover { color: var(--foreground); border-bottom-color: var(--signal-line); }
+
+/* Operating chrome keeps navigation close to the task surface. */
+.signal-workspace-compact { --signal-header-height: 88px; }
+.signal-workspace-compact .signal-workspace-page { padding-top: 8px; }
+.signal-workspace-compact .signal-workspace-tabs { margin-bottom: 16px; }
+@media (max-width: 760px) {
+  .signal-workspace-compact { --signal-header-height: 138px; }
+  .signal-workspace-compact .signal-header { padding-block: 12px; gap: 12px; }
+  .signal-workspace-compact .signal-workspace-tabs { gap: 24px; margin-bottom: 12px; }
+}

package/src/widgets.tsx

@@ -10,6 +10,7 @@
 // the seam falls back to the plain default for any kind not overridden here.
 
 import { useId, type ReactNode } from 'react'
+import { Checkbox } from './primitives/checkbox'
 import type { Widget, WidgetProps, WidgetRegistry } from '@voltro/ui'
 
 const cx = {
@@ -18,7 +19,7 @@ const cx = {
   control:
     'block w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ' +
     'focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-  checkbox: 'h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-ring',
+  radio: 'h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-ring',
   error: 'text-sm text-destructive',
 }
 
@@ -93,11 +94,9 @@ const CheckboxWidget: Widget = (props) => {
   const id = useId()
   return (
     <div className="voltro-field flex items-center gap-2">
-      <input
+      <Checkbox
         id={id}
-        type="checkbox"
         name={props.name}
-        className={cx.checkbox}
         checked={props.value === true}
         onChange={(e) => props.onChange(e.target.checked)}
         disabled={props.disabled}
@@ -203,7 +202,7 @@ const RadioWidget: Widget = (props) => {
                 type="radio"
                 name={props.name}
                 value={o.value}
-                className={cx.checkbox}
+                className={cx.radio}
                 checked={asString(props.value) === o.value}
                 onChange={() => props.onChange(o.value)}
                 disabled={props.disabled}