@turnipxenon/pineapple 3.0.0-alpha.1 → 3.0.0-alpha.4

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 (83) hide show
  1. package/dist/assets/icons/icon-check-dark-contrast.svg +1 -0
  2. package/dist/assets/icons/icon-check-light-contrast.svg +1 -0
  3. package/dist/assets/icons/icon-copy-dark-contrast.svg +1 -0
  4. package/dist/assets/icons/icon-copy-light-contrast.svg +1 -0
  5. package/dist/components/PineappleSlideToggle.svelte +12 -6
  6. package/dist/components/PineappleSlideToggle.svelte.d.ts +3 -2
  7. package/dist/components/dialog_manager/DialogManager.d.ts +14 -0
  8. package/dist/components/dialog_manager/DialogManager.js +14 -0
  9. package/dist/components/dialog_manager/DialogManagerStore.d.ts +0 -15
  10. package/dist/components/dialog_manager/DialogManagerStore.js +0 -15
  11. package/dist/components/dialog_manager/behavior_tree/line_processors/commands/JumpCommand.js +1 -1
  12. package/dist/components/dialog_overlay/DialogOverlay.svelte +1 -1
  13. package/dist/components/pineapple/PineappleBaseLayout.svelte +2 -1
  14. package/dist/styles/app.css +92 -1
  15. package/dist/styles/turnip-theme.css +6 -2
  16. package/dist/template/seaweed/CreateUrlForm.svelte +17 -11
  17. package/dist/template/seaweed/CreateUrlForm.svelte.d.ts +4 -1
  18. package/dist/template/seaweed/ToastSettings.d.ts +15 -0
  19. package/dist/template/seaweed/ToastSettings.js +1 -0
  20. package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte +34 -1
  21. package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts +0 -1
  22. package/dist/ui/elements/CodeBlock/CodeBlock.svelte +65 -0
  23. package/dist/ui/elements/CodeBlock/CodeBlock.svelte.d.ts +5 -0
  24. package/dist/ui/elements/CodeBlock/CodeBlockProps.d.ts +11 -0
  25. package/dist/ui/elements/CodeBlock/CodeBlockProps.js +1 -0
  26. package/dist/ui/elements/CodeBlock/index.d.ts +2 -0
  27. package/dist/ui/elements/CodeBlock/index.js +2 -0
  28. package/dist/ui/elements/PineappleSwitch.svelte +29 -0
  29. package/dist/ui/elements/PineappleSwitch.svelte.d.ts +10 -0
  30. package/dist/ui/elements/index.d.ts +10 -8
  31. package/dist/ui/elements/index.js +10 -8
  32. package/dist/ui/elements/pinya-card/component.svelte +10 -8
  33. package/dist/ui/elements/pinya-card/component.svelte.d.ts +3 -3
  34. package/dist/ui/elements/pinya-card/props.d.ts +3 -0
  35. package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte +35 -0
  36. package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte.d.ts +18 -0
  37. package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.d.ts +18 -0
  38. package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.js +1 -0
  39. package/dist/ui/elements/text-chip/TextChip.svelte +15 -0
  40. package/dist/ui/elements/text-chip/TextChip.svelte.d.ts +4 -0
  41. package/dist/ui/elements/text-chip/TextChipProps.d.ts +4 -0
  42. package/dist/ui/elements/text-chip/TextChipProps.js +1 -0
  43. package/dist/ui/elements/text-chip/index.d.ts +2 -0
  44. package/dist/ui/elements/text-chip/index.js +2 -0
  45. package/dist/ui/modules/index.d.ts +2 -1
  46. package/dist/ui/modules/index.js +2 -1
  47. package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte +10 -20
  48. package/dist/ui/modules/projects/Hepcat.svelte +71 -0
  49. package/dist/ui/modules/projects/Hepcat.svelte.d.ts +22 -0
  50. package/dist/ui/modules/projects/Pengi.svelte +60 -0
  51. package/dist/ui/modules/projects/Pengi.svelte.d.ts +22 -0
  52. package/dist/ui/modules/projects/Soulwork.svelte +55 -0
  53. package/dist/ui/modules/projects/Soulwork.svelte.d.ts +22 -0
  54. package/dist/ui/modules/projects/ThisWebpage.svelte +62 -0
  55. package/dist/ui/modules/projects/ThisWebpage.svelte.d.ts +22 -0
  56. package/dist/ui/modules/projects/index.d.ts +4 -0
  57. package/dist/ui/modules/projects/index.js +4 -0
  58. package/dist/ui/modules/seaweed/ChumBucket.svelte +36 -37
  59. package/dist/ui/templates/PinyaBase.svelte +9 -6
  60. package/dist/ui/templates/PinyaBase.svelte.d.ts +1 -1
  61. package/dist/ui/templates/index.d.ts +3 -2
  62. package/dist/ui/templates/index.js +3 -2
  63. package/dist/ui/templates/pinya-page-layout/component.svelte +17 -10
  64. package/dist/ui/templates/pinya-page-layout/component.svelte.d.ts +2 -1
  65. package/dist/ui/templates/seaweed-layout/EntryGroup.svelte +89 -0
  66. package/dist/ui/templates/seaweed-layout/EntryGroup.svelte.d.ts +4 -0
  67. package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte +45 -0
  68. package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte.d.ts +9 -0
  69. package/dist/ui/templates/seaweed-layout/ProjectComponentProps.d.ts +4 -0
  70. package/dist/ui/templates/seaweed-layout/ProjectComponentProps.js +1 -0
  71. package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte +316 -0
  72. package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte.d.ts +14 -0
  73. package/dist/ui/templates/seaweed-layout/SeaweedLayout.md +4 -0
  74. package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte +196 -0
  75. package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte.d.ts +4 -0
  76. package/dist/ui/templates/seaweed-layout/index.d.ts +4 -0
  77. package/dist/ui/templates/seaweed-layout/index.js +4 -0
  78. package/dist/ui/templates/seaweed-layout/props.d.ts +25 -0
  79. package/dist/ui/templates/seaweed-layout/props.js +1 -0
  80. package/dist/util/util.d.ts +1 -0
  81. package/dist/util/util.js +9 -0
  82. package/package.json +5 -6
  83. package/src/lib/styles/app.css +92 -1
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFDF6"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#4C473B"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFDF6"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#4C473B"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>
@@ -1,24 +1,30 @@
1
1
  <script lang="ts">
2
2
 
3
3
  import { Switch } from "@skeletonlabs/skeleton-svelte";
4
+ import type { Snippet } from "svelte";
5
+
4
6
  interface Props {
5
7
  checked?: boolean;
6
8
  name: string;
7
- onChange?: undefined | (() => void);
8
- children?: import('svelte').Snippet;
9
+ onChange?: (() => void);
10
+ children?: Snippet;
9
11
  }
10
12
 
11
13
  let {
12
14
  checked = $bindable(false),
13
15
  name,
14
16
  onChange = undefined,
15
- children
17
+ children = undefined,
16
18
  }: Props = $props();
17
19
  </script>
18
20
 
19
21
  <Switch name={name}
20
- background="bg-surface-700 dark:bg-surface-700"
21
- bind:checked={checked}
22
- on:change={onChange}>
22
+ controlBase="bg-red-500"
23
+ checked={checked}
24
+ onCheckedChange={(e) => {
25
+ checked = e.checked;
26
+ onChange?.();
27
+ }}
28
+ >
23
29
  {@render children?.()}
24
30
  </Switch>
@@ -1,8 +1,9 @@
1
+ import type { Snippet } from "svelte";
1
2
  interface Props {
2
3
  checked?: boolean;
3
4
  name: string;
4
- onChange?: undefined | (() => void);
5
- children?: import('svelte').Snippet;
5
+ onChange?: (() => void);
6
+ children?: Snippet;
6
7
  }
7
8
  declare const PineappleSlideToggle: import("svelte").Component<Props, {}, "checked">;
8
9
  type PineappleSlideToggle = ReturnType<typeof PineappleSlideToggle>;
@@ -79,3 +79,17 @@ export declare class DialogManager {
79
79
  toggleDialogOverlay(): void;
80
80
  parseAndSetDialogTree(dialogYarn: string): Promise<DialogDetail[]>;
81
81
  }
82
+ /**
83
+ * strictly must be declared last! or you might receive a weird error that looks like:
84
+ *
85
+ * 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
86
+ * |- TypeError: Cannot read properties of undefined (reading '0')
87
+ * at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
88
+ * at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
89
+ * at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
90
+ * at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
91
+ *
92
+ * what this means is that one member of dialogManager cannot be initialized. in our case, it was the
93
+ * defaultDialogMessage not yet being initialized
94
+ */
95
+ export declare const dialogManager: DialogManager;
@@ -261,3 +261,17 @@ export class DialogManager {
261
261
  });
262
262
  }
263
263
  }
264
+ /**
265
+ * strictly must be declared last! or you might receive a weird error that looks like:
266
+ *
267
+ * 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
268
+ * |- TypeError: Cannot read properties of undefined (reading '0')
269
+ * at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
270
+ * at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
271
+ * at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
272
+ * at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
273
+ *
274
+ * what this means is that one member of dialogManager cannot be initialized. in our case, it was the
275
+ * defaultDialogMessage not yet being initialized
276
+ */
277
+ export const dialogManager = new DialogManager();
@@ -4,7 +4,6 @@
4
4
  */
5
5
  import type { DialogMapStore } from "../../types/pineapple_fiber/DialogVariableStore";
6
6
  import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
7
- import { DialogManager } from "./DialogManager";
8
7
  /**
9
8
  * Enables the dialogue overlay
10
9
  *
@@ -24,17 +23,3 @@ export declare const enableDialogueOverlay: import("svelte/store").Writable<bool
24
23
  export declare const dialogVariableStore: DialogMapStore;
25
24
  export declare const updateRate: number;
26
25
  export declare const defaultDialogMessage: DialogDetail[];
27
- /**
28
- * strictly must be declared last! or you might receive a weird error that looks like:
29
- *
30
- * 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
31
- * |- TypeError: Cannot read properties of undefined (reading '0')
32
- * at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
33
- * at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
34
- * at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
35
- * at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
36
- *
37
- * what this means is that one member of dialogManager cannot be initialized. in our case, it was the
38
- * defaultDialogMessage not yet being initialized
39
- */
40
- export declare const dialogManager: DialogManager;
@@ -4,7 +4,6 @@
4
4
  */
5
5
  import { createNewMapStore } from "../../types/pineapple_fiber/DialogVariableStore";
6
6
  import { writable } from "svelte/store";
7
- import { DialogManager } from "./DialogManager";
8
7
  /**
9
8
  * Enables the dialogue overlay
10
9
  *
@@ -29,17 +28,3 @@ export const defaultDialogMessage = [
29
28
  textContent: `<p>I don't really have anything to say. Have you drank water? Or perhaps, you've checked out <a target="_blank" class="external-link" href="http://crouton.net">one of the best webpages</a> out there?`
30
29
  }
31
30
  ];
32
- /**
33
- * strictly must be declared last! or you might receive a weird error that looks like:
34
- *
35
- * 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
36
- * |- TypeError: Cannot read properties of undefined (reading '0')
37
- * at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
38
- * at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
39
- * at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
40
- * at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
41
- *
42
- * what this means is that one member of dialogManager cannot be initialized. in our case, it was the
43
- * defaultDialogMessage not yet being initialized
44
- */
45
- export const dialogManager = new DialogManager();
@@ -1,7 +1,7 @@
1
1
  import { BehaviorStatus } from "../../core/BehaviorStatus";
2
2
  import { SetVariableNode } from "../SetVariableNode";
3
- import { dialogManager } from "../../../DialogManagerStore";
4
3
  import { btreeUtils } from "../../core/BTreeUtils";
4
+ import { dialogManager } from "../../../../..";
5
5
  export class JumpCommand {
6
6
  setVariableNode = new SetVariableNode();
7
7
  process(nodeArgs) {
@@ -1,8 +1,8 @@
1
1
  <script lang="ts">
2
2
  import AresHappy from "../../assets/characters/ares/ares_happy.webp";
3
3
  import { onMount } from "svelte";
4
- import { dialogManager } from "../dialog_manager/DialogManagerStore";
5
4
  import { DialogState } from "../../types/pineapple_fiber/DialogState";
5
+ import { dialogManager } from "../dialog_manager/DialogManager";
6
6
 
7
7
  let currentMessage = $state("");
8
8
  dialogManager.currentMessage.subscribe((value) => {
@@ -16,10 +16,11 @@
16
16
  import AresLogo from "../../assets/characters/ares/ares_logo.webp";
17
17
  import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
18
18
  import CloseIcon from "../../assets/icons/close.svg";
19
- import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
19
+ import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
20
20
  import Toast from "./toast/Toast.svelte";
21
21
  import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
22
22
  import { fade } from "svelte/transition";
23
+ import { dialogManager } from "../dialog_manager/DialogManager";
23
24
 
24
25
  interface Props {
25
26
  showDialogByDefault?: boolean;
@@ -4,7 +4,7 @@
4
4
  @import "@skeletonlabs/skeleton/themes/crimson";
5
5
  @import "./turnip-theme.css";
6
6
 
7
- @source "../node_modules/@skeletonlabs/skeleton-svelte/dist";
7
+ @source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
8
8
 
9
9
  @custom-variant dark (&:where(.dark, .dark *));
10
10
 
@@ -51,3 +51,94 @@ a.external-link {
51
51
  --tw-ring-color: rgb(var(--color-text-400));
52
52
  /*background-color: red;*/
53
53
  }
54
+
55
+ @layer base {
56
+ .game-link-section {
57
+ @apply mt-6 flex gap-2 justify-center;
58
+ }
59
+
60
+ .game-video-cover {
61
+ @apply rounded-t-lg max-h-64 object-cover w-full;
62
+ }
63
+
64
+ .text-chip-container {
65
+ display: flex;
66
+ flex-wrap: wrap;
67
+ gap: 0.5rem;
68
+ }
69
+
70
+ .text-chip {
71
+ background-color: var(--color-secondary-50-950) /* light-dark(var(--color-secondary-50), var(--color-secondary-950)) */;
72
+ color: var(--color-secondary-950-50) /* light-dark(var(--color-secondary-950), var(--color-secondary-50)) */;
73
+ }
74
+ }
75
+
76
+ /*https://shiki.style/guide/dual-themes*/
77
+ html.dark .shiki,
78
+ html.dark .shiki span {
79
+ color: var(--shiki-dark) !important;
80
+ background-color: var(--shiki-dark-bg) !important;
81
+ /* Optional, if you also want font styles */
82
+ font-style: var(--shiki-dark-font-style) !important;
83
+ font-weight: var(--shiki-dark-font-weight) !important;
84
+ text-decoration: var(--shiki-dark-text-decoration) !important;
85
+ }
86
+
87
+ .shiki {
88
+ span {
89
+ white-space: pre-wrap;
90
+ word-wrap: break-word;
91
+ }
92
+ }
93
+
94
+ /* region shiki copy button */
95
+ pre:has(code) {
96
+ position: relative;
97
+ }
98
+
99
+ pre button.copy {
100
+ position: absolute;
101
+ right: 16px;
102
+ top: 16px;
103
+ height: 28px;
104
+ width: 28px;
105
+ padding: 0;
106
+ display: flex;
107
+
108
+ & span {
109
+ width: 100%;
110
+ aspect-ratio: 1 / 1;
111
+ background-repeat: no-repeat;
112
+ background-position: center;
113
+ background-size: cover;
114
+ }
115
+
116
+ & .ready {
117
+ background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
118
+
119
+ @variant dark {
120
+ background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");
121
+ }
122
+ }
123
+
124
+ & .success {
125
+ display: none;
126
+ background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
127
+
128
+ @variant dark {
129
+ background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");
130
+ }
131
+ }
132
+
133
+ &.copied {
134
+ & .success {
135
+ display: block;
136
+ }
137
+
138
+ & .ready {
139
+ display: none;
140
+ }
141
+ }
142
+ }
143
+
144
+ /* endregion shiki copy button */
@@ -246,7 +246,7 @@ html.dark {
246
246
  filter: brightness(140%);
247
247
  }
248
248
 
249
- h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3 {
249
+ h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
250
250
  text-align: center;
251
251
  margin-top: 0;
252
252
  font-weight: bolder;
@@ -257,6 +257,10 @@ html.dark {
257
257
  }
258
258
  }
259
259
 
260
+ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fake-h4 + p {
261
+ margin-top: 0.5lh;
262
+ }
263
+
260
264
  h1 {
261
265
  @apply text-4xl;
262
266
  }
@@ -269,7 +273,7 @@ html.dark {
269
273
  @apply text-2xl;
270
274
  }
271
275
 
272
- h4 {
276
+ h4, .fake-h4 {
273
277
  @apply text-xl;
274
278
  }
275
279
 
@@ -1,6 +1,12 @@
1
1
  <script lang="ts">
2
2
  import { type CreateUrlRequest, CreateUrlResult, jsonToCreateUrlResponse } from "../../types/api/CreateUrl";
3
- import { type ToastSettings } from "@skeletonlabs/skeleton-svelte";
3
+ import type { ToastContext } from "@skeletonlabs/skeleton-svelte";
4
+ import { getContext } from "svelte";
5
+ import type { ToastSettings } from "./ToastSettings";
6
+ import { PinyaButton } from "../../ui/elements/index";
7
+
8
+ export const toast: ToastContext = getContext("toast");
9
+
4
10
 
5
11
  interface Props {
6
12
  queryParams?: string;
@@ -8,8 +14,6 @@
8
14
 
9
15
  let { queryParams = "" }: Props = $props();
10
16
 
11
- const toastStore = getToastStore();
12
-
13
17
  let request: CreateUrlRequest = $state({
14
18
  queryParams: "",
15
19
  shortUrl: "",
@@ -22,14 +26,15 @@
22
26
 
23
27
 
24
28
  const failToast: ToastSettings = {
25
- message: "Adding new url failed"
29
+ title: "Adding new url failed",
30
+ type: "error"
26
31
  };
27
32
  const toastMap = new Map<CreateUrlResult, ToastSettings>([
28
33
  [CreateUrlResult.Success, {
29
- message: "Successfully added new url"
34
+ title: "Successfully added new url"
30
35
  }],
31
36
  [CreateUrlResult.Duplicate, {
32
- message: "Short url already used; try again with another url"
37
+ title: "Short url already used; try again with another url"
33
38
  }],
34
39
  [CreateUrlResult.Fail, failToast]
35
40
  ]);
@@ -44,7 +49,7 @@
44
49
  resp.json()
45
50
  ).then(json => {
46
51
  const properResp = jsonToCreateUrlResponse(json);
47
- toastStore.trigger(toastMap.get(properResp.result) ?? failToast);
52
+ toast.create(toastMap.get(properResp.result) ?? failToast);
48
53
  });
49
54
  };
50
55
  </script>
@@ -53,23 +58,24 @@
53
58
  <label for="short-url">Short URL for url shortener</label>
54
59
  <input bind:value={request.shortUrl}
55
60
  name="short-url"
56
- class="input"
61
+ class="input border-[2px] border-primary-500"
57
62
  type="text"
58
63
  placeholder="short-url" />
59
64
  <label for="password">Password</label>
60
65
  <input bind:value={request.password}
61
66
  name="password"
62
- class="input"
67
+ class="input border-[2px] border-primary-500"
63
68
  type="password"
64
69
  placeholder="ILoveTurnips" />
65
- <button class="send-link btn preset-filled" onclick={post}>Send link</button>
70
+ <PinyaButton onclick={post}>Send link</PinyaButton>
66
71
  </div>
67
72
 
68
73
  <style>
69
74
  .local-list {
70
75
  display: flex;
71
76
  flex-direction: column;
72
- gap: 0.25lh;
77
+ gap: 0.5lh;
78
+ margin-top: 1lh;
73
79
  }
74
80
 
75
81
  .send-link {
@@ -1,6 +1,9 @@
1
+ import type { ToastContext } from "@skeletonlabs/skeleton-svelte";
1
2
  interface Props {
2
3
  queryParams?: string;
3
4
  }
4
- declare const CreateUrlForm: import("svelte").Component<Props, {}, "">;
5
+ declare const CreateUrlForm: import("svelte").Component<Props, {
6
+ toast: ToastContext;
7
+ }, "">;
5
8
  type CreateUrlForm = ReturnType<typeof CreateUrlForm>;
6
9
  export default CreateUrlForm;
@@ -0,0 +1,15 @@
1
+ export interface ToastSettings {
2
+ /** The unique toast ID. */
3
+ id?: string;
4
+ /** The unique toast title text. */
5
+ title?: string;
6
+ /** The unique toast description text. */
7
+ description?: string;
8
+ /**
9
+ * Define the toast type.
10
+ * @default info
11
+ */
12
+ type?: "info" | "error" | "success";
13
+ /** The duration of the toast. Default varies by type. */
14
+ duration?: number;
15
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -8,7 +8,6 @@
8
8
  import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
9
9
  import CloseIcon from "../../../assets/icons/close.svg";
10
10
  import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
11
- import "./entry-order-config.postcss";
12
11
 
13
12
  interface Props {
14
13
  seaweedTemplateData: SeaweedTemplateData;
@@ -260,5 +259,39 @@
260
259
  tfoot > tr {
261
260
  display: flex;
262
261
  }
262
+ .btn-group > button {
263
+ padding: 0.3em 0.75em;
264
+ }
265
+
266
+ .btn-group-header > h2 {
267
+ font-weight: bolder;
268
+ padding-top: 1lh;
269
+ padding-bottom: 1lh;
270
+ margin-bottom: 0;
271
+ padding-inline-start: 1em;
272
+ }
273
+
274
+ .dark .btn-group-header > h2 {
275
+ color: rgb(var(--theme-font-color-dark));
276
+ }
277
+
278
+ .dark .entry-group {
279
+ background-color: rgb(var(--color-surface-800));
280
+ }
263
281
 
282
+ tbody tr:nth-child(odd) {
283
+ background-color: rgb(var(--color-surface-500));
284
+ }
285
+
286
+ .dark tbody tr:nth-child(odd) {
287
+ background-color: rgb(var(--color-surface-900));
288
+ }
289
+
290
+ tbody tr:nth-child(even) {
291
+ background-color: rgb(var(--color-surface-200));
292
+ }
293
+
294
+ .dark tbody tr:nth-child(even) {
295
+ background-color: rgb(var(--color-surface-800));
296
+ }
264
297
  </style>
@@ -1,5 +1,4 @@
1
1
  import { type ComponentMeta, type EntryGroup, type SeaweedTemplateData } from "../SeaweedTemplateData";
2
- import "./entry-order-config.postcss";
3
2
  interface Props {
4
3
  seaweedTemplateData: SeaweedTemplateData;
5
4
  seaweedEntries: EntryGroup[];
@@ -0,0 +1,65 @@
1
+ <!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
2
+
3
+ <script module>
4
+ import { addCopyButton } from "shiki-transformer-copy-button";
5
+ import { createHighlighterCoreSync } from "shiki/core";
6
+ import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
7
+ // Themes
8
+ // https://shiki.style/themes
9
+ import themeLight from "shiki/themes/catppuccin-latte.mjs";
10
+ import themeDark from "shiki/themes/catppuccin-frappe.mjs";
11
+ // Languages
12
+ // https://shiki.style/languages
13
+ import console from "shiki/langs/console.mjs";
14
+ import html from "shiki/langs/html.mjs";
15
+ import css from "shiki/langs/css.mjs";
16
+ import js from "shiki/langs/javascript.mjs";
17
+ import ts from "shiki/langs/typescript.mjs";
18
+ import markdown from "shiki/langs/markdown.mjs";
19
+
20
+ // https://shiki.style/guide/sync-usage
21
+ const shiki = createHighlighterCoreSync({
22
+ engine: createJavaScriptRegexEngine(),
23
+ // Implement your import theme.
24
+ themes: [themeLight, themeDark],
25
+ // Implement your imported and supported languages.
26
+ langs: [console, html, css, js, ts, markdown]
27
+ });
28
+ </script>
29
+
30
+ <script lang="ts">
31
+ import type { CodeBlockProps } from "./CodeBlockProps";
32
+
33
+ let {
34
+ code = "",
35
+ lang = "console",
36
+ // Base Style Props
37
+ base = " overflow-hidden",
38
+ rounded = "rounded-container",
39
+ shadow = "",
40
+ classes = "",
41
+ // Pre Style Props
42
+ preBase = "",
43
+ prePadding = "[&>pre]:p-4",
44
+ preClasses = ""
45
+ }: CodeBlockProps = $props();
46
+
47
+ // Shiki convert to HTML
48
+ const generatedHtml = $derived(shiki.codeToHtml(code, {
49
+ lang,
50
+ themes: {
51
+ light: "catppuccin-latte",
52
+ dark: "catppuccin-frappe"
53
+ },
54
+ transformers: [
55
+ addCopyButton({ toggle: 2000 })
56
+ ]
57
+ }));
58
+ </script>
59
+
60
+ <div
61
+ class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
62
+ >
63
+ <!-- Output Shiki's Generated HTML -->
64
+ {@html generatedHtml}
65
+ </div>
@@ -0,0 +1,5 @@
1
+ import type { CodeBlockProps } from "./CodeBlockProps";
2
+ /** Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ */
3
+ declare const CodeBlock: import("svelte").Component<CodeBlockProps, {}, "">;
4
+ type CodeBlock = ReturnType<typeof CodeBlock>;
5
+ export default CodeBlock;
@@ -0,0 +1,11 @@
1
+ export interface CodeBlockProps {
2
+ code?: string;
3
+ lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown';
4
+ base?: string;
5
+ rounded?: string;
6
+ shadow?: string;
7
+ classes?: string;
8
+ preBase?: string;
9
+ prePadding?: string;
10
+ preClasses?: string;
11
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ export { default as CodeBlock } from "./CodeBlock.svelte";
2
+ export * from "./CodeBlockProps";
@@ -0,0 +1,2 @@
1
+ export { default as CodeBlock } from "./CodeBlock.svelte";
2
+ export * from "./CodeBlockProps";
@@ -0,0 +1,29 @@
1
+ <script lang="ts">
2
+ import { Switch } from "@skeletonlabs/skeleton-svelte";
3
+ import type { Snippet } from "svelte";
4
+
5
+ interface Props {
6
+ checked?: boolean;
7
+ name: string;
8
+ onChange?: (() => void);
9
+ children?: Snippet;
10
+ }
11
+
12
+ let {
13
+ checked = $bindable(false),
14
+ name,
15
+ onChange = undefined,
16
+ children = undefined
17
+ }: Props = $props();
18
+ </script>
19
+
20
+ <Switch name={name}
21
+ controlActive="bg-secondary-400 dark:bg-secondary-500"
22
+ controlInactive="bg-surface-700 dark:bg-surface-800"
23
+ checked={checked}
24
+ onCheckedChange={(e) => {
25
+ checked = e.checked;
26
+ onChange?.();
27
+ }}>
28
+ {@render children?.()}
29
+ </Switch>
@@ -0,0 +1,10 @@
1
+ import type { Snippet } from "svelte";
2
+ interface Props {
3
+ checked?: boolean;
4
+ name: string;
5
+ onChange?: (() => void);
6
+ children?: Snippet;
7
+ }
8
+ declare const PineappleSwitch: import("svelte").Component<Props, {}, "checked">;
9
+ type PineappleSwitch = ReturnType<typeof PineappleSwitch>;
10
+ export default PineappleSwitch;
@@ -1,8 +1,10 @@
1
- export { default as ImageIcon } from './ImageIcon.svelte';
2
- export { default as TextLink } from './TextLink.svelte';
3
- export * from './ColorScheme';
4
- export * from './GeneralUIProps';
5
- export * from './OnBackground';
6
- export * from './pinya-card/index';
7
- export * from './WrapperProps';
8
- export * from './pinya-button/index';
1
+ export { default as ImageIcon } from "./ImageIcon.svelte";
2
+ export { default as TextLink } from "./TextLink.svelte";
3
+ export * from "./ColorScheme";
4
+ export * from "./GeneralUIProps";
5
+ export * from "./OnBackground";
6
+ export * from "./pinya-card/index";
7
+ export * from "./WrapperProps";
8
+ export * from "./pinya-button/index";
9
+ export * from "./text-chip";
10
+ export * from "./CodeBlock";