@dryui/ui 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/carousel/carousel-viewport.svelte +1 -1
  2. package/dist/chromatic-aberration/chromatic-aberration.svelte +9 -53
  3. package/package.json +2 -2
  4. package/skills/dryui/SKILL.md +32 -9
package/dist/carousel/carousel-viewport.svelte CHANGED
@@ -49,7 +49,7 @@
49
49
 
50
50
  display: grid;
51
51
  grid-auto-flow: column;
52
- grid-auto-columns: minmax(0, var(--dry-carousel-slide-size));
52
+ grid-auto-columns: var(--dry-carousel-slide-size);
53
53
  overflow: auto;
54
54
  scroll-snap-type: x mandatory;
55
55
  gap: var(--dry-carousel-gap);
package/dist/chromatic-aberration/chromatic-aberration.svelte CHANGED
@@ -25,72 +25,28 @@
25
25
  <svg data-chromatic-aberration-svg width="0" height="0" aria-hidden="true">
26
26
  <defs>
27
27
  <filter id={filterId} color-interpolation-filters="sRGB">
28
- <feOffset in="SourceGraphic" dx={offsetX} dy={offsetY} result="lightRed" />
28
+ <feOffset in="SourceGraphic" dx={offsetX} dy={offsetY} result="red" />
29
29
  <feColorMatrix
30
- in="lightRed"
30
+ in="red"
31
31
  type="matrix"
32
32
  values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
33
- result="lightRedOnly"
33
+ result="redOnly"
34
34
  />
35
- <feOffset in="SourceGraphic" dx={-offsetX} dy={-offsetY} result="lightBlue" />
35
+ <feOffset in="SourceGraphic" dx={-offsetX} dy={-offsetY} result="blue" />
36
36
  <feColorMatrix
37
- in="lightBlue"
37
+ in="blue"
38
38
  type="matrix"
39
39
  values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0"
40
- result="lightBlueOnly"
40
+ result="blueOnly"
41
41
  />
42
42
  <feColorMatrix
43
43
  in="SourceGraphic"
44
44
  type="matrix"
45
45
  values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0"
46
- result="lightGreenOnly"
46
+ result="greenOnly"
47
47
  />
48
- <feBlend in="lightRedOnly" in2="lightGreenOnly" mode="screen" result="lightRG" />
49
- <feBlend in="lightRG" in2="lightBlueOnly" mode="screen" result="lightSplit" />
50
- <feColorMatrix
51
- in="SourceGraphic"
52
- type="matrix"
53
- values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"
54
- result="darkSource"
55
- />
56
- <feOffset in="darkSource" dx={offsetX} dy={offsetY} result="darkRed" />
57
- <feColorMatrix
58
- in="darkRed"
59
- type="matrix"
60
- values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
61
- result="darkRedOnly"
62
- />
63
- <feOffset in="darkSource" dx={-offsetX} dy={-offsetY} result="darkBlue" />
64
- <feColorMatrix
65
- in="darkBlue"
66
- type="matrix"
67
- values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0"
68
- result="darkBlueOnly"
69
- />
70
- <feColorMatrix
71
- in="darkSource"
72
- type="matrix"
73
- values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0"
74
- result="darkGreenOnly"
75
- />
76
- <feBlend in="darkRedOnly" in2="darkGreenOnly" mode="screen" result="darkRG" />
77
- <feBlend in="darkRG" in2="darkBlueOnly" mode="screen" result="darkSplitInverted" />
78
- <feColorMatrix
79
- in="darkSplitInverted"
80
- type="matrix"
81
- values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"
82
- result="darkSplit"
83
- />
84
- <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="lightMask" />
85
- <feComponentTransfer in="lightMask" result="darkMask">
86
- <feFuncA type="table" tableValues="1 0" />
87
- </feComponentTransfer>
88
- <feComposite in="lightSplit" in2="lightMask" operator="in" result="lightApplied" />
89
- <feComposite in="darkSplit" in2="darkMask" operator="in" result="darkApplied" />
90
- <feMerge>
91
- <feMergeNode in="lightApplied" />
92
- <feMergeNode in="darkApplied" />
93
- </feMerge>
48
+ <feBlend in="redOnly" in2="greenOnly" mode="screen" result="rg" />
49
+ <feBlend in="rg" in2="blueOnly" mode="screen" />
94
50
  </filter>
95
51
  </defs>
96
52
  </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dryui/ui",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "author": "Rob Balfre",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -1502,7 +1502,7 @@
1502
1502
  "thumbnail:create": "bun scripts/create-thumbnail.ts"
1503
1503
  },
1504
1504
  "dependencies": {
1505
- "@dryui/primitives": "^0.1.4"
1505
+ "@dryui/primitives": "^0.1.5"
1506
1506
  },
1507
1507
  "peerDependencies": {
1508
1508
  "svelte": "^5.55.1"
package/skills/dryui/SKILL.md CHANGED
@@ -18,9 +18,29 @@ Key facts:
18
18
 
19
19
  ## Quick Start (new SvelteKit project)
20
20
 
21
- 1. `bun add @dryui/ui`
22
- 2. Add `class="theme-auto"` to `<html>` in `src/app.html`
23
- 3. In your root layout (`src/routes/+layout.svelte`):
21
+ Run the install planner — it detects the project and returns a tailored
22
+ step-by-step plan:
23
+
24
+ ```
25
+ npx -y @dryui/cli install --json
26
+ ```
27
+
28
+ Execute each `"pending"` step in the returned JSON (install package, edit/create
29
+ files). Then verify:
30
+
31
+ ```
32
+ npx -y @dryui/cli detect --json
33
+ ```
34
+
35
+ The output should show `"status": "ready"`.
36
+
37
+ ### Manual setup (if you prefer)
38
+
39
+ 1. `bun add @dryui/ui` (or npm/pnpm/yarn equivalent)
40
+ 2. In `src/app.html`, add `class="theme-auto"` to the `<html>` tag (preserving
41
+ existing attributes like `lang="en"`)
42
+ 3. In your root layout (`src/routes/+layout.svelte`), add theme imports to the
43
+ existing `<script>` block — do not create a second `<script>`:
24
44
  ```svelte
25
45
  <script>
26
46
  import '@dryui/ui/themes/default.css';
@@ -28,7 +48,7 @@ Key facts:
28
48
  </script>
29
49
  ```
30
50
  4. Import `app.css` AFTER theme CSS if you have custom styles
31
- 5. (Optional) Override semantic tokens in `app.css` — use the layered token system documented in `rules/theming.md` rather than the old 18-token list. Start with the current surface, text, stroke, fill, and brand tokens such as `--dry-color-bg-base`, `--dry-color-bg-raised`, `--dry-color-text-strong`, `--dry-color-text-weak`, `--dry-color-fill-brand`, `--dry-color-fill`, `--dry-color-stroke-weak`, and their `on-*` / state variants.
51
+ 5. (Optional) Override semantic tokens in `app.css` — use the layered token system documented in `rules/theming.md`
32
52
 
33
53
  > **Local dev:** If `@dryui/ui` is not on npm, link from the monorepo:
34
54
  > `cd /path/to/dryui/packages/ui && bun link && cd /your/project && bun link @dryui/ui`
@@ -45,7 +65,7 @@ Key facts:
45
65
  <Card.Root>content</Card.Root>
46
66
  ```
47
67
 
48
- Compound components include Accordion, Alert, AlertDialog, Breadcrumb, Card, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, DataGrid, DatePicker, Dialog, DragAndDrop, Drawer, DropdownMenu, EmptyState, Field, FileUpload, FloatButton, Pagination, Popover, RadioGroup, RichTextEditor, Select, Splitter, Stepper, Table, Tabs, TagsInput, Toast, ToggleGroup, Toolbar, Tooltip, Tour, and Transfer. See `rules/compound-components.md` for parts lists.
68
+ Compound components include Accordion, Alert, AlertDialog, Breadcrumb, Calendar, Card, Carousel, Chart, ChipGroup, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, DataGrid, DateField, DatePicker, DateRangePicker, DescriptionList, Dialog, DragAndDrop, Drawer, DropdownMenu, Field, Fieldset, FileSelect, FileUpload, FlipCard, FloatButton, HoverCard, InputGroup, LinkPreview, List, Listbox, Map, MegaMenu, Menubar, MultiSelectCombobox, NavigationMenu, NotificationCenter, OptionSwatchGroup, Pagination, PinInput, Popover, RadioGroup, RangeCalendar, RichTextEditor, SegmentedControl, Select, Sidebar, Splitter, StarRating, Stepper, Table, TableOfContents, Tabs, TagsInput, Timeline, Toast, ToggleGroup, Toolbar, Tooltip, Tour, Transfer, Tree, and Typography. See `rules/compound-components.md` for parts lists.
49
69
 
50
70
  ### Rule 2: Always import a theme
51
71
 
@@ -88,17 +108,20 @@ Bindable props vary by component:
88
108
 
89
109
  Select and Combobox support both `bind:value` and `bind:open`. ColorPicker also exposes `bind:alpha`. Transfer uses `bind:sourceItems` and `bind:targetItems`.
90
110
 
91
- ### Rule 4: Use layout components instead of manual CSS
111
+ ### Rule 4: Use CSS grid for layout, Container for width
92
112
 
93
113
  ```svelte
94
114
  <!-- Incorrect -->
95
115
  <div style="display: flex; gap: 1rem;">...</div>
96
116
 
97
- <!-- Correct -->
98
- <Flex gap="md">...</Flex>
117
+ <!-- Correct — raw CSS grid in scoped <style> -->
118
+ <div class="layout">...</div>
119
+ <style>
120
+ .layout { display: grid; gap: var(--dry-space-4); }
121
+ </style>
99
122
  ```
100
123
 
101
- Layout components: Stack, Flex, Grid, Container, Spacer. See `rules/composition.md`.
124
+ Use `display: grid` with `--dry-space-*` tokens for layout. Use `Container` for constrained content width. Use `@container` queries for responsive sizing — never `@media` for layout breakpoints. Do not use inline styles.
102
125
 
103
126
  ### Rule 5: Wrap form inputs in Field.Root
104
127