@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/components/ui/accordion.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ArrowDown } from "../icons";
+import { cx } from "./cx";
+
+export const Accordion = AccordionPrimitive.Root;
+
+export const AccordionItem = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    data-slot="accordion-item"
+    className={cx("ui-accordion-item", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+export const AccordionTrigger = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="ui-accordion-header">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      data-slot="accordion-trigger"
+      className={cx("ui-accordion-trigger", className)}
+      {...props}
+    >
+      {children}
+      <ArrowDown className="ui-accordion-arrow" weight="bold" aria-hidden="true" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export const AccordionContent = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content ref={ref} data-slot="accordion-content" className="ui-accordion-content" {...props}>
+    <div className={className}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = "AccordionContent";

package/studio/web/components/ui/badge.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+/* variant: neutral | ok | error | warning | running (CSS `.badge.<variant>`) */
+export function Badge({
+  variant = "neutral",
+  children,
+  title,
+}: {
+  variant?: string;
+  children: ReactNode;
+  title?: string;
+}) {
+  return (
+    <span className={`badge ${variant}`} title={title}>
+      {children}
+    </span>
+  );
+}

package/studio/web/components/ui/calendar.tsx

@@ -0,0 +1,43 @@
+/* shadcn's Calendar: the DayPicker (react-day-picker) with the studio classes, in pt-BR */
+
+import type { ComponentPropsWithoutRef } from "react";
+import { DayPicker } from "react-day-picker";
+import { ptBR } from "react-day-picker/locale";
+import { ArrowLeft, ArrowRight } from "../icons";
+import { cx } from "./cx";
+
+export function Calendar({ className, ...props }: ComponentPropsWithoutRef<typeof DayPicker>) {
+  return (
+    <DayPicker
+      locale={ptBR}
+      showOutsideDays
+      className={cx("ui-cal", className)}
+      classNames={{
+        root: "ui-cal-root",
+        months: "ui-cal-months",
+        month: "ui-cal-month",
+        month_caption: "ui-cal-title",
+        caption_label: "ui-cal-label",
+        nav: "ui-cal-nav",
+        button_previous: "ui-cal-arrow",
+        button_next: "ui-cal-arrow",
+        month_grid: "ui-cal-grid",
+        weekdays: "ui-cal-weekdays",
+        weekday: "ui-cal-weekday",
+        week: "ui-cal-week",
+        day: "ui-cal-day",
+        day_button: "ui-cal-button",
+        selected: "selected",
+        today: "today",
+        outside: "outside",
+        disabled: "disabled",
+        hidden: "hidden",
+      }}
+      components={{
+        Chevron: ({ orientation }) =>
+          orientation === "left" ? <ArrowLeft weight="bold" /> : <ArrowRight weight="bold" />,
+      }}
+      {...props}
+    />
+  );
+}

package/studio/web/components/ui/chart.tsx

@@ -0,0 +1,229 @@
+/* shadcn's charts (ui.shadcn.com/charts) without Tailwind: the same wrapper as their
+   chart.tsx around Recharts (ChartContainer, ChartTooltip, ChartTooltipContent,
+   ChartLegend, ChartConfig), with the look in styles/components/ui/chart.css and the
+   colors in the tokens. As in shadcn, each ChartConfig series becomes a --color-<key>
+   variable on the container, and the chart uses `var(--color-<key>)`; the colors come
+   from --chart-1…5 (tokens.css, light and dark), validated by the dataviz skill. Text
+   never uses the series color. */
+
+import {
+  createContext,
+  useContext,
+  useId,
+  type ComponentProps,
+  type ComponentType,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import * as Recharts from "recharts";
+
+/* `theme` switches the color by the system theme (the studio follows prefers-color-scheme, not a .dark class) */
+export type ChartConfig = Record<
+  string,
+  { label?: ReactNode; icon?: ComponentType } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: { light: string; dark: string } }
+  )
+>;
+
+const ChartContext = createContext<{ config: ChartConfig } | null>(null);
+
+function useChart() {
+  const context = useContext(ChartContext);
+  if (!context) throw new Error("useChart must be used inside a <ChartContainer />");
+  return context;
+}
+
+export function ChartContainer({
+  id,
+  className = "",
+  children,
+  config,
+  ...props
+}: ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: ComponentProps<typeof Recharts.ResponsiveContainer>["children"];
+}) {
+  const uniqueId = useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div data-slot="chart" data-chart={chartId} className={`chart ${className}`} {...props}>
+        <ChartStyle id={chartId} config={config} />
+        <Recharts.ResponsiveContainer>{children}</Recharts.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+/* each series' --color-<key>, in light and dark */
+function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
+  const colors = Object.entries(config).filter(([, c]) => c.theme || c.color);
+  if (!colors.length) return null;
+  const rule = (theme: "light" | "dark") =>
+    `[data-chart=${id}] {\n${colors
+      .map(([k, c]) => {
+        const color = c.theme?.[theme] ?? c.color;
+        return color ? `  --color-${k}: ${color};` : "";
+      })
+      .join("\n")}\n}`;
+  return (
+    <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: CSS variables built from the chart config
+      dangerouslySetInnerHTML={{
+        __html: `${rule("light")}\n@media (prefers-color-scheme: dark) {\n${rule("dark")}\n}`,
+      }}
+    />
+  );
+}
+
+export const ChartTooltip = Recharts.Tooltip;
+
+type ItemPayload = {
+  dataKey?: string | number;
+  name?: string | number;
+  value?: unknown;
+  color?: string;
+  payload?: any;
+  fill?: string;
+};
+
+export function ChartTooltipContent({
+  active,
+  payload,
+  className = "",
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: {
+  active?: boolean;
+  payload?: ReadonlyArray<ItemPayload>;
+  label?: ReactNode;
+  className?: string;
+  indicator?: "line" | "dot" | "dashed";
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  labelFormatter?: (label: ReactNode, payload: ReadonlyArray<ItemPayload>) => ReactNode;
+  formatter?: (value: unknown, name: string, item: ItemPayload, index: number, payload: any) => ReactNode;
+  color?: string;
+  nameKey?: string;
+  labelKey?: string;
+}) {
+  const { config } = useChart();
+  if (!active || !payload?.length) return null;
+
+  const first = payload[0];
+  const key = `${labelKey || first?.dataKey || first?.name || "value"}`;
+  const itemConfig = payloadConfig(config, first, key);
+  const labelValue = !labelKey && typeof label === "string" ? (config[label]?.label ?? label) : itemConfig?.label;
+  const header = hideLabel ? null : labelFormatter ? (
+    <div className="chart-tooltip-label">{labelFormatter(labelValue ?? label, payload)}</div>
+  ) : labelValue ? (
+    <div className="chart-tooltip-label">{labelValue}</div>
+  ) : null;
+  const nested = payload.length === 1 && indicator !== "dot";
+
+  return (
+    <div className={`chart-tooltip ${className}`}>
+      {!nested ? header : null}
+      <div className="chart-tooltip-items">
+        {payload
+          .filter(item => item.dataKey !== undefined || item.name !== undefined)
+          .map((item, i) => {
+            const k = `${nameKey || item.name || item.dataKey || "value"}`;
+            const ic = payloadConfig(config, item, k);
+            const indicatorColor = color || item.payload?.fill || item.color;
+            return (
+              <div
+                key={String(item.dataKey ?? i)}
+                className={`chart-tooltip-item ${indicator === "dot" ? "center" : ""}`}
+              >
+                {formatter && item.value !== undefined && item.name !== undefined ? (
+                  formatter(item.value, String(item.name), item, i, item.payload)
+                ) : (
+                  <>
+                    {ic?.icon ? (
+                      <ic.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <span
+                          className={`chart-indicator ${indicator}`}
+                          style={{ "--indicator-color": indicatorColor } as CSSProperties}
+                        />
+                      )
+                    )}
+                    <div className={`chart-tooltip-row ${nested ? "nested" : ""}`}>
+                      <div>
+                        {nested ? header : null}
+                        <span className="chart-tooltip-name">{ic?.label ?? item.name}</span>
+                      </div>
+                      {item.value != null && (
+                        <span className="chart-tooltip-value">
+                          {typeof item.value === "number" ? item.value.toLocaleString("pt-BR") : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+export const ChartLegend = Recharts.Legend;
+
+export function ChartLegendContent({
+  className = "",
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: {
+  className?: string;
+  hideIcon?: boolean;
+  payload?: ReadonlyArray<ItemPayload>;
+  verticalAlign?: "top" | "bottom" | "middle";
+  nameKey?: string;
+}) {
+  const { config } = useChart();
+  if (!payload?.length) return null;
+  return (
+    <div className={`chart-legend ${verticalAlign === "top" ? "top" : ""} ${className}`}>
+      {payload
+        .filter(item => (item as any).type !== "none")
+        .map(item => {
+          const k = `${nameKey || item.dataKey || "value"}`;
+          const ic = payloadConfig(config, item, k);
+          return (
+            <div key={String(item.dataKey ?? item.name)} className="chart-legend-item">
+              {ic?.icon && !hideIcon ? (
+                <ic.icon />
+              ) : (
+                <span className="chart-indicator dot" style={{ "--indicator-color": item.color } as CSSProperties} />
+              )}
+              {ic?.label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+/* the config entry of a payload item: by the key, or by the data field that names the key */
+function payloadConfig(config: ChartConfig, item: ItemPayload | undefined, key: string) {
+  if (!item || typeof item !== "object") return undefined;
+  const data = item.payload && typeof item.payload === "object" ? item.payload : undefined;
+  let k = key;
+  if (typeof (item as any)[key] === "string") k = (item as any)[key];
+  else if (data && typeof data[key] === "string") k = data[key];
+  return k in config ? config[k] : config[key];
+}

package/studio/web/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+/* shadcn's Checkbox over Radix; onCheckedChange gets a plain boolean */
+
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "../icons";
+import { cx } from "./cx";
+
+export const Checkbox = forwardRef<
+  ElementRef<typeof CheckboxPrimitive.Root>,
+  Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "onCheckedChange"> & {
+    onCheckedChange?: (checked: boolean) => void;
+  }
+>(({ className, onCheckedChange, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    data-slot="checkbox"
+    className={cx("ui-checkbox", className)}
+    onCheckedChange={v => onCheckedChange?.(v === true)}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="ui-checkbox-mark">
+      <Check weight="bold" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = "Checkbox";

package/studio/web/components/ui/cx.ts

@@ -0,0 +1,2 @@
+/* join class names, skipping falsy ones */
+export const cx = (...c: (string | false | null | undefined)[]) => c.filter(Boolean).join(" ");

package/studio/web/components/ui/date-time-picker.tsx

@@ -0,0 +1,84 @@
+/* Day and time in a popover: shadcn's "Date and time picker". The value is a local string
+   (YYYY-MM-DDTHH:mm), the same as the datetime-local input it replaces. */
+
+import { ArrowDown, CalendarBlank } from "../icons";
+import { Calendar } from "./calendar";
+import { cx } from "./cx";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+const pad2 = (n: number) => String(n).padStart(2, "0");
+/* "2026-10-14T09:30" (local time, the datetime-local format) ↔ Date */
+const parseLocal = (v: string) => {
+  const d = new Date(v);
+  return Number.isNaN(d.getTime()) ? null : d;
+};
+const formatLocal = (d: Date) =>
+  `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+
+export function DateTimePicker({
+  value,
+  onChange,
+  min,
+  disabled,
+  className,
+  ...aria
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  min?: string;
+  disabled?: boolean;
+  className?: string;
+  "aria-label"?: string;
+}) {
+  const date = parseLocal(value);
+  const minimum = min ? parseLocal(min) : null;
+  const time = date ? `${pad2(date.getHours())}:${pad2(date.getMinutes())}` : "";
+  const label = date
+    ? `${date.toLocaleDateString("pt-BR", { weekday: "short", day: "2-digit", month: "short", year: "numeric" }).replace(/\./g, "")} às ${time}`
+    : "Escolha o dia e a hora";
+  const pickDay = (day?: Date) => {
+    if (!day) return;
+    const n = new Date(day);
+    n.setHours(date?.getHours() ?? 9, date?.getMinutes() ?? 0, 0, 0);
+    /* today, with a time already past: moves up to the minimum */
+    onChange(formatLocal(minimum && n < minimum ? minimum : n));
+  };
+  const pickTime = (t: string) => {
+    const [hh, mm] = t.split(":").map(Number);
+    if (!date || Number.isNaN(hh) || Number.isNaN(mm)) return;
+    const n = new Date(date);
+    n.setHours(hh, mm, 0, 0);
+    onChange(formatLocal(n));
+  };
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          className={cx("ui-select-trigger ui-date-trigger", className)}
+          {...aria}
+        >
+          <CalendarBlank className="ui-date-icon" />
+          <span className="ui-select-value">{label}</span>
+          <ArrowDown className="ui-select-arrow" weight="bold" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <Calendar
+          mode="single"
+          selected={date ?? undefined}
+          defaultMonth={date ?? undefined}
+          onSelect={pickDay}
+          disabled={
+            minimum ? { before: new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate()) } : undefined
+          }
+        />
+        <div className="ui-date-time">
+          <label htmlFor="ui-date-time-field">Hora</label>
+          <input id="ui-date-time-field" type="time" step={300} value={time} onChange={e => pickTime(e.target.value)} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/studio/web/components/ui/panel.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+export function Panel({
+  title,
+  extra,
+  children,
+  className = "",
+}: {
+  title: ReactNode;
+  extra?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section className={`panel ${className}`}>
+      <header className="panel-top">
+        <h2>{title}</h2>
+        {extra}
+      </header>
+      {children}
+    </section>
+  );
+}

package/studio/web/components/ui/picker.tsx

@@ -0,0 +1,58 @@
+/* The whole select from data: `options` with value and label, or in groups. Radix does not accept
+   an item with an empty value, so "" becomes a sentinel. */
+
+import type { ReactNode } from "react";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./select";
+
+export type PickerOption = { value: string; label: ReactNode; disabled?: boolean };
+export type PickerGroup = { group: string; options: PickerOption[] };
+
+const EMPTY = "__empty__";
+const toRadix = (v: string) => (v === "" ? EMPTY : v);
+const fromRadix = (v: string) => (v === EMPTY ? "" : v);
+const isGroup = (o: PickerOption | PickerGroup): o is PickerGroup => "group" in o;
+
+export function Picker({
+  value,
+  onChange,
+  options,
+  disabled,
+  placeholder,
+  className,
+  title,
+  ...aria
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: (PickerOption | PickerGroup)[];
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  title?: string;
+  "aria-label"?: string;
+}) {
+  const item = (o: PickerOption) => (
+    <SelectItem key={o.value} value={toRadix(o.value)} disabled={o.disabled}>
+      {o.label}
+    </SelectItem>
+  );
+  return (
+    <Select value={toRadix(value)} onValueChange={v => onChange(fromRadix(v))} disabled={disabled}>
+      <SelectTrigger className={className} title={title} {...aria}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map(o =>
+          isGroup(o) ? (
+            <SelectGroup key={o.group}>
+              <SelectLabel>{o.group}</SelectLabel>
+              {o.options.map(item)}
+            </SelectGroup>
+          ) : (
+            item(o)
+          ),
+        )}
+      </SelectContent>
+    </Select>
+  );
+}

package/studio/web/components/ui/popover.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cx } from "./cx";
+
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+
+export const PopoverContent = forwardRef<
+  ElementRef<typeof PopoverPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "start", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      data-slot="popover-content"
+      align={align}
+      sideOffset={sideOffset}
+      collisionPadding={8}
+      className={cx("ui-popover-content", className)}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = "PopoverContent";

package/studio/web/components/ui/select.tsx

@@ -0,0 +1,89 @@
+/* shadcn's Select over Radix. No native <select>/<option> in the UI: the list is drawn here
+   (Radix portal), not by the browser. The look comes from CSS (.ui-* in styles/components/ui/select.css). */
+
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { ArrowDown, Check } from "../icons";
+import { cx } from "./cx";
+
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+export const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    data-slot="select-trigger"
+    className={cx("ui-select-trigger", className)}
+    {...props}
+  >
+    <span className="ui-select-value">{children}</span>
+    <SelectPrimitive.Icon asChild>
+      <ArrowDown className="ui-select-arrow" weight="bold" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = "SelectTrigger";
+
+/* a trigger that is just what you put in it (an icon button), without the value and the arrow */
+export const SelectIconTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger ref={ref} data-slot="select-trigger" className={className} {...props}>
+    {children}
+  </SelectPrimitive.Trigger>
+));
+SelectIconTrigger.displayName = "SelectIconTrigger";
+
+export const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      data-slot="select-content"
+      position={position}
+      sideOffset={4}
+      collisionPadding={8}
+      className={cx("ui-select-content", className)}
+      {...props}
+    >
+      <SelectPrimitive.Viewport className="ui-select-viewport">{children}</SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = "SelectContent";
+
+export const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cx("ui-select-label", className)} {...props} />
+));
+SelectLabel.displayName = "SelectLabel";
+
+export const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item ref={ref} data-slot="select-item" className={cx("ui-select-item", className)} {...props}>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <SelectPrimitive.ItemIndicator className="ui-select-mark">
+      <Check weight="bold" />
+    </SelectPrimitive.ItemIndicator>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = "SelectItem";
+
+export const SelectSeparator = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cx("ui-select-sep", className)} {...props} />
+));
+SelectSeparator.displayName = "SelectSeparator";

package/studio/web/components/ui/skeleton.tsx

@@ -0,0 +1,10 @@
+/* shadcn's ui/skeleton: a <div> with bg-accent, animate-pulse and rounded-md. Here the look comes
+   from CSS (.ui-skeleton); size and radius go through className or style, mirroring what will
+   take the place. */
+
+import type { ComponentPropsWithoutRef } from "react";
+import { cx } from "./cx";
+
+export function Skeleton({ className, ...props }: ComponentPropsWithoutRef<"div">) {
+  return <div data-slot="skeleton" aria-hidden="true" className={cx("ui-skeleton", className)} {...props} />;
+}