chore(deps): bump dompurify from 3.4.11 to 3.4.13

package.json

@@ -122,7 +122,7 @@
     "js-yaml": "4.3.1",
     "tar": "7.5.21",
     "fast-uri": "3.1.5",
-    "postcss": "8.5.25"
+    "postcss": "8.5.26"
   },
   "engines": {
     "node": ">=22.22.0 <23.0.0"

packages/bbui/package.json

@@ -30,8 +30,6 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@supertoolmake/shared-core": "*",
-    "@supertoolmake/string-templates": "*",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -75,6 +73,8 @@
     "@spectrum-css/typography": "3.0.1",
     "@spectrum-css/underlay": "2.0.9",
     "@spectrum-css/vars": "3.0.1",
+    "@supertoolmake/shared-core": "*",
+    "@supertoolmake/string-templates": "*",
     "date-fns": "4.1.0",
     "dayjs": "1.10.8",
     "easymde": "2.16.1",

packages/bbui/src/Drawer/Drawer.svelte

@@ -57,7 +57,7 @@ const unobserve = () => {
 </script>
 
 <script>
-  import { generate } from "shortid"
+  import { nanoid } from "nanoid"
   import { createEventDispatcher, onDestroy, setContext } from "svelte"
   import Portal from "svelte-portal"
   import ActionButton from "../ActionButton/ActionButton.svelte"
@@ -73,7 +73,7 @@ const unobserve = () => {
   const spacing = 11
 
   let visible = false
-  let drawerId = generate()
+  let drawerId = nanoid(9)
 
   const handleCancel = () => {
     if (onCancel) {

packages/bbui/src/Modal/Modal.svelte

@@ -11,7 +11,7 @@ export type { ModalAPI }
   import Portal from "svelte-portal"
   import Context from "../context"
   import { ModalCancelFrom } from "../constants"
-  import { generate } from "shortid"
+  import { nanoid } from "nanoid"
 
   export let fixed: boolean = false
   export let inline: boolean = false
@@ -22,7 +22,7 @@ export type { ModalAPI }
 
   // Ensure any popovers inside this modal are rendered inside this modal
   // Unique ids are required to ensure nested modals are parented correctly
-  const uniqueId = generate()
+  const uniqueId = nanoid(9)
   setContext(Context.PopoverRoot, `.spectrum-Modal-${uniqueId}`)
 
   const dispatch = createEventDispatcher<{

packages/builder/package.json

@@ -45,11 +45,6 @@
     ]
   },
   "dependencies": {
-    "@supertoolmake/bbui": "*",
-    "@supertoolmake/frontend-core": "*",
-    "@supertoolmake/shared-core": "*",
-    "@supertoolmake/string-templates": "*",
-    "@supertoolmake/types": "*",
     "@codemirror/autocomplete": "6.20.1",
     "@codemirror/commands": "6.10.3",
     "@codemirror/lang-html": "6.4.11",
@@ -62,6 +57,11 @@
     "@dagrejs/dagre": "1.1.4",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
+    "@supertoolmake/bbui": "*",
+    "@supertoolmake/frontend-core": "*",
+    "@supertoolmake/shared-core": "*",
+    "@supertoolmake/string-templates": "*",
+    "@supertoolmake/types": "*",
     "@xyflow/svelte": "0.1.39",
     "@zerodevx/svelte-json-view": "1.0.7",
     "codemirror": "5.65.16",
@@ -70,8 +70,8 @@
     "fast-json-patch": "^3.1.1",
     "lodash": "4.18.1",
     "marked": "15.0.8",
+    "nanoid": "6.0.1",
     "remixicon": "2.5.0",
-    "shortid": "2.2.17",
     "svelte-dnd-action": "0.9.64",
     "svelte-loading-spinners": "^0.3.6",
     "svelte-portal": "^2.2.1",
@@ -80,13 +80,12 @@
   "devDependencies": {
     "@babel/plugin-transform-runtime": "7.29.0",
     "@babel/preset-env": "7.29.5",
-    "@supertoolmake/client": "*",
     "@rollup/plugin-replace": "6.0.3",
     "@roxi/routify": "3.6.4",
+    "@supertoolmake/client": "*",
     "@sveltejs/vite-plugin-svelte": "7.1.2",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/svelte": "5.2.8",
-    "@types/shortid": "2.2.0",
     "identity-obj-proxy": "3.0.0",
     "resize-observer-polyfill": "1.5.1",
     "svelte-jester": "1.3.2",

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte

@@ -9,7 +9,7 @@ import {
   Search,
 } from "@supertoolmake/bbui"
 import { cloneDeep } from "lodash/fp"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { tick } from "svelte"
 import { dndzone } from "svelte-dnd-action"
 import {
@@ -24,7 +24,7 @@ const EVENT_TYPE_KEY = "##eventHandlerType"
 const IF_TYPE = "IF / ELSE"
 const actionTypes = getAvailableActions()
 const flipDurationMs = 150
-const zoneType = generate()
+const zoneType = nanoid(9)
 
 const branchConfigs = [
   { key: "actions", label: "THEN" },
@@ -35,7 +35,7 @@ const createAction = (actionType) => {
   const newAction = {
     parameters: {},
     [EVENT_TYPE_KEY]: actionType.name,
-    id: generate(),
+    id: nanoid(9),
   }
   if (isIFBlock(newAction)) {
     newAction.parameters.actions = []
@@ -454,7 +454,7 @@ $: allBindings = getAllBindings(
 $: {
   if (actions) {
     actions.forEach((action) => {
-      if (!action.id) action.id = generate()
+      if (!action.id) action.id = nanoid(9)
     })
   }
 }

packages/builder/src/components/design/settings/controls/ButtonConditionEditor.svelte

@@ -20,7 +20,7 @@ import type {
 } from "@supertoolmake/types"
 import { BasicOperator, FieldType } from "@supertoolmake/types"
 import { cloneDeep } from "lodash"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { createEventDispatcher } from "svelte"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
@@ -45,7 +45,7 @@ export let componentBindings: EnrichedBinding[] = []
 let drawer: Drawer
 const dispatch = createEventDispatcher()
 const flipDurationMs = 150
-const zoneType = generate()
+const zoneType = nanoid(9)
 const actionOptions = [
   {
     label: "Hide component",
@@ -107,7 +107,7 @@ const addCondition = () => {
   conditions = [
     ...conditions,
     {
-      id: generate(),
+      id: nanoid(9),
       action: "hide",
       operator: BasicOperator.EQUAL,
       valueType: "string",
@@ -122,7 +122,7 @@ const removeCondition = (id: string) => {
 
 const duplicateCondition = (id: string) => {
   const condition: ComponentCondition = conditions.find((link) => link.id === id)!
-  const duplicate = { ...condition, id: generate() }
+  const duplicate = { ...condition, id: nanoid(9) }
   conditions = [...conditions, duplicate]
 }
 

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte

@@ -9,7 +9,7 @@ import {
   Layout,
   Select,
 } from "@supertoolmake/bbui"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
 import CellEditor from "./CellEditor.svelte"
@@ -80,7 +80,7 @@ const reset = () => {
 $: unselectedColumns = getUnselectedColumns(options, columns)
 $: columns.forEach((column) => {
   if (!column.id) {
-    column.id = generate()
+    column.id = nanoid(9)
   }
 })
 </script>

packages/builder/src/components/design/settings/controls/DraggableList.svelte

@@ -1,6 +1,6 @@
 <script>
 import { Icon } from "@supertoolmake/bbui"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { createEventDispatcher, setContext } from "svelte"
 import { get, writable } from "svelte/store"
 import { dndzone } from "svelte-dnd-action"
@@ -13,7 +13,7 @@ export let listItemKey
 export let draggable = true
 export let focus = undefined
 
-let zoneType = generate()
+let zoneType = nanoid(9)
 
 let store = writable({
   selected: null,
@@ -33,7 +33,7 @@ const buildDraggable = (items) => {
   const seenIds = new Set()
   return items
     .map((item) => {
-      let id = listItemKey ? item[listItemKey] : generate()
+      let id = listItemKey ? item[listItemKey] : nanoid(9)
       return {
         id,
         item,

packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsDrawer.svelte

@@ -1,6 +1,6 @@
 <script>
 import { Body, Button, DrawerContent, Icon, Input, Label, Layout } from "@supertoolmake/bbui"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 
 export let options = []
 
@@ -12,7 +12,7 @@ const addOption = () => {
   options = [
     ...options,
     {
-      id: generate(),
+      id: nanoid(9),
       label: null,
       value: null,
     },

packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte

@@ -15,7 +15,7 @@ import {
 import { Constants, FilterUsers, QueryUtils } from "@supertoolmake/frontend-core"
 import { FieldType } from "@supertoolmake/types"
 import { cloneDeep } from "lodash"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { createEventDispatcher } from "svelte"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
@@ -81,7 +81,7 @@ const save = async () => {
 
 const addCondition = () => {
   const condition = {
-    id: generate(),
+    id: nanoid(9),
     target: targetOptions[0].value,
     metadataKey: conditionOptions[0].value,
     operator: operatorOptions[0]?.value,
@@ -92,7 +92,7 @@ const addCondition = () => {
 }
 
 const duplicateCondition = (condition) => {
-  const dupe = { ...condition, id: generate() }
+  const dupe = { ...condition, id: nanoid(9) }
   tempValue = [...tempValue, dupe]
 }
 

packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte

@@ -15,7 +15,7 @@ import {
 import { DEFAULT_URL_VALIDATION_PROTOCOLS, URL_VALIDATION_PROTOCOLS } from "@supertoolmake/types"
 import type { Component, EnrichedBinding, UrlValidationProtocol } from "@supertoolmake/types"
 import { isJSBinding } from "@supertoolmake/string-templates"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { SvelteSet } from "svelte/reactivity"
 import { selectedScreen, selectedComponent } from "@/stores/builder"
 import { findClosestMatchingComponent } from "@/helpers/components"
@@ -241,7 +241,7 @@ const exists = (value: unknown): boolean => {
 }
 
 const addRule = (): void => {
-  const id = generate()
+  const id = nanoid(9)
   rules = [
     ...(rules || []),
     {
@@ -264,7 +264,7 @@ const duplicateRule = (id: string): void => {
   if (!existingRule) {
     return
   }
-  const newRule = { ...existingRule, id: generate() }
+  const newRule = { ...existingRule, id: nanoid(9) }
   rules = [...rules, newRule]
   expandedRules.add(newRule.id)
 }

packages/builder/src/pages/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte

@@ -2,7 +2,7 @@
 import { Button, Body, Icon, Toggle, DrawerContent, Layout, Select } from "@supertoolmake/bbui"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 import ConditionValueControl from "@/components/common/ConditionValueControl.svelte"
 import { QueryUtils, Constants } from "@supertoolmake/frontend-core"
@@ -16,7 +16,7 @@ export let componentBindings = []
 export let actionOptions = null
 
 const flipDurationMs = 150
-const zoneType = generate()
+const zoneType = nanoid(9)
 const defaultActionOptions = [
   {
     label: "Hide component",
@@ -48,7 +48,7 @@ $: settingOptions = settings
   }))
 $: conditions.forEach((link) => {
   if (!link.id) {
-    link.id = generate()
+    link.id = nanoid(9)
   }
   if (link.valueType === "Binding") {
     link.valueType = "string"
@@ -84,7 +84,7 @@ const addCondition = () => {
     ...conditions,
     {
       valueType: "string",
-      id: generate(),
+      id: nanoid(9),
       action: "hide",
       operator: Constants.OperatorOptions.Equals.value,
     },
@@ -97,7 +97,7 @@ const removeCondition = (id) => {
 
 const duplicateCondition = (id) => {
   const condition = conditions.find((link) => link.id === id)
-  const duplicate = { ...condition, id: generate() }
+  const duplicate = { ...condition, id: nanoid(9) }
   conditions = [...conditions, duplicate]
 }
 

packages/builder/src/routes/builder/workspace/[application]/design/[workspaceAppId]/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte

@@ -10,7 +10,7 @@ import {
   Toggle,
 } from "@supertoolmake/bbui"
 import { Constants, QueryUtils } from "@supertoolmake/frontend-core"
-import { generate } from "shortid"
+import { nanoid } from "nanoid"
 import { flip } from "svelte/animate"
 import { dndzone } from "svelte-dnd-action"
 import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
@@ -25,7 +25,7 @@ export let componentBindings = []
 export let actionOptions = null
 
 const flipDurationMs = 150
-const zoneType = generate()
+const zoneType = nanoid(9)
 const defaultActionOptions = [
   {
     label: "Hide component",
@@ -79,7 +79,7 @@ const addCondition = () => {
     ...conditions,
     {
       valueType: "string",
-      id: generate(),
+      id: nanoid(9),
       action: "hide",
       operator: Constants.OperatorOptions.Equals.value,
     },
@@ -92,7 +92,7 @@ const removeCondition = (id) => {
 
 const duplicateCondition = (id) => {
   const condition = conditions.find((link) => link.id === id)
-  const duplicate = { ...condition, id: generate() }
+  const duplicate = { ...condition, id: nanoid(9) }
   conditions = [...conditions, duplicate]
 }
 
@@ -185,7 +185,7 @@ $: settingOptions = settings
   }))
 $: conditions.forEach((link) => {
   if (!link.id) {
-    link.id = generate()
+    link.id = nanoid(9)
   }
 })
 </script>