@snackbit/opendil 0.1.0 → 0.2.0

package/styles/tailwind.css

@@ -3,6 +3,9 @@
 @import "@xyflow/react/dist/style.css";
 @import "./tokens.css";
 
+/* Follows the renderer's appearance instead of the operating system or a page-wide class. */
+@custom-variant dil-dark (&:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *));
+
 .dil-scope {
   --background: #ffffff;
   --foreground: var(--dil-text-color);
@@ -59,6 +62,12 @@
   --radius-xl: calc(var(--radius) + 4px);
 }
 @layer base {
+  /* Contains absolutely positioned descendants, such as screen-reader status
+     regions, so they scroll with the renderer inside overflow containers. In the
+     base layer, position utilities passed through className still win. */
+  .dil-scope {
+    position: relative;
+  }
   .dil-scope *,
   .dil-scope *::before,
   .dil-scope *::after {
@@ -71,8 +80,14 @@
   .dil-scope p {
     margin: 0;
   }
+  /* User-agent form colors follow color-scheme, not the renderer tokens. */
+  .dil-scope :is(button, input, select, textarea) {
+    color: inherit;
+    background-color: transparent;
+  }
 }
 .dil-scope {
+  color-scheme: light;
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-dil);
@@ -89,6 +104,7 @@
   font: inherit;
 }
 .dil-scope[data-theme="dark"] {
+  color-scheme: dark;
   --background: #171717;
   --foreground: #fafafa;
   --dil-text-color: #fafafa;
@@ -107,6 +123,11 @@
   --accent-foreground: #fafafa;
   --border: #454545;
   --input: #505050;
+  --dil-success: #5cc59a;
+  --dil-warning: #e2ad55;
+  --dil-success-surface: #1d3a2f;
+  --dil-warning-surface: #3d3020;
+  --dil-danger-surface: #432526;
 }
 .dil-document {
   overflow-wrap: anywhere;
@@ -134,6 +155,30 @@
 .dil-markdown strong {
   font-weight: 600;
 }
+/* The browser's list and quote styles, restated so a host page's CSS reset,
+   such as Tailwind's preflight, does not remove bullets, numbers and indents. */
+.dil-markdown :where(ul, ol) {
+  margin-block: 1em;
+  padding-inline-start: 40px;
+}
+.dil-markdown :where(ul, ol) :where(ul, ol) {
+  margin-block: 0;
+}
+.dil-markdown ul {
+  list-style-type: disc;
+}
+.dil-markdown :where(ul, ol) ul {
+  list-style-type: circle;
+}
+.dil-markdown :where(ul, ol) :where(ul, ol) ul {
+  list-style-type: square;
+}
+.dil-markdown ol {
+  list-style-type: decimal;
+}
+.dil-markdown blockquote {
+  margin: 1em 40px;
+}
 .dil-markdown table {
   width: 100%;
   border-collapse: collapse;
@@ -224,7 +269,6 @@
 }
 .dil-legend-item[data-hidden="true"] {
   opacity: 0.45;
-  text-decoration: line-through;
 }
 .dil-legend-swatch {
   width: 11px;
@@ -235,6 +279,11 @@
 .dil-chart-series {
   transition: opacity 150ms ease;
 }
+/* Pie slice emphasis stays in CSS: re-rendering a Recharts Pie remounts its sectors. */
+.dil-chart-pie:has(.dil-chart-series:hover, .dil-chart-series:focus-visible)
+  .dil-chart-series:not(:hover, :focus-visible) {
+  opacity: 0.625;
+}
 .dil-tooltip {
   z-index: 60;
   max-width: min(24rem, calc(100vw - 16px));
@@ -249,6 +298,9 @@
 .dil-snap-tooltip {
   pointer-events: none;
 }
+.dil-snap-tooltip [data-emphasized="true"] span {
+  font-weight: 700;
+}
 .dil-code-block textarea {
   font-family: var(--font-mono, monospace);
   font-size: var(--text-xs, 0.75rem);

package/styles/tokens.css

@@ -14,6 +14,9 @@
   --dil-item-radius: 8px;
   --dil-success: #22825e;
   --dil-warning: #ad751a;
+  --dil-success-surface: #e5f5ee;
+  --dil-warning-surface: #fff2d9;
+  --dil-danger-surface: #fee8e8;
   --dil-tertiary: #8f8f8f;
   --dil-node-selected: #343d75;
   --dil-node-surface: #2a303b;

package/dist/chunk-ZWAN2JCV.js

@@ -1,2 +0,0 @@
-"use client";
-import{createContext as V,useContext as G,useState as _,useMemo as A}from"react";import{clsx as N}from"clsx";import{twMerge as S}from"tailwind-merge";function a(...e){return S(N(e))}import{jsx as x,jsxs as I}from"react/jsx-runtime";var y=V({container:null});function c(){return G(y)}function W({children:e,className:t,style:o,appearance:i="light",tokens:n,boundary:r,...g}){let[v,f]=_(null),T=A(()=>({container:v,...r?{boundary:r}:{}}),[v,r]);return x("section",{...g,className:a("dil-scope",t),"data-theme":i,style:{...o,...n},children:I(y.Provider,{value:T,children:[e,x("div",{"data-dil-portals":!0,ref:f})]})})}import"react";import{Popover as s}from"radix-ui";import{jsx as d}from"react/jsx-runtime";function oe({...e}){return d(s.Root,{"data-slot":"popover",...e})}function re({...e}){return d(s.Trigger,{"data-slot":"popover-trigger",...e})}function ie({className:e,align:t="center",sideOffset:o=4,...i}){let{container:n,boundary:r}=c();return d(s.Portal,{container:n,children:d(s.Content,{"data-slot":"popover-content",align:t,sideOffset:o,collisionBoundary:r,className:a("z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",e),...i})})}function ae({...e}){return d(s.Anchor,{"data-slot":"popover-anchor",...e})}import"react";import{cva as M}from"class-variance-authority";import{Slot as E}from"radix-ui";import{jsx as D}from"react/jsx-runtime";var B=M("inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",outline:"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 has-[>svg]:px-3",xs:"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",sm:"h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",lg:"h-10 rounded-md px-6 has-[>svg]:px-4",icon:"size-9","icon-xs":"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3","icon-sm":"size-8","icon-lg":"size-10"}},defaultVariants:{variant:"default",size:"default"}});function ue({className:e,variant:t="default",size:o="default",asChild:i=!1,...n}){let r=i?E.Root:"button";return D(r,{"data-slot":"button","data-variant":t,"data-size":o,className:a(B({variant:t,size:o,className:e})),...n})}import{Tooltip as l}from"radix-ui";import{jsx as p,jsxs as H}from"react/jsx-runtime";function be({label:e,children:t,open:o}){let{container:i,boundary:n}=c();return p(l.Provider,{delayDuration:250,children:H(l.Root,{...o===void 0?{}:{open:o},children:[p(l.Trigger,{asChild:!0,children:t}),p(l.Portal,{container:i,children:p(l.Content,{sideOffset:6,collisionPadding:8,collisionBoundary:n,className:"dil-tooltip",children:e})})]})})}import"react";import{CheckIcon as U}from"lucide-react";import{Checkbox as R}from"radix-ui";import{jsx as b}from"react/jsx-runtime";function Ce({className:e,...t}){return b(R.Root,{"data-slot":"checkbox",className:a("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",e),...t,children:b(R.Indicator,{"data-slot":"checkbox-indicator",className:"grid place-content-center text-current transition-none",children:b(U,{className:"size-3.5"})})})}import"react";import{jsx as L}from"react/jsx-runtime";function Se({className:e,type:t,...o}){return L("input",{type:t,"data-slot":"input",className:a("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30","focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50","aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",e),...o})}import*as k from"react";import{Slider as u}from"radix-ui";import{jsx as h,jsxs as O}from"react/jsx-runtime";function Ie({className:e,defaultValue:t,value:o,min:i=0,max:n=100,...r}){let g=k.useMemo(()=>Array.isArray(o)?o:Array.isArray(t)?t:[i,n],[o,t,i,n]);return O(u.Root,{"data-slot":"slider",defaultValue:t,value:o,min:i,max:n,className:a("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",e),...r,children:[h(u.Track,{"data-slot":"slider-track",className:a("relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),children:h(u.Range,{"data-slot":"slider-range",className:a("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")})}),Array.from({length:g.length},(v,f)=>h(u.Thumb,{"aria-label":r["aria-label"],"aria-valuetext":r["aria-valuetext"],"data-slot":"slider-thumb",className:"block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"},f))]})}import*as m from"react";import"class-variance-authority";import{ToggleGroup as w}from"radix-ui";import"react";import{cva as $}from"class-variance-authority";import{Toggle as Ue}from"radix-ui";import{jsx as Oe}from"react/jsx-runtime";var C=$("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-transparent",outline:"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"},size:{default:"h-9 min-w-9 px-2",sm:"h-8 min-w-8 px-1.5",lg:"h-10 min-w-10 px-2.5"}},defaultVariants:{variant:"default",size:"default"}});import{jsx as P}from"react/jsx-runtime";var z=m.createContext({size:"default",variant:"default",spacing:0});function Qe({className:e,variant:t,size:o,spacing:i=0,children:n,...r}){return P(w.Root,{"data-slot":"toggle-group","data-variant":t,"data-size":o,"data-spacing":i,style:{"--gap":i},className:a("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",e),...r,children:P(z.Provider,{value:{variant:t,size:o,spacing:i},children:n})})}function We({className:e,children:t,variant:o,size:i,...n}){let r=m.useContext(z);return P(w.Item,{"data-slot":"toggle-group-item","data-variant":r.variant||o,"data-size":r.size||i,"data-spacing":r.spacing,className:a(C({variant:r.variant||o,size:r.size||i}),"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10","rounded-md data-[state=on]:bg-background data-[state=on]:shadow-sm",e),...n,children:t})}export{a,W as b,oe as c,re as d,ie as e,ae as f,B as g,ue as h,be as i,Ce as j,Se as k,Ie as l,Qe as m,We as n};