@oneclick.dev/cms-kit 0.0.1

package/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { TabsContent, type TabsContentProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/components/ui/tabs/TabsList.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { TabsList, type TabsListProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

package/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      props.class,
+    )"
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>

package/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

package/components/ui/tailwind-color-picker/TailwindColorPicker.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+
+const tailwindColors = ['yellow', 'green', 'cyan', 'blue', 'purple', 'pink', 'red']
+
+const props = defineProps<{
+  defaultValue?: string
+  modelValue?: string
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue ?? '',
+})
+
+const selectColor = (color: string) => {
+  if (color === modelValue.value) {
+    emits('update:modelValue', props.defaultValue ?? '')
+  } else {
+    emits('update:modelValue', color)
+  }
+}
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="outline" class="w-44">
+        <span v-if="modelValue" class="flex items-center gap-2">
+          <div :class="`bg-${modelValue}`" class="size-5 rounded-full"></div>
+          {{modelValue.split('-')[0]}}
+          {{modelValue.split('-')[1]}}
+        </span>
+        <span v-else>
+          Select color
+        </span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-[170px]">
+      <div class="flex gap-1 mb-1" v-for="colorPalette in tailwindColors" :key="colorPalette">
+        <div
+          v-for="i in 5"
+          :key="i"
+          class="flex flex-col items-center cursor-pointer size-6 rounded-full cursor-pointer transition-all"
+          :class="`bg-${colorPalette}-${(i + 2) * 100} ${modelValue === `${colorPalette}-${(i + 2) * 100}` ? 'scale-110 z-10 outline-2 outline-white' : ''}`"
+          @click="selectColor(`${colorPalette}-${(i + 2) * 100}`)"
+        >
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>

package/components/ui/tailwind-color-picker/index.ts

@@ -0,0 +1 @@
+export { default as TailwindColorPicker } from './TailwindColorPicker.vue'

package/components/ui/textarea/Textarea.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+  />
+</template>

package/components/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'

package/components/ui/toggle/Toggle.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'
+import { type ToggleVariants, toggleVariants } from '.'
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleVariants['variant']
+  size?: ToggleVariants['size']
+}>(), {
+  variant: 'default',
+  size: 'default',
+  disabled: false,
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    data-slot="toggle"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Toggle>
+</template>

package/components/ui/toggle/index.ts

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Toggle } from './Toggle.vue'
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>

package/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot />
+  </TooltipRoot>
+</template>

package/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { TooltipArrow, TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

package/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'

package/composables/useCms.ts

@@ -0,0 +1,11 @@
+export function useCms() {
+  const breadcrumbs = inject('breadcrumbs')
+  const project = inject('currentProject')
+
+  if (!breadcrumbs || !project) {
+    throw new Error('Not inside CMS context')
+  }
+
+  return { breadcrumbs, project }
+}
+  

package/index.ts

@@ -0,0 +1,10 @@
+export * from './composables/useCms'
+export * from './types'
+
+const modules = import.meta.glob('./components/ui/**/index.ts', { eager: true })
+
+export const components = {}
+
+for (const mod of Object.values(modules)) {
+  Object.assign(components, mod)
+}

package/lib/interpolation.ts

@@ -0,0 +1,77 @@
+export function interpolateTemplateFromVariableContext(template: string, variableContext: Variable[]): string {
+  if (!template) return "";
+  const context: Record<string, any> = variableContext?.reduce((acc, variable) => {
+    acc[variable.name] = variable.value
+    return acc
+  }, {}) ?? {}
+
+  return interpolateTemplate(template, sanitizeContext(context))
+}
+
+export function interpolateTemplateFromVariableObject(template: string, variableContext: Record<string, any>): string {
+  return interpolateTemplate(template, sanitizeContext(variableContext))
+}
+
+
+// HELPER INTERFACES & FUNCTIONS
+interface Variable {
+  name: string,
+  type: string,
+  value: any
+}
+
+function isValidIdentifier(name: string): boolean {
+  return /^[$A-Z_][0-9A-Z_$]*$/i.test(name)
+}
+
+function sanitizeContext(context: Record<string, any>): Record<string, any> {
+  const blacklist = ['__proto__', 'constructor', 'prototype']
+  const deepSanitize = (obj: any): any => {
+    if (Array.isArray(obj)) return obj.map(deepSanitize)
+    if (obj && typeof obj === 'object') {
+      const result: Record<string, any> = {}
+      for (const key in obj) {
+        if (!blacklist.includes(key) && isValidIdentifier(key)) {
+          result[key] = deepSanitize(obj[key])
+        }
+      }
+      return result
+    }
+    return obj
+  }
+  return deepSanitize(context)
+}
+
+function interpolateTemplate(template: string, context: Record<string, any>): string {
+  return template.replace(/\{\{\s*(.+?)\s*\}\}/gs, (_, rawExpr) => {
+    const expr = rawExpr.trim()
+    if (!expr) return ''
+
+    // 🧠 Detect all referenced variable names
+    const usedVars = extractIdentifiers(expr)
+
+    // 🛡 Build guaranteed-safe context
+    const fullContext: Record<string, any> = { ...context }
+    for (const key of usedVars) {
+      if (!(key in fullContext)) fullContext[key] = undefined
+    }
+
+    const keys = Object.keys(fullContext)
+    const values = Object.values(fullContext)
+
+    try {
+      const func = new Function(...keys, `'use strict'; return (${expr})`)
+      const result = func(...values)
+      return typeof result === 'string' ? result : JSON.stringify(result, null, 2)
+    } catch (err) {
+      console.warn(`Interpolation failed for expression: "${rawExpr}"`, err)
+      return ''
+    }
+  })
+}
+
+function extractIdentifiers(expr: string): string[] {
+  const matches = expr.match(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g) || []
+  const reserved = new Set(['true', 'false', 'null', 'undefined', 'return', 'if', 'else', 'try', 'catch', 'typeof'])
+  return [...new Set(matches.filter(word => !reserved.has(word)))]
+}

package/lib/utils.ts

@@ -0,0 +1,24 @@
+import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value = typeof updaterOrValue === 'function'
+    ? updaterOrValue(ref.value)
+    : updaterOrValue
+}
+
+export function formatFileSize(size: number) {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  let i = 0
+  while (size >= 1024 && i < units.length - 1) {
+    size /= 1024
+    i++
+  }
+  return `${size.toFixed(2)} ${units[i]}`
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@oneclick.dev/cms-kit",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "build:watch": "vite build --watch"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.5",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "vite": "^6.3.2",
+    "vite-plugin-dts": "^4.5.3"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.9.2",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-javascript": "^6.1.7",
+    "@codemirror/language": "^6.11.1",
+    "@codemirror/state": "^6.4.2",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.24.0",
+    "@dagrejs/dagre": "^1.1.5",
+    "@dicebear/collection": "^9.2.2",
+    "@dicebear/core": "^9.2.2",
+    "@tanstack/vue-table": "^8.21.3",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.2",
+    "@vue-flow/core": "^1.45.0",
+    "@vue-flow/minimap": "^1.5.3",
+    "@vue-flow/node-toolbar": "^1.1.1",
+    "@vueuse/core": "^13.1.0",
+    "@zxing/browser": "^0.1.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "emoji-mart-vue-fast": "^15.0.4",
+    "graphlib": "^2.1.8",
+    "gsap": "^3.13.0",
+    "lucide-vue-next": "^0.509.0",
+    "motion-v": "^1.0.0",
+    "reka-ui": "^2.2.0",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss": "^4.1.5",
+    "vaul-vue": "^0.4.1",
+    "vee-validate": "^4.15.0",
+    "vue-grid-layout-v3": "^3.1.2",
+    "vue-sonner": "^1.3.2"
+  }
+}

package/styles/components/code-editor.css

@@ -0,0 +1,52 @@
+.cm-editor {
+  min-height: 100%;
+  max-height: 200px;
+  padding-block: calc(var(--spacing) * 1);
+  padding-inline: calc(var(--spacing) * 3);
+  border: 1px solid var(--input);
+  border-radius: calc(var(--radius) - 2px);
+  background-color: var(--background);
+  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  color: inherit;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.cm-focused {
+    outline: 3px solid color-mix(in oklab, var(--ring) 50%, transparent);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    border-color: var(--ring);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+}
+
+.cm-line {
+  padding: 0 !important;
+}
+
+.cm-scroller {
+  flex: 1;
+}
+
+.cm-interpolation {
+  color: #235dff;
+  background: #edf1ff;
+  padding: 4px 6px;
+  border-radius: 5px;
+  font-weight: 600;
+}
+
+
+.dark {
+  .cm-editor {
+    background-color: color-mix(in oklab, var(--input) 30%, transparent);
+  }
+
+  .cm-interpolation {
+    color: #bfbfff;
+    background: #edf1ff26;
+  }
+}