@immich/ui 0.39.2 → 0.40.0

package/dist/components/Markdown/BlockQuote.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import Text from '../Text/Text.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children: Snippet;
+  };
+
+  const { children }: Props = $props();
+</script>
+
+<Text {children} class="border-muted border-s-4 ps-4" variant="italic" />

package/dist/components/Markdown/BlockQuote.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const BlockQuote: import("svelte").Component<Props, {}, "">;
+type BlockQuote = ReturnType<typeof BlockQuote>;
+export default BlockQuote;

package/dist/components/Markdown/Code.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import Code from '../Code/Code.svelte';
+  import CodeBlock from '../CodeBlock/CodeBlock.svelte';
+  import * as languages from 'svelte-highlight/languages';
+
+  type Props = {
+    code: string;
+    multiline?: boolean;
+    lang?: string;
+  };
+
+  const { code, lang, multiline }: Props = $props();
+
+  const getLanguage = (lang: string | undefined) => {
+    switch (lang) {
+      case 'js': {
+        lang = 'javascript';
+        break;
+      }
+
+      case 'ts': {
+        lang = 'typescript';
+        break;
+      }
+    }
+
+    if (lang) {
+      return languages[lang as keyof typeof languages];
+    }
+  };
+
+  let language = $derived(getLanguage(lang) ?? languages.plaintext);
+</script>
+
+{#if multiline}
+  <div class="mt-2 mb-2">
+    <CodeBlock {code} {language} />
+  </div>
+{:else}
+  <Code>{code}</Code>
+{/if}

package/dist/components/Markdown/Code.svelte.d.ts

@@ -0,0 +1,9 @@
+import Code from '../Code/Code.svelte';
+type Props = {
+    code: string;
+    multiline?: boolean;
+    lang?: string;
+};
+declare const Code: import("svelte").Component<Props, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/components/Markdown/Heading.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import Heading from '../Heading/Heading.svelte';
+  import type { HeadingTag, Size } from '../../types.js';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    id?: string;
+    level?: number;
+    children: Snippet;
+  };
+
+  const { children, id, level }: Props = $props();
+
+  const getSizeAndTag = (level?: number): { size: Size; tag: HeadingTag } => {
+    switch (level) {
+      case 1: {
+        return { size: 'giant', tag: 'h1' };
+      }
+      case 2: {
+        return { size: 'large', tag: 'h2' };
+      }
+      case 3: {
+        return { size: 'medium', tag: 'h3' };
+      }
+      case 4: {
+        return { size: 'small', tag: 'h4' };
+      }
+      case 5: {
+        return { size: 'tiny', tag: 'h5' };
+      }
+      case 6: {
+        return { size: 'tiny', tag: 'h6' };
+      }
+      default: {
+        return { size: 'tiny', tag: 'p' };
+      }
+    }
+  };
+
+  let { size, tag } = $derived(getSizeAndTag(level));
+</script>
+
+<Heading {size} {tag} class="mt-4" {id}>
+  {@render children()}
+</Heading>

package/dist/components/Markdown/Heading.svelte.d.ts

@@ -0,0 +1,10 @@
+import Heading from '../Heading/Heading.svelte';
+import type { Snippet } from 'svelte';
+type Props = {
+    id?: string;
+    level?: number;
+    children: Snippet;
+};
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/components/Markdown/LineBreak.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { cleanClass } from '../../utilities/internal.js';
+
+  type Props = {
+    class?: string;
+  };
+
+  const { class: className }: Props = $props();
+</script>
+
+<hr class={cleanClass('my-6 border-t', className)} />

package/dist/components/Markdown/LineBreak.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    class?: string;
+};
+declare const LineBreak: import("svelte").Component<Props, {}, "">;
+type LineBreak = ReturnType<typeof LineBreak>;
+export default LineBreak;

package/dist/components/Markdown/Link.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import Link from '../Link/Link.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    href: string;
+    title?: string;
+    children?: Snippet;
+  };
+
+  const { href, title, children }: Props = $props();
+</script>
+
+<Link {href} {title} {children} />

package/dist/components/Markdown/Link.svelte.d.ts

@@ -0,0 +1,10 @@
+import Link from '../Link/Link.svelte';
+import type { Snippet } from 'svelte';
+type Props = {
+    href: string;
+    title?: string;
+    children?: Snippet;
+};
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/Markdown/List.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    ordered?: boolean;
+    children: Snippet;
+  };
+
+  const { children, ordered }: Props = $props();
+  const styles = 'list-outside ps-6 w-full flex flex-col gap-1';
+</script>
+
+{#if ordered}
+  <ol class="list-decimal {styles}">
+    {@render children?.()}
+  </ol>
+{:else}
+  <ul class="list-disc {styles}">
+    {@render children?.()}
+  </ul>
+{/if}

package/dist/components/Markdown/List.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    ordered?: boolean;
+    children: Snippet;
+};
+declare const List: import("svelte").Component<Props, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/components/Markdown/ListItem.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Checkbox from '../Checkbox/Checkbox.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    checked?: boolean;
+    task?: boolean;
+    children: Snippet;
+  };
+
+  const { children, checked, task }: Props = $props();
+</script>
+
+<li class:list-none={task}>
+  {#if task}
+    <Checkbox {checked} readonly size="tiny" color="secondary" />
+  {/if}
+  {@render children?.()}
+</li>

package/dist/components/Markdown/ListItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    checked?: boolean;
+    task?: boolean;
+    children: Snippet;
+};
+declare const ListItem: import("svelte").Component<Props, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/components/Markdown/Paragraph.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Text } from '../../index.ts';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children: Snippet;
+  };
+
+  const { children }: Props = $props();
+</script>
+
+<Text class="mb-1">
+  {@render children()}
+</Text>

package/dist/components/Markdown/Paragraph.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const Paragraph: import("svelte").Component<Props, {}, "">;
+type Paragraph = ReturnType<typeof Paragraph>;
+export default Paragraph;

package/dist/components/Markdown/index.d.ts

@@ -0,0 +1,35 @@
+export declare const Markdown: {
+    Link: import("svelte").Component<{
+        href: string;
+        title?: string;
+        children?: import("svelte").Snippet;
+    }, {}, "">;
+    BlockQuote: import("svelte").Component<{
+        children: import("svelte").Snippet;
+    }, {}, "">;
+    Code: import("svelte").Component<{
+        code: string;
+        multiline?: boolean;
+        lang?: string;
+    }, {}, "">;
+    Heading: import("svelte").Component<{
+        id?: string;
+        level?: number;
+        children: import("svelte").Snippet;
+    }, {}, "">;
+    LineBreak: import("svelte").Component<{
+        class?: string;
+    }, {}, "">;
+    ListItem: import("svelte").Component<{
+        checked?: boolean;
+        task?: boolean;
+        children: import("svelte").Snippet;
+    }, {}, "">;
+    List: import("svelte").Component<{
+        ordered?: boolean;
+        children: import("svelte").Snippet;
+    }, {}, "">;
+    Paragraph: import("svelte").Component<{
+        children: import("svelte").Snippet;
+    }, {}, "">;
+};

package/dist/components/Markdown/index.js

@@ -0,0 +1,18 @@
+import BlockQuote from './BlockQuote.svelte';
+import Code from './Code.svelte';
+import Heading from './Heading.svelte';
+import LineBreak from './LineBreak.svelte';
+import Link from './Link.svelte';
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+import Paragraph from './Paragraph.svelte';
+export const Markdown = {
+    Link,
+    BlockQuote,
+    Code,
+    Heading,
+    LineBreak,
+    ListItem,
+    List,
+    Paragraph,
+};

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
+export { Markdown } from './components/Markdown/index.js';
 export { default as Modal } from './components/Modal/Modal.svelte';
 export { default as ModalBody } from './components/Modal/ModalBody.svelte';
 export { default as ModalFooter } from './components/Modal/ModalFooter.svelte';

package/dist/index.js

@@ -44,6 +44,7 @@ export { default as Label } from './components/Label/Label.svelte';
 export { default as Link } from './components/Link/Link.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from './components/Logo/Logo.svelte';
+export { Markdown } from './components/Markdown/index.js';
 export { default as Modal } from './components/Modal/Modal.svelte';
 export { default as ModalBody } from './components/Modal/ModalBody.svelte';
 export { default as ModalFooter } from './components/Modal/ModalFooter.svelte';

package/dist/theme/default.css

@@ -8,6 +8,7 @@
   --color-danger: rgb(var(--immich-ui-danger));
   --color-warning: rgb(var(--immich-ui-warning));
   --color-info: rgb(var(--immich-ui-info));
+  --color-muted: rgb(var(--immich-ui-muted));
   --color-subtle: rgb(var(--immich-ui-gray));
 }
 
@@ -24,6 +25,7 @@
     --immich-ui-danger: 200 60 60;
     --immich-ui-warning: 216 143 64;
     --immich-ui-info: 8 111 230;
+    --immich-ui-muted: 161 161 161;
     --immich-ui-gray: 246 246 246;
 
     --immich-ui-default-border: 209 213 219;
@@ -38,6 +40,7 @@
     --immich-ui-danger: 246 125 125;
     --immich-ui-warning: 254 197 132;
     --immich-ui-info: 121 183 254;
+    --immich-ui-muted: 212 212 212;
     --immich-ui-gray: 33 33 33;
 
     --immich-ui-default-border: 33 33 33;

package/dist/utilities/common.js

@@ -12,10 +12,15 @@ export const resolveUrl = (url, currentHostname) => {
     if (!isExternalLink(url)) {
         return url;
     }
-    const target = new URL(url);
-    const targetApp = getImmichApp(target.hostname);
-    const currentApp = getImmichApp(currentHostname ?? globalThis.location?.hostname ?? env.PUBLIC_IMMICH_HOSTNAME);
-    return targetApp && targetApp === currentApp ? target.pathname : target.href;
+    try {
+        const target = new URL(url);
+        const targetApp = getImmichApp(target.hostname);
+        const currentApp = getImmichApp(currentHostname ?? globalThis.location?.hostname ?? env.PUBLIC_IMMICH_HOSTNAME);
+        return targetApp && targetApp === currentApp ? target.pathname : target.href;
+    }
+    catch {
+        return url;
+    }
 };
 export const isExternalLink = (href) => {
     return !(href.startsWith('/') || href.startsWith('#'));

package/package.json

@@ -1,27 +1,11 @@
 {
   "name": "@immich/ui",
-  "version": "0.39.2",
+  "version": "0.40.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/immich-app/ui.git"
-  },
-  "scripts": {
-    "create": "node scripts/create.js",
-    "start": "npm run start:dev",
-    "start:dev": "vite dev",
-    "watch": "vite build --watch",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "npm run sync && svelte-package && publint",
-    "check": "npm run sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "npm run sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "eslint . --max-warnings 0",
-    "lint:fix": "npm run lint -- --fix",
-    "format": "prettier --check .",
-    "format:fix": "prettier --write .",
-    "test": "vitest",
-    "sync": "svelte-kit sync"
+    "url": "git+https://github.com/immich-app/ui.git",
+    "directory": "packages/ui"
   },
   "files": [
     "dist",
@@ -51,35 +35,41 @@
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "@tailwindcss/postcss": "^4.1.7",
     "@tailwindcss/vite": "^4.1.7",
-    "@types/eslint": "^9.6.0",
     "@types/luxon": "^3.7.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.7.0",
-    "eslint-config-prettier": "^10.0.0",
-    "eslint-plugin-svelte": "^3.9.3",
     "globals": "^16.0.0",
-    "prettier": "^3.3.2",
-    "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.7.0",
     "publint": "^0.3.0",
     "svelte": "^5.37.0",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^4.1.7",
     "typescript": "^5.0.0",
-    "typescript-eslint": "^8.34.1",
     "vite": "^7.0.0",
     "vitest": "^3.0.0"
   },
   "dependencies": {
-    "svelte-highlight": "^7.8.4",
     "@mdi/js": "^7.4.47",
     "bits-ui": "^2.9.8",
     "luxon": "^3.7.2",
     "simple-icons": "^15.14.0",
+    "svelte-highlight": "^7.8.4",
     "tailwind-merge": "^3.0.0",
-    "tailwind-variants": "^3.0.0"
+    "tailwind-variants": "^3.0.0",
+    "@immich/svelte-markdown-preprocess": "^0.0.0"
   },
   "volta": {
     "node": "22.20.0"
+  },
+  "scripts": {
+    "create": "node scripts/create.js",
+    "start": "npm run start:dev",
+    "start:dev": "vite dev",
+    "watch": "vite build --watch",
+    "build": "vite build && pnpm package",
+    "preview": "vite preview",
+    "package": "npm run sync && svelte-package && publint",
+    "check": "npm run sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "npm run sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest",
+    "sync": "svelte-kit sync"
   }
-}
+}

package/README.md

@@ -1,44 +0,0 @@
-# @immich/ui
-
-A component library for [Immich](https://immich.app), written in [Svelte](https://svelte.dev).
-
-## Install
-
-```bash
-npm i -D @immich/ui
-```
-
-## Usage
-
-Import components from `@immich/ui`. For example:
-
-```html
-<script lang="ts">
-  import { Card, CardBody, CardHeader, CardTitle, CardDescription, Heading, Text } from '@immich/ui';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>@immich/ui</CardTitle>
-    <CardDescription>A component library</CardDescription>
-  </CardHeader>
-  <CardBody>
-    <Lorem />
-  </CardBody>
-  <CardFooter>Privacy should not be a luxury</CardFooter>
-</Card>
-```
-
-## Documentation
-
-To view the examples located at `src/routes/examples`, run `npm start` and navigate to http://localhost:5173/.
-
-## Contributing
-
-PR's are welcome! Also feel free to reach out to the team on [Discord](https://discord.immich.app).
-
-## Technology
-
-- [Svelte](https://svelte.dev)
-- [tailwindcss](https://tailwindcss.com)
-- [Material Design icons (@mdi/js)](https://pictogrammers.com/library/mdi/)