@braintwopoint0/playback-commons 0.2.5 → 0.2.7

package/dist/api/index.d.ts

@@ -0,0 +1,34 @@
+type CorsOptions = {
+    /** Comma-separated method list. Default: 'POST, OPTIONS'. */
+    methods?: string;
+    /** Comma-separated header allowlist. Default: 'Content-Type'. */
+    headers?: string;
+    /** Preflight cache duration in seconds. Default: 86400 (24h). */
+    maxAge?: number;
+};
+/**
+ * Build CORS response headers.
+ *
+ * Always returns `Vary: Origin` so caches don't serve a CORS-allowed response
+ * to a different origin. Only emits `Access-Control-*` headers when the request
+ * Origin is in the allowlist — exact-match, no wildcards, so a typo'd subdomain
+ * or rogue preview URL can't post into a production endpoint.
+ *
+ * Same-origin requests have no Origin header on POST in some browsers and never
+ * preflight, so an absent or unknown origin returning the empty CORS set is the
+ * correct behavior.
+ */
+declare function corsHeaders(origin: string | null, allowed: ReadonlySet<string>, opts?: CorsOptions): Record<string, string>;
+/**
+ * Build a preflight (OPTIONS) Response. Use directly as the route's OPTIONS export:
+ *
+ *   export const OPTIONS = (req: NextRequest) => corsPreflight(req, ALLOWED_ORIGINS)
+ *
+ * Returns 204 No Content with the CORS headers built from the request's Origin
+ * against the allowlist. If the origin isn't allowed, the response still returns
+ * 204 but without the `Access-Control-Allow-*` headers — which is what the browser
+ * needs to see in order to block the subsequent real request.
+ */
+declare function corsPreflight(req: Request, allowed: ReadonlySet<string>, opts?: CorsOptions): Response;
+
+export { type CorsOptions, corsHeaders, corsPreflight };

package/dist/api/index.js

@@ -0,0 +1,26 @@
+// src/api/index.ts
+var DEFAULT_METHODS = "POST, OPTIONS";
+var DEFAULT_HEADERS = "Content-Type";
+var DEFAULT_MAX_AGE = 86400;
+function corsHeaders(origin, allowed, opts = {}) {
+  const headers = { Vary: "Origin" };
+  if (origin && allowed.has(origin)) {
+    headers["Access-Control-Allow-Origin"] = origin;
+    headers["Access-Control-Allow-Methods"] = opts.methods ?? DEFAULT_METHODS;
+    headers["Access-Control-Allow-Headers"] = opts.headers ?? DEFAULT_HEADERS;
+    headers["Access-Control-Max-Age"] = String(opts.maxAge ?? DEFAULT_MAX_AGE);
+  }
+  return headers;
+}
+function corsPreflight(req, allowed, opts) {
+  const origin = req.headers.get("origin");
+  return new Response(null, {
+    status: 204,
+    headers: corsHeaders(origin, allowed, opts)
+  });
+}
+export {
+  corsHeaders,
+  corsPreflight
+};
+//# sourceMappingURL=index.js.map

package/dist/api/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/api/index.ts"],"sourcesContent":["// CORS primitives for cross-origin API routes between PLAYBACK / PLAYHUB / future\n// PLAYBACK-suite apps.\n//\n// The mechanism (header construction, preflight response) lives here. The policy\n// — i.e. which origins are allowed to call a given endpoint — is intentionally\n// per-route, since \"who can hit my newsletter endpoint\" is a different decision\n// from \"who can hit my admin endpoint\".\n\nexport type CorsOptions = {\n  /** Comma-separated method list. Default: 'POST, OPTIONS'. */\n  methods?: string\n  /** Comma-separated header allowlist. Default: 'Content-Type'. */\n  headers?: string\n  /** Preflight cache duration in seconds. Default: 86400 (24h). */\n  maxAge?: number\n}\n\nconst DEFAULT_METHODS = 'POST, OPTIONS'\nconst DEFAULT_HEADERS = 'Content-Type'\nconst DEFAULT_MAX_AGE = 86400\n\n/**\n * Build CORS response headers.\n *\n * Always returns `Vary: Origin` so caches don't serve a CORS-allowed response\n * to a different origin. Only emits `Access-Control-*` headers when the request\n * Origin is in the allowlist — exact-match, no wildcards, so a typo'd subdomain\n * or rogue preview URL can't post into a production endpoint.\n *\n * Same-origin requests have no Origin header on POST in some browsers and never\n * preflight, so an absent or unknown origin returning the empty CORS set is the\n * correct behavior.\n */\nexport function corsHeaders(\n  origin: string | null,\n  allowed: ReadonlySet<string>,\n  opts: CorsOptions = {}\n): Record<string, string> {\n  const headers: Record<string, string> = { Vary: 'Origin' }\n  if (origin && allowed.has(origin)) {\n    headers['Access-Control-Allow-Origin'] = origin\n    headers['Access-Control-Allow-Methods'] = opts.methods ?? DEFAULT_METHODS\n    headers['Access-Control-Allow-Headers'] = opts.headers ?? DEFAULT_HEADERS\n    headers['Access-Control-Max-Age'] = String(opts.maxAge ?? DEFAULT_MAX_AGE)\n  }\n  return headers\n}\n\n/**\n * Build a preflight (OPTIONS) Response. Use directly as the route's OPTIONS export:\n *\n *   export const OPTIONS = (req: NextRequest) => corsPreflight(req, ALLOWED_ORIGINS)\n *\n * Returns 204 No Content with the CORS headers built from the request's Origin\n * against the allowlist. If the origin isn't allowed, the response still returns\n * 204 but without the `Access-Control-Allow-*` headers — which is what the browser\n * needs to see in order to block the subsequent real request.\n */\nexport function corsPreflight(\n  req: Request,\n  allowed: ReadonlySet<string>,\n  opts?: CorsOptions\n): Response {\n  const origin = req.headers.get('origin')\n  return new Response(null, {\n    status: 204,\n    headers: corsHeaders(origin, allowed, opts),\n  })\n}\n"],"mappings":";AAiBA,IAAM,kBAAkB;AACxB,IAAM,kBAAkB;AACxB,IAAM,kBAAkB;AAcjB,SAAS,YACd,QACA,SACA,OAAoB,CAAC,GACG;AACxB,QAAM,UAAkC,EAAE,MAAM,SAAS;AACzD,MAAI,UAAU,QAAQ,IAAI,MAAM,GAAG;AACjC,YAAQ,6BAA6B,IAAI;AACzC,YAAQ,8BAA8B,IAAI,KAAK,WAAW;AAC1D,YAAQ,8BAA8B,IAAI,KAAK,WAAW;AAC1D,YAAQ,wBAAwB,IAAI,OAAO,KAAK,UAAU,eAAe;AAAA,EAC3E;AACA,SAAO;AACT;AAYO,SAAS,cACd,KACA,SACA,MACU;AACV,QAAM,SAAS,IAAI,QAAQ,IAAI,QAAQ;AACvC,SAAO,IAAI,SAAS,MAAM;AAAA,IACxB,QAAQ;AAAA,IACR,SAAS,YAAY,QAAQ,SAAS,IAAI;AAAA,EAC5C,CAAC;AACH;","names":[]}

package/dist/ui/index.d.ts

@@ -295,6 +295,45 @@ interface SearchBarProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 }
 declare function SearchBar({ value, onChange, onClear, className, placeholder, ...props }: SearchBarProps): react_jsx_runtime.JSX.Element;
 
+interface MultiSelectOption {
+    value: string;
+    label: string;
+    /** Optional badge shown after the label (e.g. row count). */
+    count?: number;
+}
+interface MultiSelectProps {
+    options: MultiSelectOption[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    /** Hide the search input when there are fewer than this many options. */
+    searchThreshold?: number;
+    /** Show a "Clear all" affordance inside the popover when something is selected. */
+    clearable?: boolean;
+    /** Tailwind classes applied to the trigger button. */
+    className?: string;
+    /** Popover content width. Defaults to w-72. */
+    contentClassName?: string;
+    /** Aria-label for the trigger. */
+    'aria-label'?: string;
+}
+/**
+ * Multi-select dropdown — a search-and-pick alternative to chip lists when
+ * the option count gets unwieldy. Composes the existing Popover + Checkbox
+ * + Input primitives so styling stays consistent with the rest of commons.
+ *
+ * Trigger renders:
+ *   - placeholder when nothing is selected
+ *   - the single option's label when exactly one is selected
+ *   - "N selected" when multiple are selected
+ *
+ * Designed for short-to-medium option lists (~5-100). For very long lists
+ * consider a virtualised picker.
+ */
+declare function MultiSelect({ options, selected, onChange, placeholder, searchPlaceholder, emptyLabel, searchThreshold, clearable, className, contentClassName, 'aria-label': ariaLabel, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
+
 interface DataRowProps extends React$1.HTMLAttributes<HTMLDivElement> {
     status?: 'green' | 'yellow' | 'red' | 'gray';
     primary: string;
@@ -577,4 +616,4 @@ type ResetPasswordFormProps = {
 };
 declare function ResetPasswordForm({ loginHref, initialError, redirectDelayMs, title, subtitle, }: ResetPasswordFormProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedTooltip, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DataRow, type DataRowProps, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, FadeIn, type FadeInProps, FlipWords, Footer, type FooterColumnDef, FooterCreditsBar, type FooterCreditsBarProps, type FooterLinkDef, type FooterProps, type FooterSocialDef, type FooterSocialLink, ForgotPasswordForm, type ForgotPasswordFormProps, HeroHighlight, Highlight, HoverCard, HoverCardDescription, HoverCardTitle, HoverEffect, Input, type InputProps, Label, LumaSpin, NewsletterForm, type NewsletterFormProps, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResetPasswordForm, type ResetPasswordFormProps, SearchBar, type SearchBarProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SignInForm, type SignInFormProps, SiteFooter, type SiteFooterProps, Skeleton, type StatItem, StatsGrid, type StatsGridProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, easeSmooth, fadeInDown, fadeInUp, hoverLift, hoverScale, pageTransition, springBounce, staggerContainer, staggerItem };
+export { AnimatedTooltip, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DataRow, type DataRowProps, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, FadeIn, type FadeInProps, FlipWords, Footer, type FooterColumnDef, FooterCreditsBar, type FooterCreditsBarProps, type FooterLinkDef, type FooterProps, type FooterSocialDef, type FooterSocialLink, ForgotPasswordForm, type ForgotPasswordFormProps, HeroHighlight, Highlight, HoverCard, HoverCardDescription, HoverCardTitle, HoverEffect, Input, type InputProps, Label, LumaSpin, MultiSelect, type MultiSelectOption, type MultiSelectProps, NewsletterForm, type NewsletterFormProps, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResetPasswordForm, type ResetPasswordFormProps, SearchBar, type SearchBarProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SignInForm, type SignInFormProps, SiteFooter, type SiteFooterProps, Skeleton, type StatItem, StatsGrid, type StatsGridProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, easeSmooth, fadeInDown, fadeInUp, hoverLift, hoverScale, pageTransition, springBounce, staggerContainer, staggerItem };