Issue 645 investigation

.changeset/weak-donuts-tan.md

@@ -2,4 +2,4 @@
 'layerchart': patch
 ---
 
-feat: Simplify daisyUI, shadcn-svelte, and Skeleton integrations with single line `@import 'layerchart/{library}.css'` added to `app.css`
+feat: Simplify Skeleton integration with `@import 'layerchart/skeleton.css'`

.changeset/whole-women-listen.md

@@ -2,4 +2,4 @@
 'layerchart': minor
 ---
 
-feat: Support css-only usage (no Tailwind required) while retaining first-class Tailwind support
+feat: Support css-only usage (no Tailwind required) while still providing first-class Tailwind support

.github/workflows/build-preview.yml

@@ -24,7 +24,7 @@ jobs:
         run: pnpm install
 
       - name: Build site
-        run: pnpm build:packages
+        run: pnpm build
 
       - name: Upload build artifact
         uses: actions/upload-artifact@v4

.github/workflows/ci.yml

@@ -27,18 +27,12 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
-      - run: pnpm check:packages
+      - run: pnpm check
 
-      - run: pnpm lint:packages
+      - run: pnpm lint
 
       - run: pnpm test:unit
         env:
           CI: true
 
-      - run: pnpm build:packages
-
-      - run: pnpm build:examples
-
-      # Run after building to ensure svelte-package is ran
-      - run: pnpm check:examples
-      - run: pnpm lint:examples
+      - run: pnpm build

.github/workflows/deploy-prod.yml

@@ -26,7 +26,7 @@ jobs:
         run: pnpm install
 
       - name: Build site
-        run: pnpm build:packages
+        run: pnpm build
 
       - name: Deploy to Cloudflare Pages
         uses: AdrianGonz97/refined-cf-pages-action@v1

.github/workflows/pkg-pr-new.yml

@@ -16,7 +16,7 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
-      - run: pnpm build:packages
+      - run: pnpm build
 
       - run: pnpm package
 

examples/daisyui-5/src/app.css

@@ -1,3 +1,3 @@
 @import 'tailwindcss';
 @plugin "daisyui";
-@import 'layerchart/daisyui-5.css';
+@import 'layerchart/daisyui.css';

examples/shadcn-svelte-1/.prettierignore

@@ -7,7 +7,3 @@ bun.lockb
 
 # Miscellaneous
 /static/
-
-# Ignore shadcn/ui components and utils
-src/lib/components/ui/
-src/lib/utils.ts

examples/skeleton-3/src/app.css

@@ -4,7 +4,7 @@
 @import '@skeletonlabs/skeleton/optional/presets';
 @import '@skeletonlabs/skeleton/themes/cerberus';
 
-@import 'layerchart/skeleton-3.css';
+@import 'layerchart/skeleton.css';
 
 @source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
 

examples/svelte-ux-2/package.json

@@ -19,7 +19,7 @@
 		"@sveltejs/kit": "^2.22.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
 		"@tailwindcss/vite": "^4.0.0",
-		"layerchart": "workspace:*",
+		"layerchart": "workspace:2.0.0-next.38",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",

package.json

@@ -4,17 +4,13 @@
   "author": "Sean Lynch <[email protected]>",
   "license": "MIT",
   "type": "module",
-  "homepage": "https://layerchart.com",
   "scripts": {
     "dev": "pnpm -r dev",
     "test:unit": "pnpm -r test:unit",
-    "build:packages": "rimraf packages/*/dist && pnpm --filter './packages/*' build",
-    "build:examples": "rimraf packages/*/dist && pnpm --filter './packages/*' package &&  pnpm --filter './examples/*' build",
-    "package": "pnpm --filter './packages/*' package",
-    "check:packages": "pnpm --filter './packages/*' check",
-    "check:examples": "pnpm --filter './examples/*' check",
-    "lint:packages": "pnpm --filter './packages/*' lint",
-    "lint:examples": "pnpm --filter './examples/*' lint",
+    "build": "rimraf packages/*/dist && pnpm -r build",
+    "package": "pnpm -r package",
+    "check": "pnpm -r check",
+    "lint": "pnpm -r lint",
     "format": "pnpm -r format",
     "changeset": "changeset",
     "changeset:version": "changeset version",
@@ -33,4 +29,4 @@
       "esbuild"
     ]
   }
-}
+}

packages/layerchart/src/lib/components/Grid.svelte

@@ -182,7 +182,6 @@
 
       <!-- Add extra rule after last band -->
       {#if isScaleBand(ctx.xScale) && bandAlign === 'between' && !ctx.radial && xTickVals.length}
-        {@const x = ctx.xScale(xTickVals[xTickVals.length - 1])! + ctx.xScale.step() + xBandOffset}
         <Rule
           x={xTickVals[xTickVals.length - 1]}
           xOffset={ctx.xScale.step() + xBandOffset}
@@ -218,11 +217,9 @@
             />
           {/if}
         {:else}
-          <Line
-            x1={ctx.xRange[0]}
-            y1={ctx.yScale(y) + yBandOffset}
-            x2={ctx.xRange[1]}
-            y2={ctx.yScale(y) + yBandOffset}
+          <Rule
+            {y}
+            yOffset={yBandOffset}
             {motion}
             {...splineProps}
             class={cls('lc-grid-y-rule', classes.line, splineProps?.class)}
@@ -240,13 +237,9 @@
             class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
           />
         {:else}
-          {@const y =
-            ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
-          <Line
-            x1={ctx.xRange[0]}
-            y1={y}
-            x2={ctx.xRange[1]}
-            y2={y}
+          <Rule
+            y={yTickVals[yTickVals.length - 1]}
+            yOffset={ctx.yScale.step() + yBandOffset}
             {motion}
             {...splineProps}
             class={cls('lc-grid-y-end-rule', classes.line, splineProps?.class)}

packages/layerchart/src/lib/components/Group.svelte

@@ -197,11 +197,3 @@
     {@render children?.()}
   </div>
 {/if}
-
-<style>
-  @layer base {
-    :where(.lc-group-div) {
-      position: absolute;
-    }
-  }
-</style>

packages/layerchart/src/lib/components/Legend.svelte

@@ -435,57 +435,56 @@
         right: 0;
       }
     }
+  }
 
-    :where(.lc-legend-title) {
-      font-size: 10px;
-      font-weight: 600;
-    }
+  :where(.lc-legend-title) {
+    font-size: 10px;
+    font-weight: 600;
+  }
 
-    :where(.lc-legend-ramp-svg) {
-      overflow: visible;
-    }
+  :where(.lc-legend-ramp-svg) {
+    overflow: visible;
+  }
 
-    :where(.lc-legend-tick-text) {
-      font-size: 10px;
-      fill: var(--color-surface-content, currentColor);
-    }
+  :where(.lc-legend-tick-text) {
+    font-size: 10px;
+    fill: var(--color-surface-content, currentColor);
+  }
 
-    :where(.lc-legend-tick-line) {
-      stroke: var(--color-surface-content, currentColor);
-    }
+  :where(.lc-legend-tick-line) {
+    stroke: var(--color-surface-content, currentColor);
+  }
 
-    :where(.lc-legend-swatch-group) {
-      display: flex;
-      gap: 0.25rem 1rem;
+  :where(.lc-legend-swatch-group) {
+    display: flex;
+    gap: 0.25rem 1rem;
 
-      &[data-orientation='vertical'] {
-        flex-direction: column;
-      }
+    &[data-orientation='vertical'] {
+      flex-direction: column;
     }
+  }
 
-    :where(.lc-legend-swatch-button) {
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+  :where(.lc-legend-swatch-button) {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-    :where(.lc-legend-swatch) {
-      width: 16px;
-      height: 16px;
-      flex-shrink: 0;
-      border-radius: 9999px; /* full */
-    }
+  :where(.lc-legend-swatch) {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    border-radius: 9999px; /* full */
+  }
 
-    :where(.lc-legend-swatch-label) {
-      font-size: 0.75rem; /* text-xs */
-      line-height: calc(1 / 0.75);
-      color: var(--color-surface-content, currentColor);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+  :where(.lc-legend-swatch-label) {
+    font-size: 0.75rem; /* text-xs */
+    color: var(--color-surface-content, currentColor);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 </style>

packages/layerchart/src/lib/components/Rule.svelte

@@ -223,25 +223,30 @@
 
 <style>
   @layer components {
-    /* TODO: better way to handle this without affecting other components? */
-    /* Could add a layer between "components" and "base" but would require more setup (and not alignw with TW layers) */
-    :global(
-      :where(
-        .lc-rule-x-line,
-        .lc-rule-y-line,
-        .lc-rule-x-radial-line,
-        .lc-rule-y-radial-circle
-      ):not([class*='lc-axis'], [class*='lc-grid'])
-    ) {
+    :global(:where(.lc-rule-x-line, .lc-rule-y-line)) {
       --stroke-color: color-mix(
         in oklab,
         var(--color-surface-content, currentColor) 50%,
         transparent
       );
     }
 
+    :global(:where(.lc-rule-x-radial-line)) {
+      /* STYLE-TODO: should this be 10% or 50% like .lc-rule-x-line? */
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+
     :global(:where(.lc-rule-y-radial-circle)) {
       --fill-color: none;
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
     }
   }
 </style>

packages/layerchart/src/lib/components/charts/ArcChart.svelte

@@ -251,6 +251,10 @@
           const item = chartData.find((d) => keyAccessor(d) === tick);
           return item ? (labelAccessor(item) ?? tick) : tick;
         },
+        onclick: (e, item) => {
+          // Select data keys instead of series value
+          seriesState.selectedKeys.toggle(item.value);
+        },
         ...props.legend,
         ...getObjectOrNull(legend),
       },

packages/layerchart/src/lib/components/charts/LineChart.svelte

@@ -178,11 +178,11 @@
       x: isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
       y: !isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
       stroke: s.color,
+      ...props.spline,
+      ...s.props,
       opacity:
         // Checking `visibleSeries.length <= 1` fixes re-animated tweened areas on hover
         seriesState.visibleSeries.length <= 1 || seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
-      ...props.spline,
-      ...s.props,
       class: cls(props.spline?.class, s.props?.class),
     };
 

packages/layerchart/src/lib/components/charts/PieChart.svelte

@@ -265,6 +265,10 @@
           const item = chartData.find((d) => keyAccessor(d) === tick);
           return item ? (labelAccessor(item) ?? tick) : tick;
         },
+        onclick: (e, item) => {
+          // Select data keys instead of series value
+          seriesState.selectedKeys.toggle(item.value);
+        },
         ...props.legend,
         ...getObjectOrNull(legend),
       },
@@ -415,8 +419,7 @@
           {@render marks(snippetProps)}
         {:else}
           <Group {...getGroupProps()}>
-            <!-- Use `series` instead of `visibleSeries` since data is filtered (legend) instead of series -->
-            {#each series as s, seriesIdx (s.key)}
+            {#each seriesState.visibleSeries as s, seriesIdx (s.key)}
               {#if typeof pie === 'function'}
                 {@render pie({
                   ...snippetProps,